foreach 中的 mvc 单选按钮

Posted 2023-03-05

【中文标题】foreach 中的 mvc 单选按钮

【英文标题】：mvc radiobuttons in foreach

【发布时间】：2011-12-01 19:43:52

【问题描述】：

我正在使用 MVC，并且我在 foreach 中有一些 RadioButtons：

    foreach (var item in group) 
                    <tr>
                        <td>
                            @html.RadioButtonFor(modelItem => item.CheckerApproved, true)
                            @Html.RadioButtonFor(modelItem => item.CheckerApproved, false)
                        </td>
                    </tr>

因此对于组中的每个项目都应该有一个单选按钮来表示真假。

问题是当组中有多个项目时，您最终可能会得到两个项目：

<tr>
   <td>
      <input id="item_CheckerApproved" type="radio" value="True" name="item.CheckerApproved">
      <input id="item_CheckerApproved" type="radio" value="False" name="item.CheckerApproved 
         checked="checked">
   </td>
</tr>

<tr>
   <td>
      <input id="item_CheckerApproved" type="radio" value="True" name="item.CheckerApproved">
      <input id="item_CheckerApproved" type="radio" value="False" name="item.CheckerApproved 
         checked="checked">
   </td>
</tr>

我想要的是将radiobuttons 组分开。因此更改第一行中的值不会影响第二行中的值。但是，如果您在第一行设置了 say true，则在第二行中选择任一值，第一行中的 true 将被取消。

我相信这是因为它们是通过 name 属性链接的。但是，您实际上无法手动重置此名称属性。

有谁知道我怎样才能让它工作，以便每行的真假相互交互，但对其他行中的 radiobuttons 没有影响？

【问题讨论】：

这种解释是怎么回事：blog.hmobius.com/post/2008/08/14/…

【参考方案1】：

不要在视图中编写循环。它们很丑陋，您最终会出现问题中描述的不良行为。使用编辑器模板，如下所示：

<table>
    <thead>
        <tr>
            <th>Approved status</th>
        </tr>
    </thead>
    <tbody>
         @Html.EditorFor(x => x.Groups)
    </tbody>
</table>

这里我假设你的视图模型有一个IEnumerable<GroupViewModel> 类型的Groups 集合属性。现在剩下的就是编写相应的编辑器模板，该模板将为 Groups 集合中的每个元素执行 (~/Views/Shared/EditorTemplates/GroupViewModel.cshtml)：

@model GroupViewModel
<tr>
    <td>
        @Html.RadioButtonFor(x => x.CheckerApproved, "true") <span>Approved</span>
        @Html.RadioButtonFor(x => x.CheckerApproved, "false") <span>Not approved</span>
    </td>
</tr>

现在，您不仅不再需要在视图中编写任何丑陋的 foreach 循环，而且最终获得了正确的命名约定。

【讨论】：

好的，非常感谢它的工作方式完全符合我的要求，而且更加整洁。非常感谢您的建议

你把（~/Views/Shared/EditorTemplates/GroupViewModel.cshtml）放在哪里：？

【参考方案2】：

一种方法是使用 for 循环和 RadioButton 而不是 RadioButtonFor

@for (int i = 0; i < item.Count; i++)

    <tr>
        <td>
            @Html.RadioButton("item_CheckerApproved_" + i, true, item[i].CheckerApproved)
            @Html.RadioButton("item_CheckerApproved_" + i, false, !item[i].CheckerApproved)
        </td>
    </tr>

【讨论】：

我确实喜欢这个答案的简单性，但它只允许通过 FormCollection 而不是视图模型访问数据。然而，Darin Dimitrovs 接受的答案确实通过视图模型提供了数据。

【参考方案3】：

在foreach中使用单选按钮的一种方法

 @
    int i = 0;
    foreach(var item in group)
       
         i++;
       <tr>
       <td>
          <input id="item_CheckerApproved" type="radio" value="True" name="item.CheckerApproved_@i">
          <input id="item_CheckerApproved" type="radio" value="False" name="item.CheckerApproved_@i 
             checked="checked">
       </td>
    </tr>

    <tr>
       <td>
          <input id="item_CheckerApproved" type="radio" value="True" name="item.CheckerApproved_@i">
          <input id="item_CheckerApproved" type="radio" value="False" name="item.CheckerApproved_@i 
             checked="checked">
       </td>
    </tr>
      

    

希望对你有帮助；）