MVC 5删除ViewModel's列表元素与复选框

本文关键字：列表元素 复选框 删除 ViewModel MVC | 更新日期: 2023-09-27 18:03:43

我有一个带有列表的ViewModel，我如何使用复选框删除列表元素?我在编辑动作生成一个foreach复选框，但我怎么能得到复选框的值旁边的ViewModel与HttpPost?

<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);
}

MVC 5删除ViewModel's列表元素与复选框

目前你给每个复选框不同的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是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做什么，所以你想要做什么有点不清楚。

只有选中的选项才会被发送到控制器。如果你想找到未选中的选项，你需要将原始值与发布的值进行比较，然后你会找到"未选中"的选项。

如果你不想这样做，你可以使用@Html.CheckBox或@Html.CheckBoxFor。除了呈现复选框输入元素之外，此方法还呈现一个隐藏的输入元素，以便未选中的复选框将返回false。

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

相关文章：