将 Html.RadioButtonFor 和 Html.LabelFor 用于相同的模型但不同的值

Question

我有这个 Razor 模板

<table>
<tr>
    <td>@Html.RadioButtonFor(i => i.Value, "1")</td>
    <td>@Html.LabelFor(i => i.Value, "true")</td>
</tr>
<tr>
    <td>@Html.RadioButtonFor(i => i.Value, "0")</td>
    <td>@Html.LabelFor(i => i.Value, "false")</td>
</tr>
</table>

这给了我这个 HTML

<table>
<tr>
    <td><input id="Items_1__Value" name="Items[1].Value" type="radio" value="1" /></td>
    <td><label for="Items_1__Value">true</label></td>
</tr>
<tr>
    <td><input checked="checked" id="Items_1__Value" name="Items[1].Value" type="radio" value="0" /></td>
    <td><label for="Items_1__Value">false</label></td>
</tr>
</table>

所以我有两次 ID Items_1__Value，这当然是不好的，并且在我点击第二个标签“false”时无法在浏览器中工作，第一个收音机将被激活。

我知道我可以在 RadioButtonFor 添加一个自己的 Id 并用我的标签引用它，但这不是很好，是吗？特别是因为我处于一个循环中并且不能只使用名​​称“值”和一个附加数字，这最终也会在我的最终 HTML 标记中出现多个 Dom Id。

不应该是一个好的解决方案吗？

Answer 1

不要为此过度设计解决方案。您想要完成的只是让单选按钮响应对文本的点击。保持简单，只需将单选按钮包装在标签标签中：

<table>
<tr>
    <td><label>@Html.RadioButtonFor(i => i.Value, "1")True</label></td>
</tr>
<tr>
    <td><label>@Html.RadioButtonFor(i => i.Value, "0")False</label></td>
</tr>
</table>

LabelFor html 帮助器通常用于从视图模型的 Display 属性中引入 Name（例如“[Display(Name = "Enter your Name")]）。

对于单选按钮，名称并不是特别有用，因为每个单选按钮都有不同的文本行，这意味着无论如何您都无法将文本硬编码到视图中。

Answer 2

我一直想知道 MVC 如何确定“嵌套”字段名称和 ID。对 MVC 源代码进行了一些研究才弄清楚，但我想我有一个很好的解决方案。

EditorTemplates 和 DisplayTemplates 如何确定字段名称和 ID

随着 EditorTemplates 和 DisplayTemplates 的引入，MVC 框架添加了ViewData.TemplateInfo，其中包含当前的“字段前缀”，例如"Items[1]."。嵌套模板使用它来创建唯一的名称和 ID。

创建我们自己的唯一 ID：

TemplateInfo 类包含一个有趣的方法，GetFullHtmlFieldId。我们可以使用它来创建我们自己的唯一 ID，如下所示：

@{string id = ViewData.TemplateInfo.GetFullHtmlFieldId("fieldName");}
@* This will result in something like "Items_1__fieldName" *@

为了胜利

以下是为您的示例实现正确行为的方法：

<table>
<tr>
    @{string id = ViewData.TemplateInfo.GetFullHtmlFieldId("radioTrue");}
    <td>@Html.RadioButtonFor(i => i.Value, "1", new{id})</td>
    <td>@Html.LabelFor(i => i.Value, "true", new{@for=id})</td>
</tr>
<tr>
    @{id = ViewData.TemplateInfo.GetFullHtmlFieldId("radioFalse");}
    <td>@Html.RadioButtonFor(i => i.Value, "0", new{id})</td>
    <td>@Html.LabelFor(i => i.Value, "false", new{@for=id})</td>
</tr>
</table>

这将为您提供以下 HTML：

<table>
<tr>
    <td><input id="Items_1__radioTrue" name="Items[1].Value" type="radio" value="1" /></td>
    <td><label for="Items_1__radioTrue">true</label></td>
</tr>
<tr>
    <td><input checked="checked" id="Items_1__radioFalse" name="Items[1].Value" type="radio" value="0" /></td>
    <td><label for="Items_1__radioFalse">false</label></td>
</tr>
</table>

免责声明

我的 Razor 语法不完善，所以如果这段代码有语法错误，请告诉我。

物有所值

很遗憾，RadioButtonFor 没有内置此功能。所有呈现的单选按钮都应该有一个 ID 是其name 和 value 的组合，这似乎是合乎逻辑的，但事实并非如此——可能是因为这与所有其他 Html 帮助程序不同。
为此功能创建自己的扩展方法似乎也是一个合乎逻辑的选择。但是，使用“表达式语法”可能会变得棘手......所以我建议重载.RadioButton(name, value, ...) 而不是RadioButtonFor(expression, ...)。您可能还希望 .Label(name, value) 重载。
我希望这一切都说得通，因为那段中有很多“填空”。

Answer 3

@Scott Rippey 几乎拥有它，但我想他必须使用不同版本的 MVC3，因为对我来说 @Html.LabelFor 没有需要 3 个参数的重载。我发现使用普通的@Html.Label 效果很好：

@{string id = ViewData.TemplateInfo.GetFullHtmlFieldId("radioButton_True");}
@Html.Label(id, "True:")
@Html.RadioButtonFor(m => m.radioButton, true, new { id })

@{id = ViewData.TemplateInfo.GetFullHtmlFieldId("radioButton_False");}
@Html.Label(id, "False:")
@Html.RadioButtonFor(m => m.radioButton, false, new { id })

这允许您单击标签并按预期选择相关的单选按钮。

Answer 4

虽然不完美，但可以工作，

<table>
<tr>
    <td>@ReplaceName(Html.RadioButtonFor(i => i.Value, "1"))</td>
    <td>@Html.LabelFor(i => i.Value[0], "true")</td>
</tr>
<tr>
    <td>@ReplaceName(Html.RadioButtonFor(i => i.Value, "0"))</td>
    <td>@Html.LabelFor(i => i.Value[1], "false")</td>
</tr>
</table>


@functions {
    int counter = 0;
    MvcHtmlString ReplaceName(MvcHtmlString html){
        return MvcHtmlString.Create(html.ToString().Replace("__Value", "__Value_" + counter++ +"_"));
    }
}

Answer 5

这是一个您可以使用的 HtmlHelper，尽管您可以自定义它。只是勉强测试，所以 YMMV。

     public static MvcHtmlString RadioButtonWithLabelFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression, object value, object htmlAttributes = null)
     {
        var name = ExpressionHelper.GetExpressionText(expression);
        var id = helper.ViewData.TemplateInfo.GetFullHtmlFieldId(name + "_" + value);

        var viewData = new ViewDataDictionary(helper.ViewData) {{"id", id}};

        if (htmlAttributes != null)
        {
            var viewDataDictionary = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
            foreach (var keyValuePair in viewDataDictionary)
            {
                viewData[keyValuePair.Key] = keyValuePair.Value;
            }
        }

        var radioButton = helper.RadioButtonFor(expression, value, viewData);

        var tagBuilder = new TagBuilder("label");
        tagBuilder.MergeAttribute("for", id);
        tagBuilder.InnerHtml = value.ToString();

        return new MvcHtmlString(radioButton.ToHtmlString() + tagBuilder.ToString());
    }

Answer 6

您可以添加带有标签的文本

<td>@Html.RadioButtonFor(i => i.Value, true) <text>True</text></td>
<td>@Html.RadioButtonFor(i => i.Value, false) <text>False</text></td>

Answer 7

显然有一个很好的解决方案

    <td>@Html.RadioButtonFor(i => i.Value, true)</td>
    <td>@Html.RadioButtonFor(i => i.Value, false)</td>