asp.net-mvc-3 - ASP.NET MVC 3 不显眼的验证和单选按钮

Question

我正在尝试对单选按钮列表进行必要的验证，以强制用户选择一个选项以继续。验证确实有效，但它只在第一个单选按钮上输出元数据，并且它只用类 input-validation-error 标记第一个单选按钮。

例子:

<p>@Html.RadioButtonFor(x => x.Choices, SomeEnum.OptionOne)</p>
<p>@Html.RadioButtonFor(x => x.Choices, SomeEnum.OptionTwo)</p>

结果 HTML:

<p><input class="input-validation-error" data-val="true" data-val-required="required text" type="radio" name="Choices" value="OptionOne" /></p>
<p><input type="radio" name="Choices" value="OptionTwo" /></p>

我希望两个单选按钮都获得验证错误类，否则可能会导致用户选择的选项出现偏差。

我能做什么？

Answer 1

请注意以下代码的预期行为

@Html.RadioButtonFor(x => x.MyEnumProperty, MyEnum.OptionOne)
@Html.RadioButtonFor(x => x.MyEnumProperty, MyEnum.OptionTwo)
@Html.RadioButtonFor(x => x.MyEnumProperty, MyEnum.OptionThree)

是

<input id="MyEnumeration" type="radio" value="Option1" 
       name="MyEnumeration" 
       data-val-required="The MyEnumeration field is required." data-val="true">
<input id="MyEnumeration" type="radio" value="Option2" name="MyEnumeration">
<input id="MyEnumeration" type="radio" value="Option3" name="MyEnumeration">

为什么？因为 Html.SomethingFor(model => model.Property)旨在为一个特定属性生成一个 html 元素。您使用它从一个属性创建多个元素的方式是不正确的。

此外，查看这 3 个单选按钮的 ID。他们几乎一样，不是吗？在 html 页面上具有相同 ID 的元素是否可以接受？绝对不!因此需要修复一些东西。

虽然我认为通过开发新的 Html 扩展方法(引用 2)来解决这个问题更容易，但我尝试用另一种方式解决它(因为我太固执了!)。

首先，我们需要更改 Razor 代码:

<div>
    @Html.RadioButtonFor(m => m.MyEnumeration, MyEnum.Option1, new { id = "m1" })
    <label for="m1">
        OPTION 1</label>
    @Html.RadioButtonFor(m => m.MyEnumeration, MyEnum.Option2, new { id = "m2" })
    <label for="m2">
        OPTION 2</label>
    @Html.RadioButtonFor(m => m.MyEnumeration, MyEnum.Option3, new { id = "m3" })
    <label for="m3">
        OPTION 3</label>
</div>

然后，用一段 JavaScript/jQuery 魔法来解决我们的问题:

<script type="text/javascript">
    $(function () {
        $('[name=MyEnumeration]').each(function (index) { domAttrModified(this); });
    });

    function domAttrModified(obj) {
        //$obj = $(obj);
        $(obj).bind('DOMAttrModified', function () {
            if ($(obj).attr('class').indexOf('input-validation-error') != -1)
                $(obj).parent().addClass('input-validation-error');
            else
                $(obj).parent().removeClass('input-validation-error');
        });
    }
</script>

任何时候第一个单选按钮引发验证错误，此 JavaScript 代码都会将错误 css 类 ( input-validation-error ) 应用于单选按钮的父元素，即 <div>元素。

并且无论何时验证错误消失(通过单击任何单选按钮元素)，错误样式都会从父元素中删除。

它在 IE 和 FF 中运行良好，但不幸的是在 Chrome 中不起作用。原因是 Chrome 不支持 DOMAttrModified事件。我们可以使用以下解决方案修复它: https://stackoverflow.com/a/10466236/538387 ，但也许以后。

同样，我相信我们需要开发一个 HTML 扩展方法或改进和使用像这样的 EditorTemplate: https://gist.github.com/973482

引用:

https://stackoverflow.com/a/7098541/538387

https://stackoverflow.com/a/3448675/538387

https://gist.github.com/973482

Event detect when css property changed using Jquery