如何获取MVC5中复选框的选中项的值？

Question

我有一个包含ICollection字段的视图模型，如下所示：

public class BusinessViewModel
{
    ...

    public virtual ICollection<Subcategory> Subcategories { get; set; }

    ...
}

然后，在我的实际视图中，我有一个如下代码段：

<div class="form-group">
    @Html.LabelFor(model => model.Subcategories, "Subcategory", htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        <span id="subcats">

        </span>
    </div>
</div>

之后，我在JS中进行了AJAX调用，该调用仅用复选框项目填充了subcat的span字段，而我的AJAX调用如下所示：

$("#CategoryID").change(function () {
    $("#subcats").empty();

    $.ajax({
        type: 'POST',
        url: '/Account/GetSubcategories',
        dataType: 'json',
        data: { id: $("#CategoryID").val() },
        success: function (subcategories) {
            $.each(subcategories, function (i, subcategory) {
                $("#subcats").append('<input type="checkbox" name="' + subcategory.value + '" value="' + subcategory.id + '" />' + subcategory.value + '<br />');
            });
        },
        error: function (ex) {
            console.log('Failed to retrieve subcategories! ' + ex);
        }
    });

    return false;
});

关键是，它在视图中一切正常，但是当我检查希望的项目并按下按钮以提交表单时，我收到一条错误消息，指出当我到达foreach语句时，发生了NullReferenceException。我的控制器中的以下代码：

    public async Task<ActionResult> RegisterBusiness(BusinessViewModel model)
    {
        if (ModelState.IsValid)
        {
            ...

            foreach (var subcategory in model.Subcategories)
            {
                db.Entry(subcategory).State = EntityState.Unchanged;
                user.Subcategories.Add(subcategory);
            }

            ...
        }
        ...
     }

我猜这是由于我没有将选定的复选框分配给我的模型。 有人可以告诉我如何在当前设置中进行操作吗？ 一个实现此目标的代码示例将受到高度欢迎。

编辑：这是我的子类别模型的样子，至少是其中的重要部分：

public class Subcategory
{
    public int SubcategoryID { get; set; }
    public string SubcategoryName { get; set; }
}

而且根据下面的答案，我的观点现在包括：

<div class="form-group">
    @Html.LabelFor(model => model.Subcategories, "Subcategory", htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.ListBoxFor(model => model.SelectedSubcategories, Model.SubcategoryList)
    </div>
</div>

我在ListBoxFor部分中再次收到NullReference错误。

Answer 1

您的SubCategories为空，因为您没有回发与SubCategories相关的值。 以下示例基于使用多选列表来选择子类别（未选中的复选框不会回发，因此使用复选框要困难得多）

首先，在视图模型中创建绑定到所选子类别的属性。 您可能还希望SelectList属性呈现要显示的初始子类别

public int[] SelectedSubCategories { get; set; }
public SelectList SubCategoryList { get; set; }

然后在视图中渲染选择

@Html.ListBoxFor(m => m.SelectedSubCategories, Model.SubCategoryList)

然后修改您的脚本

$("#CategoryID").change(function () {
  $("#SelectedSubCategories").empty();
  var url = '@Url.Action("GetSubcategories", "Account")';
  $.get(url, { id: $("#CategoryID").val() }, function(subcategories) {
    $.each(subcategories, function (i, subcategory) {
      var option = $('<option></option>');
      option.val(subcategory.id);
      option.text(subcategory.value);
      $("#SelectedSubCategories").append(option);
    });
  });
});

回发时， SelectedSubCategories的值现在包含每个选定子类别的ID

public async Task<ActionResult> RegisterBusiness(BusinessViewModel model)
{
  foreach (int ID in model.SelectedSubCategories)
  {