Utilisation du helper DropDownList avec ASP.NET MVC

  • Article

par Rick Anderson

Ce tutoriel vous apprend les principes de base de l’utilisation de l’assistant DropDownList et de l’assistant ListBox dans une application web MVC ASP.NET. Vous pouvez utiliser Microsoft Visual Web Developer 2010 Express Service Pack 1, qui est une version gratuite de Microsoft Visual Studio pour suivre le tutoriel. Avant de commencer, vérifiez que vous avez installé les prérequis listés ci-dessous. Vous pouvez tous les installer en cliquant sur le lien suivant : Programme d’installation de plateforme web. Vous pouvez également installer individuellement les prérequis à l’aide des liens suivants :

Si vous utilisez Visual Studio 2010 au lieu de Visual Web Developer 2010, installez les prérequis en cliquant sur le lien suivant : Conditions préalables de Visual Studio 2010. Ce tutoriel part du principe que vous avez terminé le tutoriel Introduction à ASP.NET MVC ou letutoriel ASP.NET magasin de musique MVC ou que vous êtes familiarisé avec ASP.NET développement MVC. Ce tutoriel commence par un projet modifié à partir du tutoriel ASP.NET magasin de musique MVC .

Un projet Visual Web Developer avec le code source C# du didacticiel terminé est disponible pour accompagner cette rubrique. Télécharger.

Contenu

Vous allez créer des méthodes d’action et des vues qui utilisent l’assistance DropDownList pour sélectionner une catégorie. Vous allez également utiliser jQuery pour ajouter une boîte de dialogue insérer une catégorie qui peut être utilisée lorsqu’une nouvelle catégorie (par exemple, un genre ou un artiste) est nécessaire. Vous trouverez ci-dessous une capture d’écran de la vue Créer montrant des liens pour ajouter un nouveau genre et ajouter un nouvel artiste.

Image à l’aide de l’assistance de liste déroulante

Compétences

Vous apprendrez les compétences suivantes :

  • Comment utiliser l’assistant DropDownList pour sélectionner des données de catégorie.
  • Comment ajouter une boîte de dialogue jQuery pour ajouter de nouvelles catégories.

Mise en route

Commencez par télécharger le projet de démarrage avec le lien suivant, Télécharger. Dans Windows Explorer, cliquez avec le bouton droit sur le fichier DDL_Starter.zip et sélectionnez propriétés. Dans la boîte de dialogue PropriétésDDL_Starter.zip , sélectionnez Débloquer.

Image des propriétés boîte de dialogue sélectionner débloquer

Cliquez avec le bouton droit sur le fichier DDL_Starter.zip et sélectionnez Extraire tout pour décompresser le fichier. Ouvrez le fichier StartMusicStore.sln avec Visual Web Developer 2010 Express (« Visual Web Developer » ou « VWD » en abrégé) ou Visual Studio 2010.

Appuyez sur CTRL+F5 pour exécuter l’application, puis cliquez sur le lien Tester .

Image du lien de test d’application

Sélectionnez le lien Sélectionner une catégorie de film (simple). Une liste de sélection de type de film s’affiche, avec Comédie la valeur sélectionnée.

Image de la liste de sélection de type de film

Cliquez avec le bouton droit dans le navigateur et sélectionnez afficher la source. Le code HTML de la page s’affiche. Le code ci-dessous montre le code HTML de l’élément select.

<form action="/Home/CategoryChosen" method="get">

<fieldset>Movie Type <select id="MovieType" name="MovieType">

<option value=""></option>

<option value="0">Action</option>

<option value="1">Drama</option>

<option selected="selected" value="2">Comedy</option>

<option value="3">Science Fiction</option>

</select>

<p><input type="submit" value="Submit" /> </p>

</fieldset>

</form>

Vous pouvez voir que chaque élément de la liste de sélection a une valeur (0 pour l’action, 1 pour le drame, 2 pour la comédie et 3 pour la science-fiction) et un nom d’affichage (action, drame, comédie et science-fiction). Le code ci-dessus est du code HTML standard pour une liste de sélection.

Remplacez la liste de sélection par Drama et appuyez sur le bouton Envoyer. L’URL dans le navigateur est http://localhost:2468/Home/CategoryChosen?MovieType=1 et la page affiche Vous avez sélectionné : 1.

