使用Html.RadioButtonFor和Html.LabelFor为同一型号但不同的价值观 [英] Use Html.RadioButtonFor and Html.LabelFor for the same Model but different values

问题描述

我有这种剃刀模板

<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 两次是电台将被激活。

So I have the ID Items_1__Value twice which is - of course - not good and does not work in a browser when I click on the second label "false" the first radio will be activated.

我知道我可以在RadioButtonFor我的标签添加自己的ID，并参阅，但这不是pretty好，是吗？尤其是因为我在一个循环，不能只使用名​​称价值与添加的数量，这将是结束在多个大教堂IDS在我最后的HTML标记为好。

I know I could add an own Id at RadioButtonFor and refer to that with my label, but that's not pretty good, is it? Especially because I'm in a loop and cannot just use the name "value" with an added number, that would be end up in multiple Dom Ids in my final HTML markup as well.

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

Shouldn't be a good solution for this?

推荐答案

我一直在想M​​VC如何确定嵌套字段名和ID。它采取了一些研究到MVC源$ C ​​$ C搞清楚，但我觉得我对你有一个很好的解决方案。

I've been wondering how MVC determines "nested" field names and IDs. It took a bit of research into the MVC source code to figure out, but I think I have a good solution for you.

随着引进EditorTemplates和DisplayTemplates的，MVC框架中加入 ViewData.TemplateInfo 包含，除其他事项外，目前的场preFIX，如项目[1]。。嵌套模板使用它来创建独特的名称和ID。

With the introduction of EditorTemplates and DisplayTemplates, the MVC framework added ViewData.TemplateInfo that contains, among other things, the current "field prefix", such as "Items[1].". Nested templates use this to create unique names and IDs.

TemplateInfo 类包含一个有趣的方法，<一个href=\"http://msdn.microsoft.com/en-us/library/system.web.mvc.templateinfo.getfullhtmlfieldid.aspx\"><$c$c>GetFullHtmlFieldId.我们可以用它来创造我们自己的唯一的ID，像这样：

The TemplateInfo class contains an interesting method, GetFullHtmlFieldId. We can use this to create our own unique IDs like so:

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

为胜

下面是如何实现你的榜样，正确的行为：

For The Win

Here's how to achieve the correct behavior for your example:

<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：

Which will give you the following 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>

免责声明

我的剃刀语法是不发达的，所以请让我知道这code的语法错误。

Disclaimer

My Razor syntax is underdeveloped, so please let me know if this code has syntax errors.

这是pretty不幸的是，这个功能不是内置在 RadioButtonFor 。这似乎是合乎逻辑，所有的渲染单选按钮应该有一个ID是它的名称的组合和值，但是这不是这样的 - 也许是因为这将是所有其他HTML辅助不同的结果。
创建此功能你自己的扩展方法似乎是一个合乎逻辑的选择，太多。但是，它可能变得棘手使用EX pression语法......所以我建议超载 .RadioButton（名称，值...）而不是 RadioButtonFor的（如pression，...）。你可能想为 .Label（名称，值）太超载。结果
我希望所有是有道理的，因为有该段很多填补空白。

It's pretty unfortunate that this functionality isn't built-in to RadioButtonFor. It seems logical that all rendered Radio Buttons should have an ID that is a combination of its name AND value, but that's not the case -- maybe because that would be different from all other Html helpers.
Creating your own extension methods for this functionality seems like a logical choice, too. However, it might get tricky using the "expression syntax" ... so I'd recommend overloading .RadioButton(name, value, ...) instead of RadioButtonFor(expression, ...). And you might want an overload for .Label(name, value) too.
I hope that all made sense, because there's a lot of "fill in the blanks" in that paragraph.

这篇关于使用Html.RadioButtonFor和Html.LabelFor为同一型号但不同的价值观的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！