通过 MVC 模型变量在 RadioButton 上添加新属性

Question

我有 MVC 类，其中一个变量已声明为：

[UIHint("YesNoRadio")]
[Required(ErrorMessage = "test")]
public bool? Emergency { get; set; }

这会将 HTML 创建为

<div class="radio-inline"><label>
<input data-val="true" data-val-required="Test" id="Emergency" name="Emergency" type="radio" value="true">Yes</label>
</div>
<div class="radio-inline"><label>
<input id="Emergency" name="Emergency" type="radio" value="false">No</label>
</div>

我想要的是添加新属性，比如说 div-effect = "emergencyExplain" 和单选按钮来作为

<label><input id="Emergency" name="Emergency" type="radio" value="false" div-effect = "emergencyExplain">No</label>

YesNoRadio.cshtml 如下：

@model bool?    
<div class="radio-inline">
    <label>
        @if (Model.HasValue && Model.Value)
        {
            @Html.RadioButtonFor(x => x, "true", new { @checked = "checked" });
        }
        else
        {
            @Html.RadioButtonFor(x => x, "true");
        }
        Yes
    </label>
</div>
<div class="radio-inline">
    <label>
        @if (Model.HasValue && !Model.Value)
        {
            @Html.RadioButtonFor(x => x, "false", new { @checked = "checked" });
        }
        else
        {
            @Html.RadioButtonFor(x => x, "false");
        }
        No
    </label>
</div>

它被称为：

@Html.EditorFor(m => m.Emergency, new { htmlAttributes = new { @class = "form-control" } })

MVC 表单创建的新手，因此任何有助于指出正确方向的帮助将不胜感激。

谢谢

Answer 1

使用[UIHint] 属性只是指示EditorFor() 方法使用该模板。除了 modell 属性，它不会将任何其他数据传递给模板。您需要使用 EditorFor() 的 this overload 来传递模板的名称和代表 additionalViewData 的对象。

您没有显示包含要添加到 data-effect 属性的值的模型属性，但假设它

public string Effect { get; set; }

并且在将模型传递给视图之前在 GET 方法中设置它的值，然后从 Emergency 属性中删除 [UIHint] 属性并将主视图修改为

@Html.EditorFor(m => m.Emergency, "YesNoRadio", new { effect = Model.Effect })

然后将YesNoRadio.cshtml模板改为

<div class="radio-inline">
    <label>
        @Html.RadioButtonFor(x => x, true, new { id = "", div_effect = ViewData["effect"] })
        <span>Yes</span>
    </label>
    <label>
        @Html.RadioButtonFor(x => x, false, new { id = "", div_effect = ViewData["effect"] })
        <span>No</span>
    </label>
</div>

哪个会生成

<input data-val="true" data-val-required="Test" div-effect="emergencyExplain" name="Emergency" type="radio" value="True">

关于当前视图代码的一些注意事项。

1. 使用new { htmlAttributes = new { @class = "form-control" } } 使用自定义 EditorTemplate 时不会做任何事情 - 它唯一 适用于使用内置模板（它怎么知道哪个 将该类应用到的元素）。如果你想应用类名 到单选按钮，将其添加到 RadioButtonFor() 方法中 模板
2. 您不需要（也不应该）设置checked 属性。 该属性由RadiobuttonFor() 方法设置，基于 属性值（如果是null，则不会选择任何按钮， 如果它的true 或false 则相应的按钮将是 已选择
3. 还要注意new { id = "" } 的使用，它会删除id 否则会生成重复项的属性 无效的html