Image d’U R L dans le navigateur

Ouvrez le fichier Controllers\HomeController.cs et examinez la SelectCategory méthode.

public ActionResult SelectCategory() {

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

     items.Add(new SelectListItem { Text = "Action", Value = "0"});

     items.Add(new SelectListItem { Text = "Drama", Value = "1" });

     items.Add(new SelectListItem { Text = "Comedy", Value = "2", Selected = true });

     items.Add(new SelectListItem { Text = "Science Fiction", Value = "3" });

     ViewBag.MovieType = items;

     return View();

 }

L’outil d’assistance DropDownList utilisé pour créer une liste de sélection HTML nécessite un élément SelectListItem >IEnumerable< , explicitement ou implicitement. Autrement dit, vous pouvez passer l’objet IEnumerable<SelectListItem > explicitement à l’assistance DropDownListList ou ajouter l’objet IEnumerable<SelectListItem > au ViewBag en utilisant le même nom pour la propriété SelectListItem que la propriété de modèle. La transmission implicite et explicite de l’élément SelectListItem est abordée dans la partie suivante du tutoriel. Le code ci-dessus montre le moyen le plus simple possible de créer un élément SelectListItem >IEnumerable< et de le remplir avec du texte et des valeurs. Notez que la Comedy propriété SelectListItem a la valeur true ; la liste de sélection affichée affiche Comédie comme élément sélectionné dans la liste.

L’élément SelectListItem >IEnumerable< créé ci-dessus est ajouté au ViewBag sous le nom MovieType. C’est ainsi que nous transmettons implicitement l’élément SelectListItem >IEnumerable< à l’assistance DropDownList illustrée ci-dessous.

Ouvrez le fichier Views\Home\SelectCategory.cshtml et examinez le balisage.

@{

    ViewBag.Title = "Category Select";

    Layout = "~/Views/Shared/_Simple_Layout.cshtml";

}

@using (Html.BeginForm("CategoryChosen", "Home", FormMethod.Get)) {

    <fieldset>

            Movie Type

            @Html.DropDownList("MovieType")

        <p>

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

        </p>

    </fieldset>

}

Sur la troisième ligne, nous définissons la disposition sur Views/Shared/_Simple_Layout.cshtml, qui est une version simplifiée du fichier de disposition standard. Nous procédons ainsi pour que l’affichage et le rendu HTML restent simples.

Dans cet exemple, nous ne modifions pas l’état de l’application. Nous allons donc envoyer les données à l’aide d’un HTTP GET, et non de HTTP POST. Consultez la section W3C Liste de contrôle rapide pour choisir HTTP GET ou POST. Étant donné que nous ne modifions pas l’application et ne publions pas le formulaire, nous utilisons la surcharge Html.BeginForm qui nous permet de spécifier la méthode d’action, le contrôleur et la méthode de formulaire (HTTP POST ou HTTP GET). En règle générale, les vues contiennent la surcharge Html.BeginForm qui ne prend aucun paramètre. Par défaut, la version sans paramètre permet de publier les données de formulaire dans la version POST de la même méthode d’action et du même contrôleur.

La ligne suivante

@Html.DropDownList("MovieType")

transmet un argument de chaîne à l’assistance DropDownList . Cette chaîne, « MovieType » dans notre exemple, effectue deux opérations :

  • Il fournit la clé permettant à l’assistance DropDownList de rechercher un élément SelectListItem >IEnumerable< dans le ViewBag.
  • Il est lié aux données à l’élément de formulaire MovieType. Si la méthode d’envoi est HTTP GET, MovieType il s’agit d’une chaîne de requête. Si la méthode d’envoi est HTTP POST, MovieType sera ajouté dans le corps du message. L’image suivante montre la chaîne de requête avec la valeur 1.

Image de la chaîne de requête avec la valeur 1

Le code suivant montre la CategoryChosen méthode à laquelle le formulaire a été envoyé.

public ViewResult CategoryChosen(string MovieType) {

    ViewBag.messageString = MovieType;

    return View("Information");

}

Revenez à la page de test et sélectionnez le lien SelectList HTML . La page HTML affiche un élément select similaire à la page de test MVC simple ASP.NET. Cliquez avec le bouton droit sur la fenêtre du navigateur et sélectionnez afficher la source. Le balisage HTML de la liste de sélection est essentiellement identique. Testez la page HTML, elle fonctionne comme la méthode d’action MVC ASP.NET et affichez que nous avons testé précédemment.

