asp.net-mvc - HTML.CheckBox(string) 计算结果为两个 HTML 元素，而不是一个

Question

代码

<%=Html.CheckBox("SendEmail") %>

渲染时计算为两个 HTML 元素

<input id="SendEmail" name="SendEmail" type="checkbox" value="true" /> 
<input name="SendEmail" type="hidden" value="false" /> 

这是一个错误吗？还是设计使然？如果是设计使然，为什么？

Answer 1

今天早上，我在从 MVC 应用程序中的复选框组中检索选定值时遇到了一些麻烦。我将其发送给我的团队，并认为我会与其他人分享。

当回发复选框的值时，所有浏览器的标准行为是在回发中完全忽略未选中的复选框。因此，如果您有一个未选中的复选框，那么 Request.Form 中不会显示任何内容。这是一个相当著名的现象，大多数开发人员都考虑到了。

在 ASP.Net MVC 中，当您使用 Html.Checkbox 时，它会尝试解决此问题并确保为未选中的复选框回发一个值(在本例中为“false”)。这是通过添加包含值“false”的隐藏字段来完成的。

例如。

<%= Html.CheckBox("Sites", s.Selected, new { value = s.Value })%>

生成 HTML

<input id="Sites" name="Sites" type="checkbox" value="1" /><input name="Sites" type="hidden" value="false" />

这一切都很好，直到您尝试使用复选框组。这是多个具有相同名称的复选框，其中的值以单个逗号分隔的字符串形式发送回。如果您将值定义为数组(string[] Sites)，MVC 可以自动为您拆分该字符串。

查看代码如下:

<% foreach(var s in Model) { %>
              <li><%= Html.CheckBox("Sites", s.Selected, new { value = s.Value })%>
              <label><%= s.Name %></label>
              </li>
       <% } %>

适当的 Controller 操作:

[AcceptVerbs(HttpVerbs.Post)] public ActionResult Edit(int Id, string Name, string SubmissionUrl, string[] Sites)

不幸的是，由于 Html.Checkbox 也会生成此隐藏字段值，因此生成的数组不仅包含所选复选框的值，还包含每个未选中复选框的“false”。你会得到一个看起来像这样的数组:

[0] 'false'
[1] 'false'
[2] '110'
[3] '50'
[4] 'false'

其中“false”表示未选中的复选框，整数是选中的复选框的值。

如果您的复选框值只有整数并且想要将结果定义为整数数组，则这可能会导致您的代码出现问题，如下所示:

public ActionResult Edit(int Id, string Name, string SubmissionUrl, int[] Sites)

这会导致抛出异常，因为它无法将字符串值“false”转换为整数。

解决方案非常简单，只需避免 Html.Checkbox 并在 View 代码中手动创建复选框，如下所示:

   <% foreach(var s in Model) { %>
          <li><input type="checkbox" name="Sites" value="<%=s.Value%>" <% if (s.Selected) { %>checked="checked"<% } %> />
          <label><%= s.Name %></label>
          </li>
   <% } %>

希望这对其他人有帮助!