Pour afficher l’article en anglais, activez la case d’option Anglais. Vous pouvez aussi afficher la version anglaise dans une fenêtre contextuelle en faisant glisser le pointeur de la souris sur le texte.
Traduction
Anglais

Procédure pas à pas : utilisation des modèles de vues MVC

Lorsque vous concevez une application ASP.NET MVC dans Visual Studio, vous pouvez créer des contrôleurs et des vues prenant en charge la génération de modèles automatique de données. Cette procédure pas à pas indique comment créer une application MVC simple exploitant les modèles de données des contrôleurs et vues que Visual Studio prend en charge pour MVC.

Dans cette procédure pas à pas, vous allez ajouter un contrôleur contenant déjà des méthodes d'action pour l'affichage, la modification, et la mise à jour des données de modèle. En utilisant le processus de génération de modèles automatique de données qui est intégré à ASP.NET MVC, vous générerez également des vues basées sur le modèle que vous définissez.

Un projet Visual Studio (avec code source) est disponible pour accompagner cette rubrique : Téléchargement (page éventuellement en anglais).

Pour exécuter cette procédure pas à pas, vous avez besoin des éléments suivants :

  • Microsoft Visual Studio 2008 SP1 ou version ultérieure. Vous ne pouvez pas utiliser Microsoft Visual Web Developer Express Edition pour cette procédure pas à pas.

  • Infrastructure ASP.NET MVC 2. Si vous avez installé Visual Studio 2010, ASP.NET MVC 2 est déjà installé sur votre ordinateur. Pour télécharger la version la plus à jour de l'infrastructure, consultez la page Téléchargement d'ASP.NET MVC (page éventuellement en anglais).

Pour commencer, vous allez créer un projet ASP.NET MVC. Pour ne pas compliquer cette procédure pas à pas, vous ne créerez pas le projet de test qui est facultatif pour les projets ASP.NET MVC. Pour plus d'informations sur la création d'un projet MVC, consultez Walkthrough: Creating a Basic MVC Project with Unit Tests in Visual Studio.

Pour créer un projet MVC

  1. Dans le menu Fichier, cliquez sur Nouveau projet.

  2. Dans la boîte de dialogue Nouveau projet, sous Types de projets, développez Visual Basic ou Visual C#, puis cliquez sur Web.

  3. Sous Modèles Visual Studio installés, sélectionnez Application Web ASP.NET MVC 2.

  4. Dans la zone Nom, tapez MvcDataViews.

  5. Dans la zone Emplacement, entrez le nom du dossier du projet.

  6. Sélectionnez Créer le répertoire pour la solution.

  7. Cliquez sur OK.

  8. Dans la boîte de dialogue Créer un projet de test, sélectionnez Non, ne pas créer de projet de test unitaire.

    RemarqueRemarque :

    Si vous utilisez Visual Studio 2008 Standard, la boîte de dialogue Créer un projet de test unitaire ne s'affiche pas. Au lieu de cela, le nouveau projet d'application MVC est créé sans projet de test.

  9. Cliquez sur OK.

    Le nouveau projet d'application MVC est créé.

Cette procédure pas à pas utilise un modèle de données simple dont les valeurs seront ajoutées, modifiées et affichées à l'aide des modèles de vues. Vous allez créer une classe définissant une personne. Pour cette procédure pas à pas, la classe de personne inclut des propriétés correspondant à l'ID, au nom et à l'âge.

Pour créer une classe de modèle

  1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le dossier Models, puis cliquez sur Ajouter et sur Classe.

  2. Remplacez le nom de la classe par Person.vb ou Person.cs.

  3. Ajoutez le code suivant pour la classe Person :

    
    public class Person
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
    }
    
    
    
  4. Dans le menu Générer, cliquez sur Générer MvcDataViews pour générer le projet et créer une instance de l'objet Person.

    RemarqueRemarque :

    Cette étape est nécessaire car Visual Studio utilise l'instance de modèle lors de la génération du code de contrôleur et du balisage de vue en fonction des modèles MVC.

  5. Enregistrez et fermez le fichier.