Amélioration de la liste de sélection de films avec des énumérations

Si les catégories de votre application sont corrigées et ne changent pas, vous pouvez tirer parti des énumérations pour rendre votre code plus robuste et plus simple à étendre. Lorsque vous ajoutez une nouvelle catégorie, la valeur de catégorie appropriée est générée. évite les erreurs de copie et de collage lorsque vous ajoutez une nouvelle catégorie, mais oubliez de mettre à jour la valeur de la catégorie.

Ouvrez le fichier Controllers\HomeController.cs et examinez le code suivant :

public enum eMovieCategories { Action, Drama, Comedy, Science_Fiction };

private void SetViewBagMovieType(eMovieCategories selectedMovie) {

    IEnumerable<eMovieCategories> values = 

                      Enum.GetValues(typeof(eMovieCategories))

                      .Cast<eMovieCategories>();

    IEnumerable<SelectListItem> items =

        from value in values

        select new SelectListItem

        {

            Text = value.ToString(),

            Value = value.ToString(),

            Selected = value == selectedMovie,

        };

    ViewBag.MovieType = items;

}

public ActionResult SelectCategoryEnum() {

    SetViewBagMovieType(eMovieCategories.Drama);

    return View("SelectCategory");

}

L’énumérationeMovieCategories capture les quatre types de films. La SetViewBagMovieType méthode crée l’objet IEnumerable<SelectListItem > à partir de l’énumérationeMovieCategories et définit la Selected propriété à partir du selectedMovie paramètre . La SelectCategoryEnum méthode d’action utilise la même vue que la méthode d’action SelectCategory .

Accédez à la page Test et cliquez sur le Select Movie Category (Enum) lien. Cette fois, au lieu d’afficher une valeur (nombre), une chaîne représentant l’énumération s’affiche.

Publication de valeurs d’énumération

Les formulaires HTML sont généralement utilisés pour publier des données sur le serveur. Le code suivant montre les HTTP GET versions et HTTP POST de la SelectCategoryEnumPost méthode.

public ActionResult SelectCategoryEnumPost() {

    SetViewBagMovieType(eMovieCategories.Comedy);

    return View();

}

[HttpPost]

public ActionResult SelectCategoryEnumPost(eMovieCategories MovieType) {

    ViewBag.messageString = MovieType.ToString() +

                            " val = " + (int)MovieType;

    return View("Information");

}

En passant une eMovieCategories énumération à la POST méthode, nous pouvons extraire à la fois la valeur d’énumération et la chaîne d’énumération. Exécutez l’exemple et accédez à la page Test. Cliquez sur le Select Movie Category(Enum Post) lien. Sélectionnez un type de film, puis appuyez sur le bouton Envoyer. L’affichage affiche à la fois la valeur et le nom du type de film.

Image de la valeur et du nom du type de film

Création d’un élément select de section multiple

L’assistant HTML ListBox affiche l’élément HTML <select> avec l’attributmultiple, ce qui permet aux utilisateurs d’effectuer plusieurs sélections. Accédez au lien Test, puis sélectionnez le lien Sélectionner plusieurs pays . L’interface utilisateur rendue vous permet de sélectionner plusieurs pays. Dans l’image ci-dessous, le Canada et la Chine sont sélectionnés.

Image de la liste déroulante de sélections multiples

Examen du code MultiSelectCountry

Examinez le code suivant à partir du fichier Controllers\HomeController.cs .

private MultiSelectList GetCountries(string[] selectedValues) {

    List<Country> Countries = new List<Country>()

        {

            new Country() { ID = 1, Name= "United States" },

            new Country() { ID = 2, Name= "Canada" },

            new Country() { ID = 3, Name= "UK" },

            new Country() { ID = 4, Name= "China" },

            new Country() { ID = 5, Name= "Japan" }

        };

    return new MultiSelectList(Countries, "ID", "Name", selectedValues);

}

public ActionResult MultiSelectCountry() {

    ViewBag.Countrieslist = GetCountries(null);

    return View();

}

La GetCountries méthode crée une liste de pays, puis la transmet au MultiSelectList constructeur. La MultiSelectList surcharge de constructeur utilisée dans la GetCountries méthode ci-dessus prend quatre paramètres :

