Question

我有几个单选按钮

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

我想使用twitter bootstrap的btn-group，buttons-radio作为样式来代替这些单选按钮，我试图添加的代码是

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

在我的控制器中我正在使用我使用FormCollection作为从已检查的radiobutton获取值的方法，但我想使用bootstrap css而不是使用普通的@ Html.radiobutton。

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

我有一种感觉，这不是正确的方法，因为帮助器可能与formcollection一起工作，它不知道bootstrap css按钮是什么，但是如果有办法实现它，那就是太棒了。

更新：

所以...这是我正在寻找的解决方案

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

我创建了一个jscript点击功能

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

在我的控制器中我使用FormCollection将所选按钮添加到我的模型

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

希望这会有所帮助。

Answer 1

我实际上没有使用过twitter bootstrap（只读它），而.NET不是我的强项，但是：

1）您需要使用带有type =“radio”的输入来制作单选按钮，而不是按钮标记。

2） twitter bootstrap提供了应用于input元素父级的.radio和.inline类，如标签：

<label class="radio">
  <input type="radio" name="selected" value="..." />
  Text to come after the radio button
</label>

3） @ Html.RadioButton接受第三个参数，一个对象，用于指定属性：

@Html.RadioButton("selected", "form", new { class = "class" });

希望有所帮助。

Answer 2

所以...这是我正在寻找的解决方案

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

我创建了一个jscript点击功能

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

在我的控制器中我使用FormCollection将所选按钮添加到我的模型

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

希望这会有所帮助。

使用twitter bootstrap单选按钮作为html.radiobutton的替代品

2 个答案: