Ajout d’une nouvelle catégorie au contrôle DropDownList avec l’interface utilisateur jQuery

Article
08/24/2024

La balise HTML Select est idéale pour présenter une liste de données de catégorie fixes, mais souvent, vous devez ajouter une nouvelle catégorie. Supposons que nous voulons ajouter le genre « Opera » aux catégories de notre base de données ? Dans cette section, nous allons utiliser l’interface utilisateur jQuery pour ajouter une boîte de dialogue que nous pouvons utiliser pour ajouter une nouvelle catégorie. L’image ci-dessous montre comment l’interface utilisateur sera présente dans le navigateur.

Image de U I dans une fenêtre de navigateur

Lorsqu’un utilisateur sélectionne le lien Ajouter un nouveau genre , une boîte de dialogue contextuelle invite l’utilisateur à entrer un nouveau nom de genre (et éventuellement une description). L’image ci-dessous montre la boîte de dialogue Ajouter un genre contextuel.

Image de la boîte de dialogue contextuelle ajouter un genre

Lorsqu’un nouveau nom de genre est entré et que le bouton Enregistrer est poussé, ce qui suit se produit :

Un appel AJAX publie les données dans la méthode Create du contrôleur de genre, qui enregistre le nouveau genre dans la base de données et retourne les nouvelles informations de genre (nom de genre et ID) en tant que JSON.
JavaScript ajoute les nouvelles données de genre à la liste de sélection.
JavaScript rend le nouveau genre l’élément sélectionné.

Dans l’image ci-dessous, Opera a été ajouté à la base de données et sélectionné dans la liste déroulante Genre .

Image de la sélection de liste déroulante

Ouvrez le fichier Views\StoreManager\Create.cshtml et remplacez le balisage de genre par le code suivant :

<div class="editor-field ui-widget">

     @Html.Partial("_ChooseGenre")

</div>

La _ChooseGenre vue partielle contiendra toute la logique permettant de raccorder le code JavaScript et jQuery utilisé pour implémenter la fonctionnalité ajouter un nouveau genre. Une fois que nous avons terminé le code, il sera simple de faire de même avec l’interface utilisateur de l’artiste.

Dans Explorateur de solutions, cliquez avec le bouton droit sur le dossier Views\StoreManager, puis sélectionnez Ajouter, puis Afficher. Dans l’entrée Du nom d’affichage, entrez_ChooseGenre, puis sélectionnez Ajouter. Remplacez le balisage dans le fichier Views\StoreManager\_ChooseGenre.cshtml par les éléments suivants :

@model MvcMusicStore.Models.Album

<div class="editor-label">

    @Html.LabelFor(model => model.GenreId, "Genre" )

</div>

@Html.DropDownList("GenreId", ViewBag.Genres as SelectList, String.Empty)

<a class="button" href="@Url.Content("~/Genre/Create")" 

    id="genreAddLink">Add New Genre</a>

@Html.ValidationMessageFor(model => model.GenreId)

<div id="genreDialog" class="hidden">

</div>

<script src="@Url.Content( "~/Scripts/ui/jquery.ui.combobox.js" )"></script>

<script src="@Url.Content("~/Scripts/chooseGenre.js")"></script>

La première ligne déclare que nous transmettons un Album modèle en tant que modèle, exactement la même instruction de modèle trouvée dans la vue Créer. Les lignes suivantes sont le balisage de l’assistance d’étiquette. La ligne suivante est l’appel d’assistance DropDownList , exactement identique à celui de la vue Créer d’origine. La ligne suivante ajoute un lien portant le nom Add New Genreet le styles comme un bouton. La ligne contenant ValidationMessageFor est copiée directement à partir de la vue Créer. Les lignes suivantes :

<div id="genreDialog" class="hidden">

</div>

