Passage d’une liste d’objet d’une vue vers le contrôleur

Dans cet article, nous allons voir comment passer une liste d’objet d’une Vue vers le Contrôleur.

Asp.net MVC DefaultModelBinder:

Avec l’utilisation de la DefaultModelBinder dans ASP.NET MVC, vous pouvez lier les valeurs de formulaires soumis dans la Vue à des arguments d'une méthode du Contrôleur.

Mais le problème c’est qu’on ne peut pas lier directement un formulaire posté à une collection d’objet ICollection<T>.

Affichage de l'interface initiale :

Par exemple supposons que vous avez la méthode suivante :

public ActionResult UpdateInts(ICollection<int> ints) {

return View(ints);

}

Vous pouvez lier l’action en soumettant tout simplement un formulaire des champs entiers avec le même nom (ints).

    <form method="post" action="/Home/UpdateInts">

        <input type="text" name="ints" value="1" />

        <input type="text" name="ints" value="4" />

        <input type="text" name="ints" value="2" />

        <input type="text" name="ints" value="8" />

        <input type="submit" />

    </form>

Maintenant prenons l’exemple d’une liste d’objets (Piece)

    public class Piece

    {

        public int Id { get; set; }

        public string Niveau { get; set; }

    }

Nous allons rajouter une nouvelle vue qui prend comme model une collection des pièces (ICollection<Piece>) et qui contient un formulaire HTML.

@model ICollection<Piece> 

<h2>List des pièces </h2>

<% using(Html.BeginForm()) { %>

    <div id="editorRows">

        <%  foreach (PieceVM piece in pieces)          

                {

                    @Html.Partial("_CreatePiece.cshtml",piece)

                }      

          %>

    </div>

    <input type="submit" value="Finished" />

<% } %>

Ensuite, pour afficher l'éditeur de chaque élément dans la séquence, ajoutez une nouvelle vue partielle qui prend le model Piece comme paramètre (_CreatePiece.cshtml).

@model Piece

<div class="editorRow">

    <% using(Html.BeginCollectionItem("pieces")) { %>

        Id: <%= Html.TextBoxFor(x => x.Id) %>

        Niveau: $<%= Html.TextBoxFor(x => x.Niveau) %>

    <% } %>

</div>

Recevoir les données avec la méthode Post

Pour recevoir les données, ajoutez une nouvelle méthode d'action dans le Contrôleur comme suit :

[HttpPost]

public ActionResult EditPiece(IEnumerable<Piece> pieces)

{

…….

}

Avec l’extension Html.BeginCollectionItem vous pouvez recevoir tous les éléments de la liste sans avoir à faire quoi que ce soit. Ces éléments sont de type IEnumerable.

Comment BeginCollectionItem fonctionne

L’extension BeginCollectionItem va créer un nouveau champ caché qui dans notre cas est appelé pieces.index et qui prend comme valeur un Id unique, et reconstruire l’ensemble des champs du formulaire en rajoutant dans l’id et dans le nom le préfix piéces et l’Id unique du champ caché.

Cela va permettre au model binder MVC de reconstruire la liste des objets (Piece) après la soumission du formulaire.

Exemple :

<input type="hidden" value="1a55b43c-9297-4e13-83b5-b38f284723c1" autocomplete="off" name="pieces.index">

<input type="text" value="" style="width:325px" name="pieces[1a55b43c-9297-4e13-83b5-b38f284723c1].Niveau " id="pieces_1a55b43c-9297-4e13-83b5-b38f284723c1__Niveau">

Pour l’utiliser il suffit d’installer le package BeginCollectionItem en utilisant Nuget package manager de VisualStudio.

Le blog