public MultiSelectList(

    IEnumerable items,

    string dataValueField,

    string dataTextField,

    IEnumerable selectedValues

)
  1. items : IEnumerable contenant les éléments de la liste. Dans l’exemple ci-dessus, la liste des pays.
  2. dataValueField : nom de la propriété dans la liste IEnumerable qui contient la valeur. Dans l’exemple ci-dessus, la ID propriété .
  3. dataTextField : nom de la propriété dans la liste IEnumerable qui contient les informations à afficher. Dans l’exemple ci-dessus, la name propriété .
  4. selectedValues : liste des valeurs sélectionnées.

Dans l’exemple ci-dessus, la MultiSelectCountry méthode transmet une null valeur pour les pays sélectionnés, de sorte qu’aucun pays n’est sélectionné lorsque l’interface utilisateur s’affiche. Le code suivant montre le balisage Razor utilisé pour afficher la MultiSelectCountry vue.

@{

    ViewBag.Title = "MultiSelect Country";

    Layout = "~/Views/Shared/_Simple_Layout.cshtml";

}

@if (ViewBag.YouSelected != null) {

    <div> You Selected:  @ViewBag.YouSelected</div>

}

@using (Html.BeginForm()) {

    <fieldset>

        <legend>Multi-Select Demo</legend>

        <div class="editor-field">

            @Html.ListBox("Countries", ViewBag.Countrieslist as MultiSelectList

            )

        </div>

        <p>

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

        </p>

    </fieldset>

}

La méthode ListBox de l’assistance HTML utilisée ci-dessus prend deux paramètres: le nom de la propriété à lier au modèle et le MultiSelectList contenant les options de sélection et les valeurs. Le ViewBag.YouSelected code ci-dessus est utilisé pour afficher les valeurs des pays que vous avez sélectionnés lorsque vous envoyez le formulaire. Examinez la surcharge HTTP POST de la MultiSelectCountry méthode.

[HttpPost]

public ActionResult MultiSelectCountry(FormCollection form) {

    ViewBag.YouSelected = form["Countries"];

    string selectedValues = form["Countries"];

    ViewBag.Countrieslist = GetCountries(selectedValues.Split(','));

    return View();

}

La ViewBag.YouSelected propriété dynamique contient les pays sélectionnés, obtenus pour l’entrée Countries dans la collection de formulaires. Dans cette version, la méthode GetCountries est transmise à une liste des pays sélectionnés. Ainsi, lorsque l’affichage MultiSelectCountry est affiché, les pays sélectionnés sont sélectionnés dans l’interface utilisateur.

Rendre un élément Select convivial avec le plug-in jQuery choisi Harvest

Le plug-in Harvest Chosen jQuery peut être ajouté à un élément HTML <select> pour créer une interface utilisateur conviviale. Les images ci-dessous illustrent le plug-in Harvest Chosen jQuery avec MultiSelectCountry vue.

Image du plug-in Harvest Chosen j Query

Dans les deux images ci-dessous, le Canada est sélectionné.

Image du Canada sélectionné

Image du Canada sélectionnée avec X à supprimer

Dans l’image ci-dessus, Canada est sélectionné et contient un x sur lequel vous pouvez cliquer pour supprimer la sélection. L’image ci-dessous montre le Canada, la Chine et le Japon sélectionnés.

Image du Canada, Chine et Japon sélectionnés

Raccordement au plug-in jQuery choisi Harvest

La section suivante est plus facile à suivre si vous avez de l’expérience avec jQuery. Si vous n’avez jamais utilisé jQuery auparavant, vous pouvez essayer l’un des didacticiels jQuery suivants.

Le plug-in Choisi est inclus dans les exemples de projets de démarrage et terminés qui accompagnent ce tutoriel. Pour ce tutoriel, vous devez uniquement utiliser jQuery pour le raccorder à l’interface utilisateur. Pour utiliser le plug-in Harvest Chosen jQuery dans un projet ASP.NET MVC, vous devez :

  1. Téléchargez le plug-in choisi à partir de github. Cette étape a été effectuée pour vous.
  2. Ajoutez le dossier Choisi à votre projet ASP.NET MVC. Ajoutez les ressources du plug-in Choisi que vous avez téléchargé à l’étape précédente dans le dossier Choisi. Cette étape a été effectuée pour vous.
  3. Raccordez le plug-in choisi à l’assistance HTML DropDownList ou ListBox .