crée une div masquée, avec l’ID de genreDialog. Nous allons utiliser jQuery pour raccorder notre boîte de dialogue Ajouter un genre avec l’ID genreDialog dans cette div. Les deux dernières balises de script contiennent des liens vers les fichiers JavaScript que nous allons utiliser pour implémenter la nouvelle fonctionnalité d’ajout de genre. Le fichier /Scripts/chooseGenre.js est fourni pour vous dans le projet, nous allons l’examiner plus loin dans le tutoriel.

Exécutez l’application et cliquez sur le bouton Ajouter un nouveau genre . Dans la boîte de dialogue Ajouter un genre , entrez Opera dans la zone d’entrée Nom .

Image de la boîte de dialogue Ajouter un genre

Cliquez sur le bouton Enregistrer . Un appel AJAX crée la catégorie Opera, puis remplit la liste déroulante avec Opera et définit Opera comme genre sélectionné.

Image de la liste déroulante renseignée

Entrez un artiste, un titre et un prix, puis sélectionnez le bouton Créer . Si vous entrez un prix inférieur à 8,99 $, le nouvel album apparaît en haut de la vue Index. Vérifiez que la nouvelle entrée d’album a été enregistrée dans la base de données.

Image vérifiant que la nouvelle entrée d’album a été enregistrée dans la base de données

Essayez de créer un nouveau genre avec une seule lettre. Le code suivant dans le fichier Models\Genre.cs définit la longueur minimale et maximale du nom du genre.

[StringLength(20, MinimumLength = 2)]
public string Name { get; set; }

Les rapports de validation côté client, vous devez entrer une chaîne comprise entre 2 et 20 caractères.

Image de la validation côté client

Examen de la façon dont un nouveau genre est ajouté à la base de données et à la liste de sélections.

Ouvrez le fichier Scripts\chooseGenre.js et examinez le code.

