引导按钮组的 MVC 模型绑定

Question

我的表单中有引导“按钮”输入组

<div class="btn-group type-select pull-left top-buffer add-on" id="typeOrderSelect">
    <a class="btn btn-primary popover-default" data-content="Car" href="#">
        <i class="fa fa-car fa-lg"></i>
    </a>
    <a class="btn btn-primary popover-default" data-content="Bike" href="#">
        <i class="fa fa-motorcycle fa-lg"></i>
    </a>
    <a class="btn btn-primary popover-default" data-content="Truck" href="#">
        <i class="fa fa-truck fa-lg"></i>
    </a>
</div>

现在我想将它绑定到现有模型。我该怎么做？因为从技术上讲，它只是 html 链接。我现在唯一的想法是创建一个隐藏字段，当用户单击 <a> 链接然后通过 JS 我将某些数据输入到隐藏字段（简单的单选按钮字段）中。

你的想法是什么？谢谢。

更新： 当用户点击汽车、自行车或卡车时，他会更改属性，然后在提交表单后，我希望在服务器上接收此属性。

Answer 1

您应该使用<input> 单选按钮和<label>s 并将这些单选的名称绑定到您的属性，而不是使用<a> 链接。

在你的模型中，假设你有

public string Selection { get; set; }

那么你的观点应该是

<div class="btn-group type-select pull-left top-buffer add-on" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="radio" name="Selection" value="Car">
        <i class="fa fa-car fa-lg"></i>
    </label>
    <label class="btn btn-primary">
         <input type="radio" name="Selection" value="Bike">
         <i class="fa fa-motorcycle fa-lg"></i>
    </label>
    <label class="btn btn-primary">
          <input type="radio" name="Selection" value="Truck">
          <i class="fa fa-truck fa-lg"></i>
    </label>
</div>

这会重现以下内容：（已检查自行车）

当您提交表单时，您的 Selection 属性将为 "Bike"

Answer 2

好的，我已经更改了答案，因为我首先误解了问题。

一般你有两种选择：

1. JavaSctipt 就像你建议的那样，它是简单的解决方案，如果你已经在页面上使用了 JS 就可以了。

2. 使用 CSS 的风格化单选按钮。您可以仅使用 CSS 而无需 JS 来更改“收音机”的视觉外观。这是更多的兼容性解决方案。 有很多例子如何做到这一点 - 这是其中之一： CSS Styling Radio Button and Checkboxes.

当然单选按钮会自动绑定到Model，只要设置正确的id（每个输入不同）和name（每个输入都一样），例如：

 <input type="radio" id="radio1" name="content" value="Car" />
 <input type="radio" id="radio2" name="content" value="Bike" />
 <input type="radio" id="radio3" name="content" value="Truck" />