Vous allez ensuite créer un contrôleur contenant des stubs de méthode d'action qui restitueront des vues de façon à créer, mettre à jour et afficher une liste d'objets Person.

Pour ajouter le contrôleur de gestion de données

  1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le dossier Controllers, puis cliquez sur Ajouter et sur Contrôleur.

  2. Nommez le contrôleur PersonController.

  3. Activez la case à cocher Ajouter des méthodes d'action pour les scénarios Create, Update et Details.

  4. Cliquez sur Ajouter.

    Le nouveau contrôleur est ajouté à l'application. Le contrôleur contient les méthodes d'action suivantes : Index, Details, Create (pour HTTP GET), Create (pour HTTP POST), Delete (pour HTTP GET) et Delete (pour HTTP POST), Edit (pour HTTP GET) et Edit (pour HTTP POST).

  5. Ajoutez la ligne de code suivante en haut de la classe PersonController :

    
    static List<Person> people = new List<Person>();
    
    
    

    Ce code crée une liste d'objets Person.

  6. Enregistrez le fichier.

Vous pouvez maintenant ajouter les vues de données. La première vue que vous créez est une vue Liste restituée par la méthode d'action Index. Cette vue affiche les objets Person que vous créez dans une grille. Chaque ligne inclut également des liens permettant d'afficher la personne dans une vue Details (Détails) ou une vue Edit (Édition).

Pour ajouter la vue Liste

  1. Ouvrez la classe PersonController ou basculez vers cette dernière dans l'éditeur, puis recherchez la méthode d'action Index.

  2. Cliquez avec le bouton droit dans la méthode d'action Index, puis cliquez sur Ajouter une vue.

  3. Dans la zone Nom de la vue, entrez Index.

  4. Activez la case à cocher Créer une vue fortement typée.

  5. Dans la liste Afficher la classe de données, sélectionnez MvcDataViews.Models.Person.

  6. Dans la liste Afficher le contenu, sélectionnez Liste.

    RemarqueRemarque :

    Laissez la case à cocher Sélectionner la page maître activée.

  7. Cliquez sur Ajouter.

    Une vue nommée Index est créée dans un nouveau dossier Person. La vue Index inclut le modèle MVC permettant d'afficher une liste de données.

  8. Dans la vue Index, recherchez les contrôles Html.ActionLink et modifiez-les comme indiqué dans l'exemple suivant :

    
    <%= Html.ActionLink("Edit", "Edit", new { id = item.Id })%> |
    <%= Html.ActionLink("Details", "Details", new { id = item.Id })%>
    
    
    
  9. Dans PersonController, remplacez la méthode d'action Index par le code suivant :

    
    public ActionResult Index()
    {
        return View(people);
    }
    
    
    
  10. Enregistrez les fichiers.

Vous allez ensuite ajouter une vue pour la création d'objets Person. Lorsque vous créez un objet Person, vous définissez le nom, l'âge et l'ID de la personne. La classe PersonController comporte deux méthodes d'action Create. Une méthode d'action Create reçoit une requête HTTP GET et restitue la vue Create (Création). L'autre méthode d'action Create reçoit la requête HTTP POST provenant de la vue Create (Création), vérifie la validité des données, ajoute les données à la liste et effectue une redirection vers la méthode d'action Index.

