Question

我有一个在Create视图中使用的viewmodel：

视图模型

public class ReportViewModel
{
    public int ID { get; set; }
    [Display(Name = "Platform")]
    public string Platform { get; set; }
    [Display(Name = "Logo")]
    public HttpPostedFileBase Logo { get; set; }

}

创建视图

@model HPRWT.ViewModels.ReportViewModel
@using (Html.BeginForm("Create", "Report", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div class="editor-label">
            @Html.LabelFor(model => model.Platform )

            @Html.EditorFor(model => model.Platform )
            @Html.ValidationMessageFor(model => model.Platform)
        </div>
<div class="editor-label">
            @Html.LabelFor(model => model.Logo)

            <input type="file" id="Logo" name="Logo" />
        </div>
}

这项工作非常完美。但现在我需要一系列复选框（7x24）来获得免费时间（7天，24小时）。我有一个id数组（我需要一个定义的id，因为我使用jquery）。在创建视图中：

@for(int i = 1; i < labels.Length; i++)
        {
            <tr>
                <td>@labels[i][0]</td>@for(int j = 1; j < labels[i].Length; j++)
                    {
                        <td><div><input type="checkbox" id="@ids[i][j]" /><label for="@ids[i][j]"></label></div></td>
                    }

我的ID类似于R02C00（行的行数+行的数字+ 2位+ C（列）+列数（2位）。我生成它们：

for (int i = 1; i < 8; i++)
                for (int j = 1; j < 25; j++)
                    ids[i][j] = "R" + i.ToString("00") + "C" + (j-1).ToString("00");

这也很有效。现在我的问题是如何获得复选框值。

控制器

[HttpPost]
        public ActionResult Create(ReportViewModel rvm)
        {
            if (ModelState.IsValid)
            {
                rdb.Reports.Add(CreateReport(rvm));
                rdb.SaveChanges();
                return RedirectToAction("Index");  
            }

            return View(rvm);
        }

// Create a report from a reportviewmodel
        private Report CreateReport(ReportViewModel rvm)
        {
            Report report = new Report();


            // Platform
            string platform = rvm.Platform;
            report.Platform = platform ;
// Logo
            HttpPostedFileBase inputFile = rvm.InputFile; // Some code to get the path

return report;
}

如何获取复选框值？如果我在reportviewmodel中添加一个bool [] []，有没有办法做@Html.Checkbox？（如果我必须在jquery中更改id名称，我不介意，并不强制要求像R01C01这样的id ...只有jquery中的id与html相同）

Answer 1

为什么不使用视图模型？

public class FreeHourViewModel
{
    public string Label { get; set; }
    public bool Selected { get; set; }
}

public class ReportViewModel
{
    public ReportViewModel()
    {
        this.FreeHours = Enumerable
            .Range(1, 7)
            .Select(day => 
                Enumerable.Range(1, 24).Select(hour => new FreeHourViewModel
                {
                    Label = string.Format("day: {0}, hour: {1}", day, hour)
                }
            ).ToArray()
        ).ToArray();
    }

    public int ID { get; set; }
    [Display(Name = "Platform")]
    public string Platform { get; set; }
    [Display(Name = "Logo")]
    public HttpPostedFileBase Logo { get; set; }

    public FreeHourViewModel[][] FreeHours { get; set; }
}

然后：

@for (int i = 0; i < Model.FreeHours.Length; i++)
{
    for (int j = 0; j < Model.FreeHours[i].Length; j++)
    {
        @Html.LabelFor(x => x.FreeHours[i][j].Selected, Model.FreeHours[i][j].Label)
        @Html.CheckBoxFor(x => x.FreeHours[i][j].Selected)
    }
}

提交表单时，由于您使用了真实的视图模型，因此模型绑定将按预期工作。此外，您不需要任何jQuery来生成这些复选框。如Html.CheckBoxFor这样的强类型助手是可行的方法。

Answer 2

如何使用与您的复选框相关的强类型视图？

public class ReportViewModel
{
    public ReportViewModel()
    {
        Days = new List<Day>();
    }
    public int ID { get; set; }
    [Display(Name = "Platform")]
    public string Platform { get; set; }
    [Display(Name = "Logo")]
    public HttpPostedFileBase Logo { get; set; }
    public IList<Day> Days { get; set; }
}
public class Hour
{
    public int Id { get; set; }
    public bool Selected { get; set; }
}
public class Day
{
    public Day()
    {
        Hours = new List<Hour>();
    }
    public int Id { get; set; }
    public bool Selected { get; set; }
    public IList<Hour> Hours { get; set; }
}

然后返回如下视图：

foreach (var d in Enum.GetValues(typeof(DayOfWeek)))
{
    var day = new Day { Id = (int)d };
    for (var i = 0; i < 25; i++)
    {
        day.Hours.Add(new Hour { Id = i });
    }
    model.Days.Add(day);
}
return View(model);

并将其添加到您的视图中：

for (var i = 0; i < 7; i++)
{
    <div id="days">            
        <ul>
            @for (var j = 0; j < 24; j++)
            {
                <li>@Html.CheckBoxFor(m=>Model.Days[i].Hours[j].Selected)</li>
            }
        </ul>  
    </div>
}

现在，当您收到输入时，您有一系列bool值，其中有一种Ids，即0-6天，0-23小时。您可以轻松确定选择的特定日期的小时数。

当然，您必须填写我的建议，如显示每个复选框的标签。

表单中的复选框数组

2 个答案: