c# - 使用 twitter bootstrap radio-button 作为 html.radiobutton 的替代品

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>

在我的 Controller 中，我使用 FormCollection 作为从选中的单选按钮获取值的方法，但我想使用 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>

在我的 Controller 中，我使用 FormCollection 将选定的按钮添加到我的模型中

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

希望这对您有所帮助。

Answer 1

我还没有真正使用过 Twitter Bootstrap (只是仔细阅读了它)，而且 .NET 不是我的强项，但是:

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

2) twitter bootstrap 提供了 .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" });

希望对您有所帮助。