如何获取 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 调用，它只是用复选框项填充我的 subcats 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;
});

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

    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)
  {