$(function () {

    $('#genreDialog').dialog({

        autoOpen: false,

        width: 400,

        height: 300,

        modal: true,

        title: 'Add Genre',

        buttons: {

            'Save': function () {

                // Omitted 

            },

            'Cancel': function () {

                $(this).dialog('close');

            }

        }

    });

La deuxième ligne utilise l’ID genreDialog pour créer une boîte de dialogue sur la balise div dans le fichier Views\StoreManager\_ChooseGenre.cshtml . La plupart des paramètres nommés sont explicites. Le autoOpen paramètre est défini sur false, en sélectionnant le bouton Créer un genre , le dialogue s’ouvre explicitement (ce qui est décrit ci-dessus). La boîte de dialogue comporte deux boutons, Enregistrer et Annuler. Le bouton Annuler ferme la boîte de dialogue. Le code suivant montre la fonction Enregistrer le bouton.

'Save': function () {

    var createGenreForm = $('#createGenreForm');

    if (createGenreForm.valid()) {

        $.post(createGenreForm.attr('action'), createGenreForm.serialize(), function (data) {

            if (data.Error != '') {

                alert(data.Error);

            }

            else {

                // Add the new genre to the dropdown list and select it

                $('#GenreId').append(

                        $('<option></option>')

                            .val(data.Genre.GenreId)

                            .html(data.Genre.Name)

                            .prop('selected', true)  // Selects the new Genre in the DropDown LB

                    );

                $('#genreDialog').dialog('close');

            }

        });

    }

},

La var createGenreForm valeur est sélectionnée à partir de l’ID createGenreForm . L’ID createGenreForm a été défini dans le code suivant trouvé dans le fichier Views\Genre\_CreateGenre.cshtml .

@model MvcMusicStore.Models.Genre

@using (Html.BeginForm("Create", "Genre", FormMethod.Post, new { id = "createGenreForm" }))

{

    @*Omitted for clarity.*@

}

La surcharge d’assistance Html.BeginForm utilisée dans le fichier Views\Genre\_CreateGenre.cshtml génère du code HTML avec un attribut d’action contenant l’URL pour envoyer le formulaire. Vous pouvez le voir en affichant la page créer un album dans un navigateur et en sélectionnant afficher la source dans le navigateur. Le balisage suivant montre le code HTML généré contenant la balise de formulaire.

<form action="/StoreManager/Create" method="post">

La ligne jQuery $.post effectue un appel AJAX à l’attribut d’action (/StoreManager/Create) et passe les données de la boîte de dialogue Créer un genre . Les données se composent du nom du nouveau genre et d’une description facultative. Si l’appel AJAX réussit, le nouveau nom de genre et la nouvelle valeur sont ajoutés au balisage Select, et le nouveau genre est défini sur la valeur sélectionnée. Étant donné que ce balisage est généré dynamiquement, vous ne pouvez pas voir la nouvelle option de sélection en affichant la source dans le navigateur. Vous pouvez voir le nouveau code HTML avec les outils de développement IE 9 F12. Pour afficher la nouvelle option select, dans Internet Explorer 9, appuyez sur la touche F12 pour démarrer les outils de développement F12. Accédez à la page Créer et ajoutez un nouveau genre afin que le nouveau genre soit sélectionné dans la liste de sélection de genre. Dans les outils de développement F12 :

Sélectionnez l’onglet HTML.
Appuyez sur l’icône d’actualisation.
Dans la zone de recherche, entrez GenreID.
À l’aide de l’icône suivante,

Accédez à la balise de sélection suivante :
```
<select name="GenreId" id="GenreId" >
```
Développez la dernière valeur d’option.

Image de la vue développée

Le code suivant dans le fichier Scripts\chooseGenre.js montre comment le bouton Ajouter un nouveau genre est connecté à l’événement click et comment la boîte de dialogue Ajouter un nouveau genre est créée.

$('#genreAddLink').click(function () {

    var createFormUrl = $(this).attr('href');  

    $('#genreDialog').html('')

    .load(createFormUrl, function () {  

        // The createGenreForm is loaded on the fly using jQuery load. 

        // In order to have client validation working it is necessary to tell the 

        // jQuery.validator to parse the newly added content

        jQuery.validator.unobtrusive.parse('#createGenreForm');

        $('#genreDialog').dialog('open');

    });

    return false;

});

La première ligne crée une fonction de clic attachée au bouton Ajouter un nouveau genre . Le balisage suivant à partir du fichier Views\StoreManager\_ChooseGenre.cshtml montre comment le bouton Ajouter un nouveau genre est créé :

<a class="button" href="@Url.Content("~/Genre/Create")" 

    id="genreAddLink">Add New Genre</a>

La méthode de chargement crée et ouvre la boîte de dialogue Ajouter un genre et appelle la méthode jQuery parse afin que la validation du client se produise sur les données entrées dans la boîte de dialogue.

Dans cette section, vous avez appris à créer une boîte de dialogue qui peut être utilisée pour ajouter de nouvelles données de catégorie à une liste de sélection. Vous pouvez suivre la même procédure pour créer une interface utilisateur pour ajouter un nouvel artiste à la liste de sélections d’artistes. Ce tutoriel a donné une vue d’ensemble de l’utilisation de l’ASP.NET DropDownList de l’assistance HTML MVC. Pour plus d’informations sur l’utilisation de DropDownList, consultez la section références supplémentaires ci-dessous. Veuillez nous informer si ce tutoriel a été utile.

Références supplémentaires

ASP.NET Didacticiel sur les listes déroulantes en cascade de Radu Enuca
Choisissez un plug-in JavaScript qui prend en charge le filtrage et la sélection multiples.

Contributeurs

Radu Enuca
Jean-Sébastien Goupil
Brad Wilson

Réviseurs

Jean-Sébastien Goupil
Brad Wilson
Mike Pope
Tom Dykstra

Partager via

Ajout d’une nouvelle catégorie au contrôle DropDownList avec l’interface utilisateur jQuery

Examen de la façon dont un nouveau genre est ajouté à la base de données et à la liste de sélections.

Références supplémentaires

Contributeurs

Réviseurs

Commentaires

Ressources supplémentaires