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

ASP.NET MVC4 Twitter Bootstrap Radio Button Issues

提问by Johnrad

I am currently using Bootstrap V3 and MVC4.

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

I am having issues accessing and formatting data using bootstrap defined radio buttons.

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

When I declare my radio buttons using the following - Specifically data-toggle="buttons":

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

The result is:

结果是：

Everything looks perfect. When I select a button, it gets pressed until I select the other.

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

However, when I submit the form, the value is not passed through to the controller. It is null. I have a strongly typed view that gets values from a textbox and the radio buttons on the page.

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

---

---

When I define my radio buttons using the following - Specifically data-toggle="buttons-radio":

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

My result is

我的结果是

This is not how I want my buttons. The little circles are visible. Not to mention, once I select one of the buttons there is no turning back. I am forced to keep that one, I cannot select the other option.

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

The one good thing about this option is that I am able to pass in the value that is selected to the controller. When the form is submitted, I am able to see that the value of searchType in my model object is either Radiobutton1 or Radiobutton2.

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

---

---

And for those wondering, this is what my model looks like. It has a spot for searchType and searchString.

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

public class SearchForm
{

    public string searchString{ get; set; }

    public string searchType { get; set; }
}

---

---

What I am asking is how do I combine the 2 results?

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

One looks perfect but doesn't pass data, the other looks bad and passes in the date.

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

I have narrowed it down to the data-toggleproperty being set to either Buttonsor Buttons-Radio.

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

回答by Gerry

Actually all you need to do is add a nameattribute to each radio button and set it to the model item you want. Then asp.net MVC does its voodoo magic and connects the bits together. In your case something like the code below should work:

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

回答by Johnrad

I have been able to resolve my own issue however I had to take a different approach. However I will not accept this answer as it does not toggle as it is supposed to. The button stays selected until it is out of focus.

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

Instead of using @Html.RadioButtonFor(...)I went back and I used buttons as my two radio options.

@Html.RadioButtonFor(...)我没有使用，而是使用按钮作为我的两个收音机选项。

Since when those buttons are clicked, there is no action being taken I had to create a hidden input field, and use javascript to update its value whenever a "radio button" was clicked.

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

All in all here was my form code:

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

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

---

---

EDIT:

编辑：

I have solved the entire issue now.

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

I have removed my old Javascript with this jquery code:

我已经用这个 jquery 代码删除了我的旧 Javascript：

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

            $("#searchType").val($(this).attr("value"))
        });
    });
</script>

Buttons now toggle correctly. And the value is passed to the hidden field.

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

This seems to be a little more complicated than it needed to be, but its all good.

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