MVC model binding for bootstrap button group

Question

I have bootstrap 'button' input group in my form

<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>

and now I want bind it to a existing model. how do I do it? Because technically it's just html links. Only idea I have right now is creating a hidden field and when user clicks <a> link then through JS I enter certain data into hidden field (simple radio button field).

What are your thoughts? Thanks.

update: when user clicks car, bike, or truck he changes property and then after submiting the form i would like to receive this property on the server.

Answer 1

您应该使用<a>单选按钮和<input>，而不是使用<label>链接，并将这些无线电的名称绑定到您的媒体资源。

在你的模特中，让我们说你有

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" />