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

debugcn 发表于 Dev

沙珀尔

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

选项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; }

输出：

用户名

要关联<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" }) %>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-07-4

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

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

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

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

Vue：如何将单选按钮放置在标签的中心

如何将单选按钮标签放在单行中

如何将文本放入单选按钮标签中？

如何将单选按钮值与输入字段相关联

如何将XAML单选按钮重新设置为彩色标签

如何将单选按钮更改为Bootstrap按钮

如何将eventListeners附加到动态生成的单选按钮？

如何将单选按钮添加到翻转功能

Android：如何将单选按钮的文本设置为Integer？

如何将单选按钮的值插入数据库？

如何将表单文本恰好放在单选按钮的前面

如何将单选按钮绑定到枚举的属性？

如何将单选按钮的值发布到MySQL中

如何将某个单选按钮设置为选中“ true”

如何将单选按钮放入嵌套条件中

如何将单选按钮映射到特定数字？

如何将花哨的单选按钮链接到相同的ID？

如何将单选按钮的值存储在数组中

如何将单选按钮与左侧的文本对齐？

如何将 onchange 绑定到每个单选按钮组

如何将单选按钮值绑定到模型

如何将各个按钮与各个div相关联？

使用FOR属性从与单选按钮关联的html标签获取值

如何将基于类的单选按钮组更改为基于功能的单选组

将 TextView 与单选按钮标签对齐

如何选择隐藏标签的单选按钮

如何使用硒获取单选按钮的标签？

如何获得单选按钮的父菜单标签？