ASP.NET MVC4 Twitter Bootstrap单选按钮问题

Question

我目前正在使用Bootstrap V3和MVC4.

我使用bootstrap定义的单选按钮访问和格式化数据时遇到问题.

当我使用以下内容声明我的单选按钮时 - 具体来说data-toggle="buttons":

       <div class="btn-group" data-toggle="buttons" style="padding-bottom:10px">
    <label class="btn btn-primary">
        @Html.RadioButtonFor(model => model.searchType, "radiobutton1") RadioButton 1
    </label>


    <label class="btn btn-primary">
        @Html.RadioButtonFor(model => model.searchType, "radiobutton2") RadioButton2
    </label>
 </div>

结果是:

一切看起来都很完美.当我选择一个按钮时,它会被按下直到我选择另一个按钮.

但是,当我提交表单时,该值不会传递给控制器​​.它是null.我有一个强类型视图,从文本框和页面上的单选按钮获取值.

---

当我使用以下内容定义单选按钮时 - 具体来说data-toggle="buttons-radio":

    <div class="btn-group" data-toggle="buttons-radio" style="padding-bottom:10px">

        <label class="btn btn-primary">
            @Html.RadioButtonFor(model => model.searchType, "radiobutton1") RadioButton 1
        </label>


        <label class="btn btn-primary">
            @Html.RadioButtonFor(model => model.searchType, "radiobutton2") RadioButton2
        </label>
</div>

我的结果是

这不是我想要的按钮.小圆圈是可见的.更不用说,一旦我选择其中一个按钮,就没有回头路了.我被迫保留那个,我不能选择其他选项.

关于这个选项的一个好处是我能够将选择的值传递给控制器​​.提交表单后,我可以看到我的模型对象中的searchType值是Radiobutton1或Radiobutton2.

---

对于那些想知道的人来说,这就是我的模型.它有一个searchType和searchString的位置.

public class SearchForm
{

    public string searchString{ get; set; }

    public string searchType { get; set; }
}

---

我要问的是如何结合2个结果？

一个看起来很完美,但没有传递数据,另一个看起来很糟糕并传递了日期.

我已经把范围缩小到data-toggle属性被设置为Buttons或Buttons-Radio.

Answer 1

实际上,您需要做的就是为每个单选按钮添加一个名称属性,并将其设置为您想要的模型项.然后asp.net MVC完成它的伏都教魔术并将这些位连接在一起.在您的情况下,类似下面的代码应该工作:

<div class="btn-group" data-toggle="buttons" style="padding-bottom:10px">
    <label class="btn btn-primary">
        @Html.RadioButtonFor(model => model.searchType, "radiobutton1", new {name="searchType"}) RadioButton 1
    </label>

    <label class="btn btn-primary">
        @Html.RadioButtonFor(model => model.searchType, "radiobutton2", new {name="searchType"}) RadioButton2
    </label>
</div>