Gestion de la DropDownList en ASP.NET MVC2

Le Framework MVC2 de ASP. NET permet de créer des sites web en utilisant MVC. Avec cette architecture, la création du visuel est un peu particulière et pas forcément intuitive pour quelqu’un n’ayant jamais travaillé sur un framework MVC. Ici je vais expliquer comment créer une liste déroulante à partir de données provenant de la base et avec une liste fixe.

Pour la création d’une DropDownList avec des données de la base de données, ayons déjà un exemple de base de données. Un système de gestion pour une ludothèque par exemple : Une table Jeu (Games) à un et un seul développeur (Developers). Un développeur peut avoir fait plusieurs jeux.

Tables Game et Developers

Si le CRUD de Developers est basique, il est un peu différent pour Games. En effet, pour indiquer le développeur du jeu lors de la création et de l’éditeur, on ne va pas entrer le nom à la main dans une TextBox : Entrer un Id à la main n’a aucun sens et si c’était le nom qui était demandé, les erreurs possibles seraient trop nombreuses (fautes de frappe, entrée d’un développeur qui n’existe pas dans la base, etc). On va donc utiliser une liste déroulante dans les vues « create » et « edit » de Games pour permettre de sélectionner un développeur parmi ceux qui sont dans la base.

Pour cela, on va d’abord récupérer le contenu de la table Developers et afficher ce qui nous intéresse. On enregistrera ensuite l’Id du développeur sélectionné dans la table Games pour la clé étrangère developers_id.

Regardons d’abord le controller pour modifier la fonction en GET de create de Game :

GamesController.cs :

// GET: /Games/Create

public ActionResult Create()

{

MyBaseDataContext db = new MyBaseDataContext();
ViewData[« Developers_Id »] = new SelectList(db.Developers, « Id », « Name »);
Game game = new Game();
return View(game);

}

Au moment de la création de la vue « create », en plus d’envoyer un nouvel objet Game pour remplir ces différents attributs, on va également envoyer une SelectList contenant tous les objets de la table Developers via une ViewData. Lors de la création de la liste, on indique que les valeurs sont les Id des objets et le texte qui apparaitra dans la DropDownList sera le « Name ». Pour ce qui est de la variable db, elle peut être déclarée en haut de la classe si vous le désirez.

Modifions maintenant la vue Create. Là où l’on doit remplir les informations sur le développeur :

<div class= »editor-label » >

<%: Html.LabelFor(model => model.Developers_Id) %>

</div>

<div class= »editor-field » >

<%= Html.DropDownList(« Developers_Id »)%>

</div>

La DropDownList va vous permettre d’afficher la liste des noms des développeurs. Pour cela, on appelle implicitement la ViewData « Developers_Id ». Au moment de la validation, le système va récupérer l’Id du développeur. Etant donné quel’objet Html a le même nom de l’attribut de l’objet, il sera insérer dans l’attribut developers_Id de l’objet.

Maintenant, comment gérer l’édition pour que le développeur de l’objet qu’on édite soit sélectionné par défaut dans la DropDownList ?

Dans le controller de Game, modifions la fonction GET de « edit » :

// GET: /Games/Edit/1

public ActionResult Edit()

{

Game game = new Game();
MyBaseDataContext db = new MyBaseDataContext();
ViewData[« Developers_Id »] = new SelectList(db.Developers,
« Id »,« Name »,
game.Developers_Id);
return View(game);

}

Ici, on récupère le contenu de la table Developers pour le mettre dans une SelectList de la même manière que dans le create. La différence est le nouveau paramètre « game.Developers_Id ». Cela permet d’indiquer dans le constructeur de la SelectList que la valeur sélectionnée est égale à developers_Id.

Pour la vue edit, le code est le même que pour la vue create :

<div class= »editor-label » >

<%: Html.LabelFor(model => model.Developers_Id) %>

</div>

<div class= »editor-field » >

<%= Html.DropDownList(« Developers_Id »)%>

</div>

Vous savez maintenant réaliser une liste déroulante avec des données de la base.

Maintenant, comment réaliser une DropDownList avec des données fixes non issues de la base. Prenons un exemple simple, une table Persons. Une personne a un prénom, un nom et un sexe.

Table Persons

Pour le sexe, vous n’allez pas créer une table pour la remplir des différentes possibilités ni remplir le sexe à la main via une TextBox(toujours trop de possibilité d’erreur entre les mots pouvant être employés et les fautes de frappe). On va donc créer une liste avec 3 choix possibles : « Non renseigné », « Femme », « Homme ».

Modifions d’abord la fonction GET du create dans le PersonsController.cs :

// GET: /Persons/Create

public ActionResult Create()

{

List<SelectListItem> items = new List<SelectListItem>();

items.Add(new SelectListItem
{

Text = « Non renseigné »,
Value = « Non renseigné »,
Selected = true

});
items.Add(new SelectListItem
{

Text = « Femme »,
Value = « Femme »

});
items.Add(new SelectListItem
{

Text = « Homme »,
Value = « Homme »

});
ViewData[« Sex »] = items;
Person person = new Person();
return View(person);

}

On crée une List<SelectListItem> contenant nos éléments sous la forme de SelectListItem. Le « Text » sera ce qui est affiché dans la DropDownList, « Value » sera ce qui est récupéré si la donnée est sélectionnée, « Selected » indique si c’est cette donnée sélectionnée. On envoie ensuite cette liste à la vue avec un ViewData.

La vue Create se présente comme précédemment :

<div class= »editor-label » >

<%: Html.LabelFor(model => model.Sex) %>

</div>

<div class= »editor-field » >

<%= Html.DropDownList(« Sex »)%>

</div>

Ensuite, pour l’Edit, la modification est légèrement différente :

// GET: /Persons/Edit/1

public ActionResult Edit()

{

Person person = new Person();
List<SelectListItem> items = new List<SelectListItem>();
items.Add(new SelectListItem
{

Text = « Non renseigné »,
Value = « Non renseigné »,
Selected = (person.Sex == « Non renseigné »)

});
items.Add(new SelectListItem
{

Text = « Femme »,
Value = « Femme »,
Selected = (person.Sex == « Femme »)

});
items.Add(new SelectListItem
{

Text = « Homme »,
Value = « Homme »,
Selected = (person.Sex == « Homme »)

});
ViewData[« Sex »] = items;
return View(person);

}

La seule différence est au niveau du Selected. On teste si le sexe de la personne correspond. On sait que si c’est le cas, la variable sera mit à True. Il suffit enfin d’afficher dans la vue Edit de la même manière que précédemment :

<div class= »editor-label » >

<%: Html.LabelFor(model => model.Sex) %>

</div>

<div class= »editor-field » >

<%= Html.DropDownList(« Sex »)%>

</div>

Et vous avez enfin fini de créer vos DropDownList.

Post to Twitter Post to Facebook Post to Google Buzz Post to LinkedIn

Un commentaire pour “Gestion de la DropDownList en ASP.NET MVC2”

  1. Lorenzo dit :

    Est-ce possible d’adapter ça en PHP ?!

    j’ai rapidement essayer mais sans succès… 🙁

    Help-me pleas

Laissez un commentaire

« »