Question

I have a few radio buttons

    <p>@Html.RadioButton("selected", "img")img
    @Html.RadioButton("selected", "input")input
    @Html.RadioButton("selected", "script")script
    @Html.RadioButton("selected", "link")link
    @Html.RadioButton("selected", "form")form</p>

and I want to use twitter bootstrap’s btn-group, buttons-radio as a style as a replacement for these radio buttons, the code i attempted to add was

    <div class="btn-group" data-toggle="buttons-radio">
    <button type="button" class="btn" name="selected" value="a">a</button>
    <button type="button" class="btn" name="selected" value="img">img</button>
    <button type="button" class="btn" name="selected" value="input">input</button>
    <button type="button" class="btn" name="selected" value="script">script</button>
    <button type="button" class="btn" name="selected" value="link">link</button>
    <button type="button" class="btn"  name="selected" value="form">form</button>
    </div>

in my controller i’m using the I’m using the FormCollection as a way of getting the value from the checked radiobutton, but i would like to use the bootstrap css instead of having the plain @Html.radiobutton.

            string selectedTechnology = form["selected"];
            List.UrlType = selectedTechnology;

I have a feeling that this is not the correct way to do it, since the helper probably works with the formcollection and it has no idea what the bootstrap css buttons are but if there is a way to implement it, that’d be great.

UPDATE:

So… here is the solution I was looking for

radio buttons using bootstrap css

<div id="radios" class="btn-group view-opt-btn-group" data-toggle="buttons-radio">
<button type="button" class="btn" name="option-a" value="a">a</button>
<button type="button" class="btn" name="option-img" value="img">img</button>
<button type="button" class="btn" name="option-script" value="script">script</button>
<button type="button" class="btn" name="option-link" value="link">link</button>
<button type="button" class="btn" name="option-form" value="form">form</button>
<input type="hidden" name="option" value="0" />
</div>

i created a jscript click function

<script type="text/jscript">
    $("body").find("#radios").children().each(function () {
        $(this).bind('click', function () {
            $("input[name=option]").val(this.value);
        });
    });
</script>

inside my controller I used the FormCollection to add the selected button to my model

        string selectedTechnology = form["option"];
        whiteList.UrlType = selectedTechnology;

hopefully this helps.

Answer 1

So… here is the solution I was looking for

radio buttons using bootstrap css

    <div id="radios" class="btn-group view-opt-btn-group" data-toggle="buttons-radio">
    <button type="button" class="btn" name="option-a" value="a">a</button>
    <button type="button" class="btn" name="option-img" value="img">img</button>
    <button type="button" class="btn" name="option-script" value="script">script</button>
    <button type="button" class="btn" name="option-link" value="link">link</button>
    <button type="button" class="btn" name="option-form" value="form">form</button>
    <input type="hidden" name="option" value="0" />
    </div>

i created a jscript click function

    <script type="text/jscript">
        $("body").find("#radios").children().each(function () {
            $(this).bind('click', function () {
                $("input[name=option]").val(this.value);
            });
        });
    </script>

inside my controller I used the FormCollection to add the selected button to my model

            string selectedTechnology = form["option"];
            whiteList.UrlType = selectedTechnology;

hopefully this helps.