web-dev-qa-db-fra.com

La case à cocher ne fonctionne pas avec la propriété booléenne viewmodel

J'utilise MVC6 et j'ai un champ de saisie de case à cocher dans mon formulaire, mais lorsque le formulaire est soumis, la valeur de la case à cocher est toujours transmise au ViewModel comme false:

Voici comment la propriété est déclarée dans mon ViewModel:

[Display(Name = "Include Sales Tax")]
public bool IncludeSalesTax { get; set; }

Voici à quoi ressemble le formulaire dans mon rasoir MVC6:

<div class="form-group">
    <div class="checkbox">
        <label><input asp-for="IncludeSalesTax" type="checkbox" value="">@Html.DisplayNameFor(m => m.IncludeSalesTax)</label>
    </div>
</div>

J'ai pensé que ce qui précède serait le meilleur moyen de suivre les normes Twitter Bootstrap et d'utiliser la balise asp-for ASP.NET MVC6 pour la liaison de modèle.

Lorsque je soumets le formulaire, la valeur de IncludeSalesTax est toujours fausse, même lorsqu'elle est cochée. Qu'est-ce que je fais mal?

c#asp.netasp.net-mvcrazorasp.net-core-mvc
13
Blake Rivell

Après avoir laissé Visual Studio générer le formulaire basé sur mon ViewModel, voici comment il le fait:

        <div class="checkbox">
            <input asp-for="isTaxable" />
            <label asp-for="isTaxable"></label>
        </div>

De plus, il me manquait la fermeture de ma balise d'entrée. Donc, cela peut aussi être fait comme ceci qui est la manière préférée bootstrap:

<label><input asp-for="isTaxable" type="checkbox" value=""/>@Html.DisplayNameFor(m => m.isTaxable)</label>
4
Blake Rivell

la case à cocher du type d'entrée envoie un "on" si elle est définie. Sinon, il n'est pas envoyé. Il est important de définir l'attribut value sur true. Dans ce cas, il envoie vrai ou rien, ce qui est parfait pour se lier à un booléen.

<input type="checkbox" name="yourPropertyName" value="true" checked />
28
pinki

Le moteur de visualisation du rasoir crée normalement une case à cocher et une entrée cachée utilisant le même nom.

Vous pouvez simplement utiliser le html ci-dessous pour vous assurer d'obtenir le résultat souhaité:

<div class="form-group">
        <div class="checkbox">     
    <input type="checkbox" value="true" name="IncludeSalesTax" />Include Sales Tax
    <input type="hidden" value="false" name="IncludeSalesTax" />
        </div>
    </div>
8
Ziregbe Otee

La réponse de Pinki ci-dessus est bonne si la case doit être cochée par défaut.

Si la case à cocher doit être désactivée par défaut, un petit javascript en ligne définit la valeur sur vrai ou faux en cliquant sur:

<input name="yourPropertyName" type="checkbox" value="false" onchange="this.value=this.checked">
0
user3408322