Question

我正在使用Html.RadioButtonFor，想知道使用它的最佳做法是什么。例如，以下是两种方法，其中Option-1给出了我想要的结果。我只是在我的模型中声明DeliveryFeeType并使用Label覆盖。

选项 - 1：

.ASPX

<div id="delivery-fee-config" >
    <div>
        <%= Html.LabelFor(m => m.DeliveryFeeType) %>
    </div>
    <div>
        <%= Html.RadioButtonFor(m => m.DeliveryFeeType, "All") %>
        <%= Html.Label("All") %>
    </div>
    <div>
        <%= Html.RadioButtonFor(m => m.DeliveryFeeType, "Flat Fee") %>
        <%= Html.Label("Flat Fee") %>
    </div>
     <div>
        <%= Html.LabelFor(m => m.FlatFeeAmount) %>
        <%= Html.TextBoxFor(m => m.FlatFeeAmount, new {maxlength="5"}) %>
    </div>
</div>

型号：

[DisplayName("Select Delivery Fee Type")]
public string DeliveryFeeType { get; set; }

输出：

现在，我想在LabelFor中使用model来声明属性。我不喜欢的是，All和FlatFee在我调试时总是假的。看起来我只是用它们在UI上显示标签。我可以根据true选项制作false或radio button吗？如果是，我该怎么做？

选项 - 2：

.ASPX

<div id="delivery-fee-config" >
    <div>
        <%= Html.LabelFor(m => m.DeliveryFeeType) %>
    </div>
    <div>
        <%= Html.RadioButtonFor(m => m.DeliveryFeeType, "All") %>
        <%= Html.LabelFor(m => m.All) %>
    </div>
    <div>
        <%= Html.RadioButtonFor(m => m.DeliveryFeeType, "Flat Fee") %>
        <%= Html.LabelFor(m => m.FlatFee) %>
    </div>
    <div>
        <%= Html.LabelFor(m => m.FlatFeeAmount) %>
        <%= Html.TextBoxFor(m => m.FlatFeeAmount, new {maxlength="5"}) %>
    </div>
</div>

型号：

[DisplayName("Select Delivery Fee Type")]
public string DeliveryFeeType { get; set; }

[DisplayName("All")]
public bool All { get; set; }

[DisplayName("Flat Fee")]
public bool FlatFee { get; set; }

输出：

Answer 1

要关联<label>元素，您可以将表单控件包装在<label>中，也可以使用for属性将其与控件的id属性相关联

RadioButtonFor()方法的问题在于它会生成重复的id属性，这些属性是无效的html，因此您应该将其删除（如果包含在<label>中）或明确设置它

选项1

<label>
    <%= Html.RadioButtonFor(m => m.DeliveryFeeType, "All", new { id = "" }) %>
    <span>All</span>
</label>
<label>
    <%= Html.RadioButtonFor(m => m.DeliveryFeeType, "Flat Fee", new { id = "" }) %>
    <span>Flat Fee</span>
</label>

选项2

<%= Html.RadioButtonFor(m => m.DeliveryFeeType, "All", new { id = "all" }) %>
<%= Html.Label("All", new { @for = "all" }) %>
<%= Html.RadioButtonFor(m => m.DeliveryFeeType, "All", new { id = "flatfee" }) %>
<%= Html.Label("Flat Fee", new { @for = "flatfee" }) %>

Answer 2

你需要做这样的事情：

<fieldset>
    <legend>@Html.DisplayNameFor( m => m.Foo )</legend>

    <label>@Html.RadioButtonFor( m => m.Foo, "Value1" ) Value One</label>
    <label>@Html.RadioButtonFor( m => m.Foo, "Value2" ) Value Two</label>
    <label>@Html.RadioButtonFor( m => m.Foo, "Value3" ) Value Three</label>
</fieldset>

或者这个：

<fieldset>
    <legend>@Html.DisplayNameFor( m => m.Foo )</legend>

    <label for="radio1">Value One</label>
    @html.RadioButtonFor( m => m.Foo, "Value1", new { id="radio1" } )

    <label for="radio2">Value Two</label>
    @html.RadioButtonFor( m => m.Foo, "Value2", new { id="radio2" } )

    <label for="radio3">Value Three</label>
    @html.RadioButtonFor( m => m.Foo, "Value3", new { id="radio3" } )

</fieldset>

这是因为单个ViewModel属性对应于值的持有者，而不是单个属性值本身 - 记住在HTML单选按钮中为同一表单提供多个 <input />元素键/值对（而复选框为每个键/值对提供一个输入）。

另一个问题是MVC生成的id=""属性值不正确：它会生成重复项，因为它完全基于属性名称，因此您需要覆盖{{1手动属性（所以实际上我给出的第一个例子会因为重复的id=""属性值而给你无效的HTML标记）。

如何将标签与单选按钮相关联？

2 个答案: