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>

结果是：

Radiobuttons

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

但是，当我提交表单时，该值不会传递给控制器。它是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>

我的结果是

Radiobuttons

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

关于此选项的一个好处是我能够将选定的值传递给控制器。提交表单后，我可以看到我的模型对象中的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>

Answer 2

我已经能够解决自己的问题，但我不得不采取不同的方法。但是我不接受这个答案，因为它没有按照预期进行切换。按钮保持选中状态，直到它失焦。

我没有使用@Html.RadioButtonFor(...)，而是使用了按钮作为我的两个无线电选项。

因为单击这些按钮时，没有采取任何操作我必须创建一个隐藏的输入字段，并且每当单击“单选按钮”时使用javascript更新其值。

总而言之，这是我的表格代码：

@Html.HiddenFor(model => model.searchType)
<div class="btn-group" data-toggle="buttons-radio">
    <button type="button" id="radiobutton1" data-toggle="button" name="search" value="Radiobutton1" class="btn btn-primary">Radiobutton1</button>
    <button type="button" id="radiobutton2" data-toggle="button" name="search" value="radiobutton2" class="btn btn-primary">Radiobutton2</button>
</div>

<script>
    var buttons= ['radiobutton1', 'radiobutton2'];
    for (var i = 0; i < btns.length; i++) {
                document.getElementById(buttons[i]).addEventListener('click', function () {
                    document.getElementByID('searchType') = this.value;
                });
            }
</script>

修改

我现在已经解决了整个问题。

我已使用此jquery代码删除了旧的Javascript：

<script type="text/javascript"> $(function () { $("#searchDiv :button").click(function () { $("#searchDiv :button").removeClass('active'); $(this).addClass('active'); $("#searchType").val($(this).attr("value")) }); }); </script>

按钮现在正确切换。并将值传递给隐藏字段。

这似乎比它需要的要复杂一点，但它一切都很好。

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

2 个答案: