2

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

我在使用引导程序定义的单选按钮访问和格式化数据时遇到问题。

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

结果是：

单选按钮

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

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

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

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

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

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

4

2 回答 2

7

实际上，您需要做的就是为每个单选按钮添加一个名称属性并将其设置为您想要的模型项。然后 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>
于 2013-11-21T21:24:32.030 回答
1

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

我没有使用，而是@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>

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

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

于 2013-11-13T22:06:24.953 回答