templates - CheckBoxList 多选 : how to model bind back and get all selections?

Question

这段代码:

Html.CheckBoxList(ViewData.TemplateInfo.HtmlFieldPrefix, myList)

产生这个标记:

<ul><li><input name="Header.h_dist_cd" type="checkbox" value="BD" />
        <span>BD - Dist BD Name</span></li>
    <li><input name="Header.h_dist_cd" type="checkbox" value="SS" />
        <span>SS - Dist SS Name</span></li>
    <li><input name="Header.h_dist_cd" type="checkbox" value="DS" />
        <span>DS - Dist DS Name</span></li>
    <li><input name="Header.h_dist_cd" type="checkbox" value="SW" />
        <span>SW - Dist SW Name </span></li>
</ul>

您可以检查多个选择。返回字符串参数 Header.h_dist_cd 仅包含所选的第一个值。我需要做什么才能获得其他选中的值？

post 方法参数如下所示:

public ActionResult Edit(Header header)

Answer 1

我假设 Html.CheckBoxList 是您的扩展并且是您生成的标记。

根据您展示的内容，需要检查两件事:

1. 模型绑定(bind)器将寻找一个名为 Header 的对象，该对象具有要绑定(bind)的字符串属性 h_dist_cd。您的操作方法看起来 Header 是 Root View 模型，而不是模型的子对象。
2. 我不知道您如何处理清除复选框的情况。通常的技巧是渲染一个同名的隐藏字段。

也是个问题，但您想使用“label for =”...”，这样他们就可以单击文本来选中/取消选中并实现可访问性。

我发现使用扩展来解决这个问题很容易出错。您可能需要考虑使用 subview 模型。更适合MVC2的EditorFor模板系统。

这是我们系统的一个例子...

在 View 模型中，嵌入一个可重用的子模型...

[AtLeastOneRequired(ErrorMessage = "(required)")]
public MultiSelectModel Cofamilies { get; set; }

您可以使用标准的 SelectListItem 列表对其进行初始化...

MyViewModel(...)
{
  List<SelectListItem> initialSelections = ...from controller or domain layer...;
  Cofamilies = new MultiSelectModel(initialSelections);
  ...

MultiSelectModel 子模型。注意 Value 上的 setter 覆盖...

public class MultiSelectModel : ICountable
{
  public MultiSelectModel(IEnumerable<SelectListItem> items)
  {
    Items = new List<SelectListItem>(items);
    _value = new List<string>(Items.Count);
  } 

  public int Count { get { return Items.Count(x => x.Selected); } } 
  public List<SelectListItem> Items { get; private set; }

  private void _Select()
  {
    for (int i = 0; i < Items.Count; i++)
      Items[i].Selected = Value[i] != "false";
  }

  public List<SelectListItem> SelectedItems
  {
    get { return Items.Where(x => x.Selected).ToList(); }
  } 

  private void _SetSelectedValues(IEnumerable<string> values)
  {
    foreach (var item in Items)
    {
      var tmp = item;
      item.Selected = values.Any(x => x == tmp.Value);
    }
  } 

  public List<string> SelectedValues
  {
    get { return SelectedItems.Select(x => x.Value).ToList(); }
    set { _SetSelectedValues(value); }
  } 

  public List<string> Value
  {
    get { return _value; }
    set { _value = value; _Select(); }
  }
  private List<string> _value; 
}

现在您可以将编辑器模板放在 Views/Shared/MultiSelectModel.ascx...

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<WebUI.Cofamilies.Models.Shared.MultiSelectModel>" %>

<div class="set">

<%=Html.LabelFor(model => model)%>

<ul>
  <% for (int i = 0; i < Model.Items.Count; i++)
  {
    var item = Model.Items[i];
    string name = ViewData.ModelMetadata.PropertyName + ".Value[" + i + "]";
    string id = ViewData.ModelMetadata.PropertyName + "_Value[" + i + "]";
    string selected = item.Selected ? "checked=\"checked\"" : "";
  %>
  <li>
    <input type="checkbox" name="<%= name %>" id="<%= id %>" <%= selected %> value="true" />
    <label for="<%= id %>"><%= item.Text %></label>
    <input type="hidden" name="<%= name %>" value="false" />
  </li>
  <% } %>
</ul>
<%= Html.ValidationMessageFor(model => model) %>

这种方法的两个优点:

1. 您不必将项目列表与选择值分开处理。您可以将属性放在单个属性上(例如，AtLeastOneRequired 是我们系统中的自定义属性)

2. 您将模型和 View (编辑器模板)分开。例如，我们有复选框的水平和垂直布局。您还可以将“多选”呈现为带有前后按钮、多选列表框等的两个列表框。