Raccordement du plug-in choisi à l’affichage MultiSelectCountry.

Ouvrez le fichier Views\Home\MultiSelectCountry.cshtml et ajoutez un htmlAttributes paramètre à .Html.ListBox Le paramètre que vous allez ajouter contient un nom de classe pour la sélection list(@class = "chzn-select"). Le code terminé est illustré ci-dessous :

<div class="editor-field">

    @Html.ListBox("Countries", ViewBag.Countrieslist as MultiSelectList

     , new

     {

         @class = "chzn-select",

         data_placeholder = "Choose  Countries..."

     }

    )

</div>

Dans le code ci-dessus, nous ajoutons l’attribut HTML et la valeur class = "chzn-select"d’attribut . Le caractère @ qui précède la classe n’a rien à voir avec le moteur d’affichage Razor. classest un mot clé C#. Les mots clés C# ne peuvent pas être utilisés comme identificateurs, sauf s’ils incluent @ comme préfixe. Dans l’exemple ci-dessus, est un identificateur valide, @class mais la classe ne l’est pas, car la classe est un mot clé.

Ajoutez des références aux fichiers Chosen/chosen.jquery.js et Chosen/chosen.css . Choisi /chosen.jquery.js et implémente fonctionnellement le plug-in Choisi. Le fichier Chosen/chosen.css fournit le style. Ajoutez ces références au bas du fichier Views\Home\MultiSelectCountry.cshtml . Le code suivant montre comment référencer le plug-in Choisi.

<script src="@Url.Content("~/Chosen/chosen.jquery.js")" type="text/javascript"></script><script src="@Url.Content("~/Chosen/chosen.jquery.js")" type="text/javascript"></script>

<link href="@Url.Content("~/Chosen/chosen.css")" rel="stylesheet"  type="text/css" />

Activez le plug-in Choisi à l’aide du nom de classe utilisé dans le code Html.ListBox . Dans l’exemple ci-dessus, le nom de la classe est chzn-select. Ajoutez la ligne suivante au bas du fichier d’affichage Views\Home\MultiSelectCountry.cshtml . Cette ligne active le plug-in Choisi.

<script >    $(".chzn-select").chosen(); </script>  @*Hookup Chosen Plugin*@

La ligne suivante est la syntaxe permettant d’appeler la fonction jQuery ready, qui sélectionne l’élément DOM avec le nom chzn-selectde classe .

$(".chzn-select")

Le jeu encapsulé retourné à partir de l’appel ci-dessus applique ensuite la méthode choisie (.chosen();), qui raccorde le plug-in Choisi.

Le code suivant montre le fichier de vue Views\Home\MultiSelectCountry.cshtml terminé.

@{

    ViewBag.Title = "MultiSelect Country";

    Layout = "~/Views/Shared/_Simple_Layout.cshtml";

}

@if (ViewBag.YouSelected != null) {

    <div> You Selected:  @ViewBag.YouSelected</div>

}

@using (Html.BeginForm()) {

    <fieldset>

        <legend>Multi-Select Demo</legend>

<div class="editor-field">

    @Html.ListBox("Countries", ViewBag.Countrieslist as MultiSelectList

     , new

     {

         @class = "chzn-select"

     }

    )

</div>

        <p>

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

        </p>

    </fieldset>

}

<script src="@Url.Content("~/Chosen/chosen.jquery.js")" type="text/javascript"></script>

<link href="@Url.Content("~/Chosen/chosen.css")" rel="stylesheet"  type="text/css" />

<script >    $(".chzn-select").chosen(); </script> @*Hookup Chosen Plugin*@

Exécutez l’application et accédez à la MultiSelectCountry vue. Essayez d’ajouter et de supprimer des pays. L’exemple de téléchargement fourni contient également une méthode et une MultiCountryVM vue qui implémentent la fonctionnalité MultiSelectCountry à l’aide d’un modèle d’affichage au lieu d’un ViewBag.

Dans la section suivante, vous verrez comment le mécanisme de génération automatique ASP.NET MVC fonctionne avec l’assistance DropDownList .

Next