如何獲取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)
  {