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调用，它只是用复选框项填充我的子类字段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)
  {

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

1 个答案: