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

【问题标题】：Using twitter bootstrap radio-button as a html.radiobutton replacement使用 twitter bootstrap 单选按钮作为 html.radiobutton 替代品
【发布时间】：2012-12-04 14:52:59
【问题描述】：

我有几个单选按钮

    <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 作为从选中的单选按钮获取值的一种方式，但我想使用引导 css 而不是使用普通的 @Html.radiobutton。

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

我觉得这不是正确的方法，因为帮助程序可能与 formcollection 一起使用，并且它不知道引导 css 按钮是什么，但如果有办法实现它，那就是很棒。

更新：

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

使用引导 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;

希望这会有所帮助。

【问题讨论】：

标签： c# asp.net-mvc twitter-bootstrap

【解决方案1】：

我实际上并没有使用过 twitter 引导程序（仅阅读过它），而且 .NET 不是我的强项，但是：

1) 您需要使用 input 和 type="radio" 来制作单选按钮，而不是按钮标签。

2) twitter 引导程序提供 .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" });

希望对您有所帮助。

【讨论】：

【解决方案2】：