web-dev-qa-db-fra.com

Comment définir la case à cocher de démarrage dans le contrôle CheckBoxFor ()

Je souhaite utiliser la case à cocher style bootstrap dans mon formulaire asp .net mvc, mais je trouve cela très difficile. Après des heures passées à chercher une solution, je n’ai rien trouvé qui puisse fonctionner pour moi.

Voici mon code HTML pour rasoir, mais la case à cocher ne s'affiche pas.

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

Voici rendu 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>

Comment puis-je configurer cette chose simple dans mon formulaire?

htmlasp.netasp.net-mvctwitter-bootstraprazor
3
AnotherSimpleName

Cela a résolu le problème:

                 <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>
2
AnotherSimpleName

sa ne fonctionne pas à cause de mettre la classe dans div afin d'ajouter la classe dans checkbox comme ceci

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

btw j'utilise icheck qui sont un peu fantaisie, il vous suffit d'ajouter

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

ces bibliothèques en-tête et en code

 <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

Sous mvc, une case à cocher true/false basée sur la valeur du modèle (boolean) comporte également un champ masqué portant le même nom (censé prendre en compte les cas où vous ne cochez pas la case si vous obtenez toujours une valeur dans la collection Forms).

C'est ce champ caché qui empêche la case à cocher de fonctionner au format bootstrap. Une case à cocher de style bootstrap de ce que je peux voir ne s'affichera jamais correctement sous MVC à l'aide de @ Html.CheckBoxFor

C'est ce que j'ai fait pour le faire fonctionner

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

Malheureusement, le modèle n'est pas mis à jour lorsque vous postez le formulaire et vous devez le gérer dans l'action HttpPost

1
djack109

Cela ne semble pas fonctionner pour moi, la case à cocher change de forme (les coins ronds) mais agit comme si elle était en lecture seule, fonctionnant toujours dessus.

Juste une note à votre solution, vous pouvez utiliser le décalage pour garder les contrôles alignés qui n’ont pas d’étiquettes, alors supprimez-les.

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

Et ajoutez col-md-offset-2 à la place:

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