MVC 5 使用复选框删除 ViewModel 的列表元素

Question

我有一个带有列表的 ViewModel 如何使用复选框删除列表元素？我在编辑操作中生成带有 foreach 的复选框，但是如何使用 HttpPost 在 ViewModel 旁边获取复选框的值？

<dl>
     @foreach (var flower in Model.FlowerList)
     {
         <dt><input type="checkbox" id="@flower.Id" name="@flower.Id"/></dt>
         <dd>@flower.Name</dd>
     }
</dl>

使用这段代码，我只能获取视图模型的值，但不能获取复选框，因为它们不是视图模型的一部分。

[HttpPost]
[ValidateAntiForgeryToken]
public override ActionResult Edit(int id, BouquetViewModel viewModel)
{
    if (!ModelState.IsValid)
    {
        return View(viewModel);
    }
    DataService.Update(viewModel);
    return RedirectToAction("Details/" + id);
}

Answer 1

目前您为每个复选框赋予不同的name 属性，因此假设您使用flower.Id=4 和flower.Id=8 选中复选框，那么您的表单数据将包含...4=on&8=on...，这是非常没用的

一种选择是使用

@foreach (var flower in Model.FlowerList)
{
    <input type="checkbox" name="selectedflowers" value="@flower.Id" /> // id not necessary
    @flower.Name</dd>
}

然后为你的方法添加一个参数（假设 flower.Id 是 typeof int）

public override ActionResult Edit(int id, BouquetViewModel viewModel int[] SelectedFlowers)

并且参数SelectedFlowers 将包含所选Id 的集合

但是，由于您使用视图模型，更好的方法是向视图模型添加布尔属性，以便您可以将复选框绑定到它。你还没有展示你的模型，但假设它们是

public class BouquetViewModel
{
  ....
  public List<FlowerViewModel> FlowerList { get; set; }
}

public class FlowerViewModel
{
  public int ID { get; set; }
  public string Name { get; set; }
  public bool IsSelected { get; set; } // add this
}

然后在视图中（注意你必须使用for循环而不是foreach循环）

for (int i = 0, i < Model.FlowerList.Count; i++)
{
  @Html.HiddenFor(m => m.FlowerList[i].ID)
  @Html.CheckBoxFor(m => m.FlowerList[i].IsSelected)
  @Html.LabelFor(m => m.FlowerList[i].IsSelected, Model.FlowerList[i].Name)
}

然后在 POST 方法中，您可以使用访问选定的项目

IEnumerable<FlowerViewModel> selectedFlowers = viewModel.FlowerList.Where(f => f.IsSelected);

旁注：在您的 POST 方法代码中没有指明您想要对所选 ID 执行什么操作，因此有点不清楚您想要执行什么操作。

Answer 2

只有选中的选项才会发送到控制器。如果要查找未选中的选项，则需要将原始值与发布的值进行比较，然后您会找到“未选中”的选项。

如果您不想这样做，可以使用@Html.CheckBox 或@Html.CheckBoxFor。除了渲染复选框输入元素外，该方法还渲染隐藏的输入元素，以便未选中的复选框返回false。

看看： https://msdn.microsoft.com/en-us/library/system.web.mvc.html.inputextensions.checkbox(v=vs.118).aspx