2

我有几个单选按钮

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

希望这会有所帮助。

4

2 回答 2

3

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

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

希望这会有所帮助。

于 2012-12-04T16:49:37.233 回答
3

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

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

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" });

希望有帮助。

于 2012-12-04T15:30:47.087 回答