Comment gérer les cases à cocher dans les formulaires ASP.NET MVC?

Attention: cette question a plus de neuf ans!

Votre meilleure option est de rechercher de nouvelles questions ou de rechercher les réponses ci-dessous à la recherche de votre version spécifique de MVC, car de nombreuses réponses sont obsolètes maintenant.

Si vous trouvez une réponse qui fonctionne pour votre version, assurez-vous que la réponse contient la version de MVC que vous utilisez.
_{(La question d'origine commence ci-dessous)}

Cela me semble un peu bizarre, mais pour autant que je sache, c'est comme ça que vous le faites.

J'ai une collection d'objets et je souhaite que les utilisateurs en sélectionnent un ou plusieurs. Cela me dit "formulaire avec des cases à cocher". Mes objets n'ont aucun concept de "sélectionné" (ce sont des POCO rudimentaires formés en désérialisant un appel wcf). Donc, je fais ce qui suit:

public class SampleObject{
  public Guid Id {get;set;}
  public string Name {get;set;}
}

Dans la vue:

<%
    using (Html.BeginForm())
    {
%>
  <%foreach (var o in ViewData.Model) {%>
    <%=Html.CheckBox(o.Id)%>&nbsp;<%= o.Name %>
  <%}%>
  <input type="submit" value="Submit" />
<%}%>

Et, dans le contrôleur, c'est la seule façon dont je peux voir pour déterminer quels objets l'utilisateur a vérifiés:

public ActionResult ThisLooksWeird(FormCollection result)
{
  var winnars = from x in result.AllKeys
          where result[x] != "false"
          select x;
  // yadda
}

C'est bizarre en premier lieu, et deuxièmement, pour les éléments que l'utilisateur a vérifiés, le FormCollection répertorie sa valeur comme "vrai faux" plutôt que juste vrai.

De toute évidence, il me manque quelque chose. Je pense que cela est construit avec l'idée à l'esprit que les objets de la collection qui sont traités dans le formulaire html sont mis à jour à l'aide UpdateModel()ou via un ModelBinder.

Mais mes objets ne sont pas configurés pour cela; cela signifie-t-il que c'est le seul moyen? Y a-t-il une autre façon de procéder?

Html.CheckBox fait quelque chose de bizarre - si vous affichez la source sur la page résultante, vous verrez qu'il y a un <input type="hidden" />être généré à côté de chaque case à cocher, ce qui explique les "vraies fausses" valeurs que vous voyez pour chaque élément de formulaire.

Essayez ceci, qui fonctionne définitivement sur ASP.NET MVC Beta car je viens de l'essayer.

Mettez cela dans la vue au lieu d'utiliser Html.CheckBox ():

<% using (Html.BeginForm("ShowData", "Home")) {  %>
  <% foreach (var o in ViewData.Model) { %>
    <input type="checkbox" name="selectedObjects" value="<%=o.Id%>">
    <%= o.Name %>
  <%}%>
  <input type="submit" value="Submit" />
<%}%>

Vos cases à cocher sont toutes appelées selectedObjectsetvalue case à cocher de chaque est le GUID de l'objet correspondant.

Ensuite, publiez sur l'action de contrôleur suivante (ou quelque chose de similaire qui fait quelque chose d'utile au lieu de Response.Write ())

public ActionResult ShowData(Guid[] selectedObjects) {
    foreach (Guid guid in selectedObjects) {
        Response.Write(guid.ToString());
    }
    Response.End();
    return (new EmptyResult());
}

Cet exemple va simplement écrire les GUID des cases que vous avez cochées; ASP.NET MVC mappe les valeurs GUID des cases à cocher sélectionnées dans le Guid[] selectedObjectsparamètre pour vous, et analyse même les chaînes de la collection Request.Form en objets GUID instanciés, ce qui, je pense, est plutôt agréable.

HtmlHelper ajoute une entrée masquée pour informer le contrôleur de l'état non vérifié. Donc, pour avoir le bon statut vérifié:

bool bChecked = form[key].Contains("true");

Si vous vous demandez POURQUOI ils ont mis un champ caché avec le même nom que la case à cocher, la raison est la suivante:

Commentaire du code source MVCBetaSource \ MVC \ src \ MvcFutures \ Mvc \ ButtonsAndLinkExtensions.cs

Rendre un supplément <input type="hidden".../>pour les cases à cocher. Cela résout les scénarios dans lesquels les cases à cocher non cochées ne sont pas envoyées dans la demande. L'envoi d'une entrée masquée permet de savoir que la case à cocher était présente sur la page lors de la soumission de la demande.

Je suppose que dans les coulisses, ils doivent savoir cela pour se lier aux paramètres des méthodes d'action du contrôleur. Vous pourriez alors avoir un booléen à trois états, je suppose (lié à un paramètre booléen nullable). Je ne l'ai pas essayé mais j'espère que c'est ce qu'ils ont fait.

Vous devez également utiliser <label for="checkbox1">Checkbox 1</label>car les utilisateurs peuvent alors cliquer sur le texte de l'étiquette ainsi que sur la case à cocher elle-même. Il est également plus facile à coiffer et au moins dans IE, il sera mis en surbrillance lorsque vous parcourez les contrôles de la page.

<%= Html.CheckBox("cbNewColors", true) %><label for="cbNewColors">New colors</label>

Ce n'est pas seulement une chose «oh je pourrais le faire». C'est une amélioration significative de l'expérience utilisateur. Même si tous les utilisateurs ne savent pas qu'ils peuvent cliquer sur l'étiquette, beaucoup le feront.

Je suis surpris qu'aucune de ces réponses n'ait utilisé les fonctionnalités MVC intégrées pour cela.

J'ai écrit un article de blog à ce sujet ici , qui relie même les étiquettes à la case à cocher. J'ai utilisé le dossier EditorTemplate pour accomplir cela d'une manière propre et modulaire.

Vous vous retrouverez simplement avec un nouveau fichier dans le dossier EditorTemplate qui ressemble à ceci:

@model SampleObject

@Html.CheckBoxFor(m => m.IsChecked)
@Html.HiddenFor(m => m.Id)
@Html.LabelFor(m => m.IsChecked, Model.Id)

dans votre vue actuelle, il ne sera pas nécessaire de boucler cela, simplement 1 ligne de code:

@Html.EditorFor(x => ViewData.Model)

Visitez mon article de blog pour plus de détails.

Voici ce que je fais.

Vue:

<input type="checkbox" name="applyChanges" />

Manette:

var checkBox = Request.Form["applyChanges"];

if (checkBox == "on")
{
...
}

J'ai trouvé que les méthodes d'assistance Html. * N'étaient pas si utiles dans certains cas, et que je ferais mieux de le faire en HTML ancien. Celui-ci étant l'un d'eux, l'autre qui me vient à l'esprit est les boutons radio.

Edit: c'est sur Preview 5, évidemment YMMV entre les versions.

Ils semblent choisir de lire uniquement la première valeur, c'est donc "vrai" lorsque la case est cochée et "faux" lorsque seule la valeur cachée est incluse. Ceci est facilement récupéré avec du code comme celui-ci:

model.Property = collection["ElementId"].ToLower().StartsWith("true");

@Dylan Beattie Great Find !!! Je vous remercie beaucoup. Pour développer encore plus, cette technique fonctionne également parfaitement avec l'approche View Model. MVC est tellement cool qu'il est assez intelligent pour lier un tableau de Guids à une propriété du même nom que l'objet Model lié à la vue. Exemple:

ViewModel:

public class SampleViewModel
{
    public IList<SampleObject> SampleObjectList { get; set; }
    public Guid[] SelectedObjectIds { get; set; }

    public class SampleObject
    {
        public Guid Id { get; set; }
        public string Name { get; set; }
    }
}

Vue:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>Sample View</h2>
<table>
    <thead> 
        <tr>
            <th>Checked</th>
            <th>Object Name</th>
        </tr>
    </thead> 
<% using (Html.BeginForm()) %>
<%{%>                    
    <tbody>
        <% foreach (var item in Model.SampleObjectList)
           { %>
            <tr>
                <td><input type="checkbox" name="SelectedObjectIds" value="<%= item.Id%>" /></td>
                <td><%= Html.Encode(item.Name)%></td>
            </tr>
        <% } %>
    </tbody>
</table>
<input type="submit" value="Submit" />
<%}%>                    

Manette:

    [AcceptVerbs(HttpVerbs.Get)]
    public ActionResult SampleView(Guid id)
    {
        //Object to pass any input objects to the View Model Builder 
        BuilderIO viewModelBuilderInput = new BuilderIO();

        //The View Model Builder is a conglomerate of repositories and methods used to Construct a View Model out of Business Objects
        SampleViewModel viewModel = sampleViewModelBuilder.Build(viewModelBuilderInput);

        return View("SampleView", viewModel);
    }

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult SampleView(SampleViewModel viewModel)
    {
        // The array of Guids successfully bound to the SelectedObjectIds property of the View Model!
        return View();
    }

Quiconque connaît la philosophie de View Model se réjouira, cela fonctionne comme un champion!

Je voudrais également souligner que vous pouvez attribuer un nom différent à chaque case à cocher et que ce nom fasse partie des paramètres d'actionrésultats.

Exemple,

Vue:

 <%= Html.CheckBox("Rs232CheckBox", false, new { @id = "rs232" })%>RS-232

 <%= Html.CheckBox("Rs422CheckBox", false, new { @id = "rs422" })%>RS-422

Manette:

public ActionResults MyAction(bool Rs232CheckBox, bool Rs422CheckBox) {
    ...
}

Les valeurs de la vue sont transmises à l'action car les noms sont identiques.

Je sais que cette solution n'est pas idéale pour votre projet, mais j'ai pensé jeter l'idée là-bas.

<input type = "checkbox" name = "checkbox1" /> <label> Check to say hi.</label>

Du contrôleur:

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Index(FormCollection fc)
    {

         var s = fc["checkbox1"];

         if (s == "on")
         {
             string x = "Hi";
         }
    }

Ce problème se produit également dans la version 1.0. Html.Checkbox () provoque l'ajout d'un autre champ masqué avec le même nom / id que votre case à cocher d'origine. Et comme j'essayais de charger un tableau de cases à cocher à l'aide de document.GetElemtentsByName (), vous pouvez deviner comment les choses se gâtaient. C'est bizarre.

D'après ce que je peux comprendre, le modèle ne veut pas deviner si vérifié = vrai ou faux, j'ai contourné cela en définissant un attribut de valeur sur l'élément de case à cocher avec jQuery avant de soumettre le formulaire comme ceci:

 $('input[type="checkbox"]').each(function () {
       $(this).attr('value', $(this).is(':checked'));
 }); 

De cette façon, vous n'avez pas besoin d'un élément caché juste pour stocker la valeur de la case à cocher.

Je sais que cette question a été écrite lorsque MVC3 n'était pas sorti, mais pour quiconque vient à cette question et utilise MVC3, vous voudrez peut-être la manière "correcte" de le faire.

Bien que je pense que faire le tout

Contains("true");

chose est géniale et propre, et fonctionne sur toutes les versions MVC, le problème est qu'il ne prend pas en compte la culture (comme si c'était vraiment important dans le cas d'un bool).

La manière "correcte" de déterminer la valeur d'un booléen, au moins dans MVC3, consiste à utiliser ValueProvider.

var value = (bool)ValueProvider.GetValue("key").ConvertTo(typeof(bool));

Je le fais dans l'un des sites de mon client lorsque je modifie les autorisations:

var allPermissionsBase = Request.Params.AllKeys.Where(x => x.Contains("permission_")).ToList();
var allPermissions = new List<KeyValuePair<int, bool>>();

foreach (var key in allPermissionsBase)
{
     // Try to parse the key as int
     int keyAsInt;
     int.TryParse(key.Replace("permission_", ""), out keyAsInt);

     // Try to get the value as bool
     var value = (bool)ValueProvider.GetValue(key).ConvertTo(typeof(bool));
}

Maintenant, la beauté de ceci est que vous pouvez l'utiliser avec à peu près n'importe quel type simple, et il sera même correct en fonction de la culture (pensez à l'argent, décimales, etc.).

Le ValueProvider est ce qui est utilisé lorsque vous formez vos actions comme ceci:

public ActionResult UpdatePermissions(bool permission_1, bool permission_2)

mais lorsque vous essayez de créer dynamiquement ces listes et de vérifier les valeurs, vous ne connaîtrez jamais l'ID au moment de la compilation, vous devez donc les traiter à la volée.

La façon la plus simple de le faire est donc ...

Vous définissez le nom et la valeur.

<input type="checkbox" name="selectedProducts" value="@item.ProductId" />@item.Name

Ensuite, lors de la soumission, saisissez les valeurs des cases à cocher et enregistrez-les dans un tableau int. puis la fonction LinQ appropriée. C'est tout..

[HttpPost]
        public ActionResult Checkbox(int[] selectedObjects)
        {
            var selected = from x in selectedObjects
                           from y in db
                           where y.ObjectId == x
                           select y;                   

            return View(selected);
        }

Identique à la réponse de nautic20, utilisez simplement la liste de cases à cocher de liaison de modèle par défaut MVC avec le même nom qu'une propriété de collection de string / int / enum dans ViewModel. C'est ça.

Mais un problème doit être souligné. Dans chaque composant de case à cocher, vous ne devez pas y mettre "Id" qui affectera la liaison du modèle MVC.

Le code suivant fonctionnera pour la liaison de modèle:

 <% foreach (var item in Model.SampleObjectList)
       { %>
        <tr>
            <td><input type="checkbox" name="SelectedObjectIds" value="<%= item.Id%>" /></td>
            <td><%= Html.Encode(item.Name)%></td>
        </tr>
 <% } %>

Les codes suivants ne se lieront pas au modèle (la différence ici est l'ID attribué pour chaque case à cocher)

<% foreach (var item in Model.SampleObjectList)
       { %>
        <tr>
            <td><input type="checkbox" name="SelectedObjectIds" id="[some unique key]" value="<%= item.Id%>" /></td>
            <td><%= Html.Encode(item.Name)%></td>
        </tr>
<% } %>

c'est ce que j'ai fait pour perdre les valeurs doubles lors de l'utilisation du Html.CheckBox (...

Replace("true,false","true").Split(',')

avec 4 cases cochées, non cochées, non cochées, cochées cela devient vrai, faux, faux, faux, vrai, faux en vrai, faux, faux, vrai. juste ce dont j'avais besoin

Que diriez-vous quelque chose comme ça?

bool isChecked = false;
if (Boolean.TryParse(Request.Form.GetValues(”chkHuman”)[0], out isChecked) == false)
    ModelState.AddModelError(”chkHuman”, “Nice try.”);

Lorsque j'utilise la case à cocher HtmlHelper, je préfère de loin travailler avec les données du formulaire de case à cocher publiées sous forme de tableau. Je ne sais pas vraiment pourquoi, je sais que les autres méthodes fonctionnent, mais je pense que je préfère simplement traiter les chaînes séparées par des virgules comme un tableau autant que possible.

Faire un test «vérifié» ou vrai serait donc:

//looking for [true],[false]
bool isChecked = form.GetValues(key).Contains("true"); 

Faire un faux chèque serait:

//looking for [false],[false] or [false]
bool isNotChecked = !form.GetValues(key).Contains("true"); 

La principale différence est d'utiliser GetValuescar cela retourne comme un tableau.

Faites-le sur $(document).ready:

$('input:hidden').each(function(el) {
    var that = $(this)[0];
    if(that.id.length < 1 ) {

        console.log(that.id);
        that.parentElement.removeChild(that);

    }
});

Ma solution est:

<input type="checkbox"  id="IsNew-checkbox"  checked="checked" />     
<input type="hidden"  id="IsNew" name="IsNew" value="true"  />      
<script language="javascript" type="text/javascript" >     
  $('#IsNew-checkbox').click(function () {    
      if ($('#IsNew-checkbox').is(':checked')) {    
          $('#IsNew').val('true');    
      } else {    
          $('#IsNew').val('false');    
       }    
  });   
</script>  

Plus vous pouvez trouver ici: http://www.blog.mieten.pl/2010/12/asp-net-mvc-custom-checkbox-as-solution-of-string-was-not-recognized-as-a- valid-boolean /

J'ai eu presque le même problème mais la valeur de retour de mon contrôleur a été bloquée avec d'autres valeurs.

J'ai trouvé une solution simple mais cela semble un peu difficile.

Essayez de taper Viewbag.votre contrôleur et maintenant vous lui donnez un nom commeViewbag.Checkbool

Passez maintenant à la vue et essayez @Viewbag.Checkboolavec cela, vous obtiendrez la valeur du contrôleur.

Mes paramètres de contrôleur ressemblent à ceci:

public ActionResult Anzeigen(int productid = 90, bool islive = true)

et ma case à cocher se mettra à jour comme ceci:

<input id="isLive" type="checkbox" checked="@ViewBag.Value" ONCLICK="window.location.href = '/MixCategory/Anzeigen?isLive=' + isLive.checked.toString()" />

En utilisant @mmacaulay, j'ai trouvé ceci pour bool:

// MVC Work around for checkboxes.
bool active = (Request.Form["active"] == "on");

Si coché actif = vrai

Si non coché actif = faux