web-dev-qa-db-ja.com

かみそりのCheckBoxFor（）でbootstrapチェックボックスを設定する方法

bootstrapスタイル付きチェックボックスをasp .net mvcフォームで使用したいのですが、非常に難しいことに気付きました。解決策を何時間も探した後、私にとって役立つものを見つけることができませんでした。

これが私のHTMLかみそりコードですが、チェックボックスが表示されません。

                 <div class="form-group">
                    @Html.LabelFor(c => c.IsSynchronize, new { @class = "col-sm-2 control-label" })
                    <div class="col-sm-10">
                        <div class="checkbox">
                            @Html.CheckBoxFor(model => model.IsSynchronize)
                        </div>
                    </div>
                </div>

ここにレンダリングされたHTMLがあります：

<div class="checkbox">
<input data-val="true" data-val-required="Pole Synchronizacja jest wymagane." id="IsSynchronize" name="IsSynchronize" type="checkbox" value="true">
<input name="IsSynchronize" type="hidden" value="false">
</div>

この単純なものをフォームに設定するにはどうすればよいですか？

htmlasp.netasp.net-mvctwitter-bootstraprazor
5
AnotherSimpleName

これは問題を解決しました：

                 <div class="form-group">

                     <label class="col-sm-2"></label>
                     <div class="col-sm-10">
                         <div class="checkbox">

                             @Html.CheckBoxFor(model => model.Synchronize)
                             @Html.LabelFor(c => c.Synchronize)
                         </div>
                     </div>
                 </div>
4
AnotherSimpleName

クラスをdivに配置するため機能しないので、このようにcheckboxにクラスを追加します

                <div class="form-group">
                    @Html.LabelFor(c => c.IsSynchronize, new { @class = "col-sm-2 control-label" })
                    <div class="col-sm-10">
                            @Html.CheckBoxFor(model => model.IsSynchronize ,new {@class="checkbox"})
                    </div>
                </div>

ところで私はicheckを使います

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/bantikyan/icheck-bootstrap/master/icheck-bootstrap.min.css">

ヘッダーとコードでこれらのライブラリを使用

 <div class="form-group">
            <div class="checkbox icheck-turquoise">
                @Html.CheckBoxFor(model => model.IsSynchronize)
                @Html.LabelFor(c => c.IsSynchronize, new { @class = "col-sm-2 control-label" })


        </div>
    </div>
1
Usman

Mvcの下では、モデル値（ブール値）に基づくtrue/falseチェックボックスにも同じ名前の非表示フィールドがあります（おそらく、Formsコレクションで値を取得するボックスをチェックしない場合に対応するため）

bootstrap形式でチェックボックスの動作を停止するこの隠しフィールド。私が見ることができるものからのbootstrapスタイル付きチェックボックスは、@ Htmlを使用してmvcで正しく表示されません。 CheckBoxFor

これは私がそれを機能させるためにやったことです

        <div class="checkbox">
            <input type="checkbox" value="@Model.propertyname" id="[same as property name]" name="[same as property name]" />
            <label for="propertyname">any label you like</label>
        </div>

残念ながら、フォームを投稿してもモデルは更新されず、HttpPostされたアクションでそれを処理する必要があります

1
djack109

チェックボックスの形が変化します（角が丸くなります）が、読み取り専用であるかのように機能しますが、引き続き機能します。

ソリューションへのメモとして、オフセットを使用して、ラベルのないコントロールを整列させておくことができるので、削除してください

<label class="col-sm-2"></label>

代わりにcol-md-offset-2を追加します：

<div class="col-md-10 col-sm-offset-2">
0
user8196665

私はawesome-bootstrap-checkboxを使用し、次のようなテキストなしでチェックボックスを作成しました：

<div class="checkbox checkbox-info checkbox-circle">
    @Html.CheckBoxFor(m => m.PropertyName)
    <label for="@Html.IdFor(m => m.PropertyName)"></label>
</div>
0
Alex Young