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ブートストラップの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を使用していますが、プレーンな@Html.radiobuttonの代わりにブートストラップcssを使用したいと思います。

            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

私は実際にtwitterブートストラップを使用していません（それを読んでいるだけです）、そして.NETは私の強みではありませんが：

1）ボタンタグではなく、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は、属性を指定するための3番目の引数であるオブジェクトを取ります。

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

お役に立てば幸いです。

于 2012-12-04T15:30:47.087 に答える
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 に答える