Pour ajouter la vue Create (Création)

  1. Ouvrez la classe PersonController ou basculez vers cette dernière dans l'éditeur, puis recherchez la méthode d'action Create qui gère HTTP GET.

  2. Cliquez avec le bouton droit dans la méthode d'action Create, puis cliquez sur Ajouter une vue.

  3. Dans la zone Nom de la vue, entrez Create.

  4. Activez la case à cocher Créer une vue fortement typée.

  5. Dans la liste Afficher la classe de données, sélectionnez MvcDataViews.Models.Person.

  6. Dans la liste Afficher le contenu, sélectionnez Create.

    RemarqueRemarque :

    Laissez la case à cocher Sélectionner la page maître activée.

  7. Cliquez sur Ajouter.

    Une vue nommée Create est ajoutée au projet.

  8. Dans PersonController, remplacez la méthode d'action Create qui gère HTTP POST par le code suivant :

    
    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Create(Person p)
    {
        if (!ModelState.IsValid)
        {
            return View("Create", p);
        }
    
        people.Add(p);
    
        return RedirectToAction("Index");
    }
    
    
    
  9. Enregistrez les fichiers.

La vue Details (Détails) affiche les valeurs d'un objet Person unique. Elle fournit également des liens permettant d'accéder à une vue d'édition (Edit) et de retourner à la vue Liste.

Pour ajouter la vue Details (Détails)

  1. Ouvrez la classe PersonController ou basculez vers cette dernière dans l'éditeur, puis recherchez la méthode d'action Details.

  2. Cliquez avec le bouton droit dans la méthode d'action Details, puis cliquez sur Ajouter une vue.

  3. Dans la zone Nom de la vue, entrez Details.

  4. Activez la case à cocher Créer une vue fortement typée.

  5. Dans la liste Afficher la classe de données, sélectionnez MvcDataViews.Models.Person.

  6. Dans la liste Afficher le contenu, sélectionnez Details.

    RemarqueRemarque :

    Laissez la case à cocher Sélectionner la page maître activée.

  7. Cliquez sur Ajouter.

    Une vue nommée Details est ajoutée au projet.

  8. Dans la vue Details, recherchez le contrôle Html.ActionLink établissant un lien vers la vue Edit et modifiez-le comme indiqué dans l'exemple suivant :

    
    <%=Html.ActionLink("Edit", "Edit", new { id=Model.Id }) %> |
    
    
    
  9. Dans PersonController, remplacez la méthode d'action Details par le code suivant :

    
    public ActionResult Details(int id)
    {
        Person p = new Person();
        foreach (Person pn in people)
        {
            if (pn.Id == id)
            {
                p.Name = pn.Name;
                p.Age = pn.Age;
                p.Id = pn.Id;
            }
        }
    
        return View(p);
    }
    
    
    
  10. Enregistrez les fichiers.

La vue Delete permet à l'utilisateur de supprimer un objet Person de la liste. L'utilisateur a la possibilité de supprimer l'objet Person sélectionné ou de revenir au mode Liste. La classe PersonController comporte deux méthodes d'action Delete. Une méthode d'action Delete reçoit une requête HTTP GET et restitue la vue Delete. L'autre méthode d'action Delete reçoit la requête HTTP POST provenant de la vue Delete, supprime l'objet sélectionné, et effectue une redirection vers la méthode d'action Index.

Pour ajouter la vue Details (Détails)

  1. Ouvrez la classe PersonController ou basculez vers cette dernière dans l'éditeur, puis recherchez la méthode d'action Details.

  2. Cliquez avec le bouton droit dans la méthode d'action Delete, puis cliquez sur Ajouter une vue.

  3. Dans la zone Nom de la vue, entrez Delete.

  4. Activez la case à cocher Créer une vue fortement typée.

  5. Dans la liste Afficher la classe de données, sélectionnez MvcDataViews.Models.Person.

  6. Dans la liste Afficher le contenu, sélectionnez Details.

    RemarqueRemarque :

    Laissez la case à cocher Sélectionner la page maître activée.

  7. Cliquez sur Ajouter.

    Une vue nommée Delete est ajoutée au projet.

  8. Dans PersonController, remplacez la méthode d'action Delete qui gère HTTP GET par le code suivant :

    
    public ActionResult Edit(int id)
    {
        Person p = new Person();
        foreach (Person pn in people)
        {
            if (pn.Id == id)
            {
                p.Name = pn.Name;
                p.Age = pn.Age;
                p.Id = pn.Id;
            }
        }
    
        return View(p);
    }
    
    
    
  9. Remplacez la méthode d'action Delete qui gère HTTP POST par le code suivant :

    
    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Edit(Person p)
    {
        if (!ModelState.IsValid)
        {
            return View("Edit", p);
        }
    
        foreach (Person pn in people)
        {
            if (pn.Id == p.Id)
            {
                pn.Name = p.Name;
                pn.Age = p.Age;
                pn.Id = p.Id;
            }
        }
    
        return RedirectToAction("Index");
    }
    
    
    
  10. Enregistrez les fichiers.

