ASP.NET MVC4 Twitter Bootstrap Radio Button Issues

Question

I am currently using Bootstrap V3 and 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":

       <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":

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

---

And for those wondering, this is what my model looks like. It has a spot for searchType and 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-toggle property being set to either Buttons or Buttons-Radio.

Solution 1

Actually all you need to do is add a name attribute 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:

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

Solution 2

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.

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.

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:

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

Comments

[programad]

WOW! This solution is sooooo simple and elegant!