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

结果是:

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

但是，当我提交表单时，值没有传递给 Controller ​​。它是空的。我有一个强类型 View ，它从页面上的文本框和单选按钮获取值。

---

当我使用以下定义我的单选按钮时 - 特别是 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>

我的结果是

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

这个选项的一个好处是我能够将选择的值传递给 Controller ​​。提交表单后，我可以看到模型对象中 searchType 的值是 Radiobutton1 或 Radiobutton2。

---

对于那些想知道的人，这就是我的模型的样子。它有一个用于 searchType 和 searchString 的位置。

public class SearchForm
{

    public string searchString{ get; set; }

    public string searchType { get; set; }
}

---

我想问的是如何合并这两个结果？

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

我已将其缩小到将 data-toggle 属性设置为 Buttons 或 Buttons-Radio。

Answer 1

实际上您需要做的就是为每个单选按钮添加一个name 属性并将其设置为您想要的模型项。然后 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>