La vue Edit (Édition) permet à l'utilisateur de modifier les valeurs de l'un des objets Person. La classe PersonController comporte deux méthodes d'action Edit. Une méthode d'action Edit reçoit une requête HTTP GET et restitue la vue Edit (Édition). L'autre méthode d'action Edit reçoit la requête HTTP POST provenant de la vue Edit (Édition), vérifie la validité des données, met à jour les données dans l'objet Person approprié, puis effectue une redirection vers la méthode d'action Index.

Pour ajouter la vue Edit (Édition)

  1. Ouvrez la classe PersonController ou basculez vers cette dernière dans l'éditeur, puis recherchez la méthode d'action Edit qui gère HTTP GET.

  2. Remplacez la méthode d'action Edit par le code suivant :

  3. Cliquez avec le bouton droit dans la méthode d'action Edit, puis cliquez sur Ajouter une vue.

  4. Dans la zone Nom de la vue, entrez Edit.

  5. Activez la case à cocher Créer une vue fortement typée.

  6. Dans la liste Afficher la classe de données, sélectionnez MvcDataViews.Models.Person.

  7. Dans la liste Afficher le contenu, sélectionnez Edit.

  8. Laissez la case à cocher Sélectionner la page maître activée.

  9. Cliquez sur Ajouter.

    Une vue nommée Edit est ajoutée au projet.

  10. Dans PersonController, remplacez la méthode d'action Edit qui gère HTTP POST par le code suivant :

  11. Enregistrez et fermez les fichiers.

Pour terminer l'application, vous allez ajouter à la page d'accueil un lien vers la liste de personnes.

Pour établir un lien vers la liste de personnes

  1. Dans le dossier Home, ouvrez la vue Index.

  2. Ajoutez le balisage suivant sur la ligne après la balise </h2> :

    <p>
      <%=Html.ActionLink("Open Person List", "Index", "Person") %>
    </p>
    
  3. Enregistrez et fermez le fichier.

Vous pouvez maintenant compiler et exécuter l'application.

Pour tester l'application

  1. Appuyez sur CTRL+F5 pour démarrer l'application.

  2. Dans la page d'accueil, cliquez sur Ouvrir la liste de personnes.

  3. Cliquez sur Créer nouveau.

  4. Entrez des valeurs dans les champs Nom, Age, Téléphone, Courrier électronique et ID, puis cliquez sur Créer.

    La vue Index s'affiche ; elle inclut la personne ajoutée à la liste.

  5. Répétez l'étape précédente plusieurs fois pour entrer d'autres personnes.

  6. Dans la vue Index, cliquez sur l'un des liens Details.

    La vue Details s'affiche.

  7. Cliquez sur Retour à la liste.

  8. Cliquez sur l'un des liens Edit.

    La vue Edit s'affiche.

  9. Modifiez le nom ou l'âge d'une personne, puis cliquez sur Mettre à jour.

    La vue Index s'affiche de nouveau avec les champs de données mis à jour.

  10. Cliquez sur l'un des liens Delete.

    La vue Delete s'affiche.

  11. Cliquez sur le bouton Supprimer.

    La vue Index est à nouveau affichée avec l'entrée sélectionnée supprimée.

L'exemple de code complet pour cette procédure pas à pas est disponible en tant que projet Visual Studio : Télécharger (page éventuellement en anglais).

Ajouts de la communauté

AJOUTER
Afficher: