Question

我正在显示带复选框的日历来管理假期。我设法通过复选框获取每个月的日期。但是，我希望相应日期显示日期，就像日历一样。同样，1月从星期一开始，所以我的上市应该从星期一开始，2月从星期四开始，等等......

以下是我的代码。

Holiday.cs

public class Holiday
    {
        public string Id { get; set; }
        public string selectedmonth { get; set; }
        public IEnumerable<SelectListItem> months  { get; set; }
        public string selectedyear { get; set; }
        public SelectList year { get; set; }
        public List<DateTime> dateList { get; set; }
        public List<Models.Days> dayList { get; set; }
    }

Days.cs

public class Days
    {
        public string dayid { get; set; }
        public string dayname { get; set; }
        public bool ischecked { get; set; }
    }

HolidayController.cs

public ActionResult Index()
        {
            ModelState.Clear();
            Models.Holiday holiday = new Models.Holiday();
            Context.Holiday contHoliday = new Context.Holiday();

            holiday.months = contHoliday.Months;
            holiday.year = new SelectList(Enumerable.Range(2008, DateTime.Now.Year - 2007).Reverse());
            holiday.dateList = GetDates(2018, 1);

            DateTime startday = holiday.dateList[0];
            string startday1 = startday.DayOfWeek.ToString();

            holiday.dayList = new List<Models.Days>();

            for(int i=0;i<holiday.dateList.Count;i++)
            {
                holiday.dayList.Add(new Models.Days { dayid = holiday.dateList[i].ToShortDateString().ToString(), dayname = holiday.dateList[i].Day.ToString(), ischecked = false });
            }

            List<DateTime> hollst = contHoliday.getDates(DateTime.Now.Month.ToString(),DateTime.Now.Year.ToString());

            if (hollst.Count > 0)
            {
                foreach (var date in hollst)
                {
                    for (int i = 0; i < holiday.dayList.Count; i++)
                    {
                        if (date.ToShortDateString() == holiday.dayList[i].dayid)
                        {
                            holiday.dayList[i].ischecked = true;
                        }
                    }
                }
            }

            return View(holiday);
        }

Index.cshtml

    <table class="table">
        <tr>
            <th>Monday</th>
            <th>Tuesday</th>
            <th>Wednesday</th>
            <th>Thursday</th>
            <th>Friday</th>
            <th>Saturday</th>
            <th>Sunday</th>
        </tr>



        <tr>
            @for (int i = 0; i < Model.dayList.Count; i++)
            {
                <td>
                    @Html.DisplayFor(m => Model.dayList[i].dayname)
                    @Html.CheckBoxFor(m => Model.dayList[i].ischecked)
                    @Html.HiddenFor(m => Model.dayList[i].dayid)
                    @Html.HiddenFor(m => Model.dayList[i].dayname)
                </td>

            }
        </tr>




 </table>

Answer 1

您可以使用modulus运算符每隔7个元素有条件地生成一个新的表行，但为了简化这一过程，Days的集合需要包含所有日期的值在表格中（即包括当月之前和之后的几个月中的任何日子 - 然后您可以有条件地隐藏或以褪色的方式显示）。

我建议您将模型修改为

public class DayVM
{
    public DateTime Date { get; set; }
    public int Day { get { return Date.Day; } }
    public bool IsCurrent { get; set; }
    public bool IsSelected { get; set; }
}

然后在控制器方法中填充集合的代码将是

// The following 2 values might come from parameters in your GET method
int month = 2;
int year = 2018;

DateTime firstOfMonth = new DateTime(year, month, 1);
int index = (int)firstOfMonth.DayOfWeek;
int daysInMonth = DateTime.DaysInMonth(year, month);
int totalDays = 35; // 5 rows by 7 days
if (daysInMonth + index > 35) // 6 rows by 7 days
{
    totalDays = 42;
}

IEnumerable<DateTime> existingHolidays = .... // your code to get any existing dates that should be marked as selected
List<DayVM> dates = new List<DayVM>();
DateTime startDate = firstOfMonth.AddDays(-index); // date of first column in first row
for (int i = 0; i < totalDays; i++)
{
    DateTime date = startDate.AddDays(i);
    DayVM day = new DayVM { Date = date };
    if (date.Month == month)
    {
        day.IsCurrent = true;
        if (existingHolidays.Contains(date))
        {
            day.IsSelected = true;
        }
    }
    dates.Add(day);
}
model.dayList = dates;

然后在视图中

<tr>
    @for (int i = 0; i < Model.dayList.Count; i++)
    {
        if (i > 0 && i % 7 == 0)
        {
            @:</tr><tr> // close and start new row
        }
        <td>
            @if(Model.dayList[i].IsCurrent)
            {
                <span>@Model.dayList[i].Day</span>
                @Html.CheckBoxFor(m => m.dayList[i].IsSelected)
            }
            @Html.HiddenFor(m => m.dayList[i].Date)  
        </td>
    }
</tr>

请参阅this DotNetFiddle以获取示例（请注意，小提琴包含您可能需要考虑的一些替代功能，例如隐藏复选框并使用颜色编码显示所选日期 - 单击单元格可切换复选框状态，并为不可选择的日期使用不同的样式 - 例如周末）

在mvc 5中显示带有复选框的日历

1 个答案: