Créer une application de base de données de films en 15 minutes avec ASP.NET MVC (C#)

par Stephen Walther

Télécharger le code

Stephen Walther crée une application MVC ASP.NET basée sur la base de données du début à la fin. Ce tutoriel est une excellente introduction pour les personnes qui débutent avec l’infrastructure ASP.NET MVC et qui souhaitent se faire une idée du processus de création d’une application MVC ASP.NET.

L’objectif de ce tutoriel est de vous donner une idée de « ce que c’est » pour créer une application ASP.NET MVC. Dans ce tutoriel, j’ai commencé à créer une application MVC ASP.NET entière du début à la fin. Je vous montre comment créer une application simple basée sur une base de données qui illustre comment répertorier, créer et modifier des enregistrements de base de données.

Pour simplifier le processus de création de notre application, nous allons tirer parti des fonctionnalités de génération de modèles automatique de Visual Studio 2008. Nous allons laisser Visual Studio générer le code et le contenu initiaux pour nos contrôleurs, modèles et vues.

Si vous avez travaillé avec Active Server Pages ou ASP.NET, vous devriez trouver ASP.NET MVC très familier. ASP.NET vues MVC sont très similaires aux pages d’une application Active Server Pages. Et, à l’instar d’une application ASP.NET Web Forms traditionnelle, ASP.NET MVC vous offre un accès complet à l’ensemble complet de langages et de classes fournis par le .NET Framework.

J’espère que ce tutoriel vous donnera une idée de la façon dont l’expérience de création d’une application MVC ASP.NET est à la fois similaire et différente de l’expérience de création d’une application Active Server Pages ou ASP.NET Web Forms.

Vue d’ensemble de l’application Movie Database

Étant donné que notre objectif est de simplifier les choses, nous allons créer une application de base de données de films très simple. Notre application Movie Database simple nous permet d’effectuer trois opérations :

  1. Répertorier un ensemble d’enregistrements de base de données de films
  2. Créer un enregistrement de base de données de films
  3. Modifier un enregistrement de base de données de films existant

Là encore, comme nous voulons simplifier les choses, nous allons tirer parti du nombre minimal de fonctionnalités de l’infrastructure ASP.NET MVC nécessaires pour créer notre application. Par exemple, nous ne tirerons pas parti du développement Test-Driven.

Pour créer notre application, nous devons effectuer chacune des étapes suivantes :

  1. Créer le projet d’application web ASP.NET MVC
  2. Création de la base de données
  3. Créer le modèle de base de données
  4. Créer le contrôleur MVC ASP.NET
  5. Créer les vues MVC ASP.NET

Étapes préalables

Vous aurez besoin de Visual Studio 2008 ou de Visual Web Developer 2008 Express pour générer une application ASP.NET MVC. Vous devez également télécharger l’infrastructure MVC ASP.NET.

Si vous ne possédez pas Visual Studio 2008, vous pouvez télécharger une version d’évaluation de 90 jours de Visual Studio 2008 à partir de ce site web :

https://msdn.microsoft.com/vs2008/products/cc268305.aspx

Vous pouvez également créer ASP.NET applications MVC avec Visual Web Developer Express 2008. Si vous décidez d’utiliser Visual Web Developer Express, le Service Pack 1 doit être installé. Vous pouvez télécharger Visual Web Developer 2008 Express avec Service Pack 1 à partir de ce site web :

https://www.microsoft.com/downloads/details.aspx?FamilyId=BDB6391C-05CA-4036-9154-6DF4F6DEBD14& displaylang=en

Après avoir installé Visual Studio 2008 ou Visual Web Developer 2008, vous devez installer l’infrastructure ASP.NET MVC. Vous pouvez télécharger l’infrastructure ASP.NET MVC à partir du site web suivant :

https://www.asp.net/mvc/

Notes

Au lieu de télécharger l’infrastructure ASP.NET et l’infrastructure MVC ASP.NET individuellement, vous pouvez tirer parti du programme d’installation de la plateforme web. Web Platform Installer est une application qui vous permet de gérer facilement les applications installées sur votre ordinateur :

https://www.microsoft.com/web/gallery/Install.aspx

Création d’un projet d’application web MVC ASP.NET

Commençons par créer un projet d’application web ASP.NET MVC dans Visual Studio 2008. Sélectionnez l’option de menu Fichier, Nouveau projet et la boîte de dialogue Nouveau projet s’affiche dans la figure 1. Sélectionnez C# comme langage de programmation et sélectionnez le modèle de projet application web ASP.NET MVC. Donnez à votre projet le nom MovieApp et cliquez sur le bouton OK.

Capture d’écran de la boîte de dialogue Nouveau projet, qui montre le modèle d’application web ASP dot Net MVC sélectionné et Movie App dans le champ Nom.

Figure 01 : Boîte de dialogue Nouveau projet (Cliquer pour afficher l’image en taille réelle)

Veillez à sélectionner .NET Framework 3.5 dans la liste déroulante située en haut de la boîte de dialogue Nouveau projet, sinon le modèle de projet application web ASP.NET MVC n’apparaîtra pas.

Chaque fois que vous créez un projet d’application web MVC, Visual Studio vous invite à créer un projet de test unitaire distinct. La boîte de dialogue de la figure 2 s’affiche. Étant donné que nous ne créerons pas de tests dans ce didacticiel en raison de contraintes de temps (et, oui, nous devrions nous sentir un peu coupables à ce sujet), sélectionnez l’option Non et cliquez sur le bouton OK .

Notes

Visual Web Developer ne prend pas en charge les projets de test.

Capture d’écran de Créer un projet de test unitaire, qui montre Non, ne créez pas de projet de test unitaire sélectionné.

Figure 02 : Boîte de dialogue Créer un projet de test unitaire (cliquer pour afficher l’image en taille réelle)

Une application MVC ASP.NET a un ensemble standard de dossiers : un dossier Modèles, Vues et Contrôleurs. Vous pouvez voir cet ensemble standard de dossiers dans la fenêtre Explorateur de solutions. Nous devons ajouter des fichiers à chacun des dossiers Modèles, Vues et Contrôleurs afin de créer notre application Movie Database.

Lorsque vous créez une application MVC avec Visual Studio, vous obtenez un exemple d’application. Comme nous voulons commencer à zéro, nous devons supprimer le contenu de cet exemple d’application. Vous devez supprimer le fichier suivant et le dossier suivant :

  • Controllers\HomeController.cs
  • Vues\Accueil

Création de la base de données

Nous devons créer une base de données pour contenir nos enregistrements de base de données de films. Heureusement, Visual Studio inclut une base de données gratuite nommée SQL Server Express. Pour créer la base de données, procédez comme suit :

  1. Cliquez avec le bouton droit sur le dossier App_Data dans la fenêtre Explorateur de solutions et sélectionnez l’option de menu Ajouter, Nouvel élément.
  2. Sélectionnez la catégorie Données et sélectionnez le modèle Base de données SQL Server (voir la figure 3).
  3. Nommez votre nouvelle base de données MoviesDB.mdf , puis cliquez sur le bouton Ajouter .

Après avoir créé votre base de données, vous pouvez vous connecter à la base de données en double-cliquant sur le fichier MoviesDB.mdf situé dans le dossier App_Data. En double-cliquant sur le fichier MoviesDB.mdf, la fenêtre server Explorer s’ouvre.

Notes

La fenêtre Server Explorer est nommée fenêtre Database Explorer dans le cas de Visual Web Developer.

Capture d’écran de la fenêtre Ajouter un nouvel élément, qui montre SQL Server base de données est sélectionnée et Movies DB dot m d f est entré dans la zone Nom.

Figure 03 : Création d’une base de données Microsoft SQL Server (Cliquer pour afficher l’image en taille réelle)

Ensuite, nous devons créer une table de base de données. Dans la fenêtre Sever Explorer, cliquez avec le bouton droit sur le dossier Tables et sélectionnez l’option de menu Ajouter une nouvelle table. La sélection de cette option de menu ouvre le concepteur de tables de base de données. Créez les colonnes de base de données suivantes :

Nom de la colonne Type de données Null autorisé
Id Int False
Titre Nvarchar(100) Faux
Directeur Nvarchar(100) False
DateReleased DateTime False

La première colonne, la colonne Id, a deux propriétés spéciales. Tout d’abord, vous devez marquer la colonne Id comme colonne clé primaire. Après avoir sélectionné la colonne Id, cliquez sur le bouton Définir la clé primaire (il s’agit de l’icône qui ressemble à une clé). Deuxièmement, vous devez marquer la colonne Id en tant que colonne Identité. Dans le Fenêtre Propriétés colonne, faites défiler jusqu’à la section Identity Specification (Spécification de l’identité), puis développez-la. Remplacez la propriété Is Identity par la valeur Oui. Lorsque vous avez terminé, le tableau doit ressembler à la figure 4.

Capture d’écran de Microsoft Visual Studio, montrant la table de base de données Movies terminée et la propriété Is Identity définie sur Oui.

Figure 04 : Table de base de données Movies (cliquer pour afficher l’image en taille réelle)

La dernière étape consiste à enregistrer la nouvelle table. Cliquez sur le bouton Enregistrer (icône de la disquette) et donnez à la nouvelle table le nom Movies.

Une fois la création de la table terminée, ajoutez des enregistrements vidéo à la table. Cliquez avec le bouton droit sur la table Movies dans la fenêtre Server Explorer et sélectionnez l’option de menu Afficher les données de table. Entrez la liste de vos films favoris (voir la figure 5).

Capture d’écran de la fenêtre Microsoft Visual Studio, qui montre un tableau permettant de saisir des informations sur les films, notamment l’ID, le titre, le directeur et la date de publication.

Figure 05 : Saisie d’enregistrements vidéo (Cliquer pour afficher l’image en taille réelle)

Création du modèle

Nous devons ensuite créer un ensemble de classes pour représenter notre base de données. Nous devons créer un modèle de base de données. Nous allons tirer parti de Microsoft Entity Framework pour générer automatiquement les classes de notre modèle de base de données.

Notes

Le ASP.NET framework MVC n’est pas lié à Microsoft Entity Framework. Vous pouvez créer vos classes de modèle de base de données en tirant parti de divers outils de mappage relationnel d’objet (OR/M), notamment LINQ to SQL, Subsonic et NHibernate.

Pour lancer l’Assistant Entity Data Model, procédez comme suit :

  1. Cliquez avec le bouton droit sur le dossier Models dans la fenêtre Explorateur de solutions et sélectionnez l’option de menu Ajouter, Nouvel élément.
  2. Sélectionnez la catégorie Données et sélectionnez le modèle ADO.NET Entity Data Model .
  3. Donnez à votre modèle de données le nom MoviesDBModel.edmx , puis cliquez sur le bouton Ajouter .

Une fois que vous avez cliqué sur le bouton Ajouter, l’Assistant Modèle de données d’entité s’affiche (voir la figure 6). Pour terminer l’Assistant, procédez comme suit :

  1. À l’étape Choisir le contenu du modèle , sélectionnez l’option Générer à partir de la base de données .
  2. À l’étape Choisir votre connexion de données , utilisez la connexion de données MoviesDB.mdf et le nom MoviesDBEntities pour les paramètres de connexion. Cliquez sur le bouton Suivant.
  3. À l’étape Choisir vos objets de base de données , développez le nœud Tables, puis sélectionnez la table Movies. Entrez l’espace de noms MovieApp.Models , puis cliquez sur le bouton Terminer .

Capture d’écran de la zone Assistant Entity Data Model, qui montre l’icône Générer à partir de la base de données sélectionnée.

Figure 06 : Génération d’un modèle de base de données avec l’Assistant Modèle de données d’entité (cliquer pour afficher l’image en taille réelle)

Une fois l’Assistant Modèle de données d’entité terminé, le Designer Entity Data Model s’ouvre. Le Designer doit afficher la table de base de données Movies (voir la figure 7).

Capture d’écran de l’Designer Entity Data Model, qui montre la table de base de données Movies.

Figure 07 : Le modèle de données d’entité Designer (cliquer pour afficher l’image en taille réelle)

Nous devons apporter un changement avant de continuer. L’Assistant Entity Data génère une classe de modèle nommée Movies qui représente la table de base de données Movies. Étant donné que nous allons utiliser la classe Movies pour représenter un film particulier, nous devons modifier le nom de la classe pour qu’il soit Movie au lieu de Movies (au singulier plutôt qu’au pluriel).

Double-cliquez sur le nom de la classe sur l’aire du concepteur et remplacez le nom de la classe Movies par Movie. Après avoir effectué cette modification, cliquez sur le bouton Enregistrer (icône de la disquette) pour générer la classe Movie.

Création du contrôleur ASP.NET MVC

L’étape suivante consiste à créer le contrôleur ASP.NET MVC. Un contrôleur est chargé de contrôler la façon dont un utilisateur interagit avec une application MVC ASP.NET.

Procédez comme suit :

  1. Dans la fenêtre Explorateur de solutions, cliquez avec le bouton droit sur le dossier Contrôleurs et sélectionnez l’option de menu Ajouter, Contrôleur.
  2. Dans la boîte de dialogue Ajouter un contrôleur, entrez le nom HomeController et case activée la case à cocher Ajouter des méthodes d’action pour les scénarios Créer, Mettre à jour et Détails (voir figure 8).
  3. Cliquez sur le bouton Ajouter pour ajouter le nouveau contrôleur à votre projet.

Une fois ces étapes terminées, le contrôleur dans la liste 1 est créé. Notez qu’il contient des méthodes nommées Index, Details, Create et Edit. Dans les sections suivantes, nous allons ajouter le code nécessaire pour que ces méthodes fonctionnent.

Capture d’écran de la zone Ajouter un contrôleur, qui montre Home Controller entrée et la case Ajouter une action cochée.

Figure 08 : Ajout d’une nouvelle ASP.NET contrôleur MVC (cliquer pour afficher l’image en taille réelle)

Listing 1 – Controllers\HomeController.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.Web.Mvc.Ajax; 

namespace MovieApp.Controllers

{

    public class HomeController : Controller

    {

        //

        // GET: /Home/ 

        public ActionResult Index()

        {

            return View();

        } 

        //

        // GET: /Home/Details/5 

        public ActionResult Details(int id)

        {

            return View();

        } 

        //

        // GET: /Home/Create 

        public ActionResult Create()

        {

            return View();

        }  

        //

        // POST: /Home/Create 

        [AcceptVerbs(HttpVerbs.Post)]

        public ActionResult Create(FormCollection collection)

        {

            try

            {

                // TODO: Add insert logic here 

                return RedirectToAction("Index");

            }

            catch

            {

                return View();

            }

        } 

        //

        // GET: /Home/Edit/5

        public ActionResult Edit(int id)

        {

            return View();

        } 

        //

        // POST: /Home/Edit/5 

        [AcceptVerbs(HttpVerbs.Post)]

        public ActionResult Edit(int id, FormCollection collection)

        {

            try

            {

                // TODO: Add update logic here

                return RedirectToAction("Index");

            }

            catch

            {

                return View();

            }

        }

    }

}

Liste des enregistrements de base de données

La méthode Index() du contrôleur Home est la méthode par défaut pour une application MVC ASP.NET. Lorsque vous exécutez une application ASP.NET MVC, la méthode Index() est la première méthode de contrôleur appelée.

Nous allons utiliser la méthode Index() pour afficher la liste des enregistrements de la table de base de données Movies. Nous allons tirer parti des classes de modèle de base de données que nous avons créées précédemment pour récupérer les enregistrements de la base de données de films avec la méthode Index().

J’ai modifié la classe HomeController dans la liste 2 afin qu’elle contienne un nouveau champ privé nommé _db. La classe MoviesDBEntities représente notre modèle de base de données et nous allons utiliser cette classe pour communiquer avec notre base de données.

J’ai également modifié la méthode Index() dans la liste 2. La méthode Index() utilise la classe MoviesDBEntities pour récupérer tous les enregistrements vidéo de la table de base de données Movies. Expression _db. MovieSet.ToList() retourne une liste de tous les enregistrements de films de la table de base de données Movies.

La liste des films est passée à l’affichage. Tout ce qui est passé à la méthode View() est passé à la vue en tant que données d’affichage.

Listing 2 – Controllers/HomeController.cs (méthode Index modifiée)

using System.Linq;

using System.Web.Mvc;

using MovieApp.Models; 

namespace MovieApp.Controllers

{

    public class HomeController : Controller

    {

        private MoviesDBEntities _db = new MoviesDBEntities(); 

        public ActionResult Index()

        {

            return View(_db.MovieSet.ToList());

        }

    }

}

La méthode Index() retourne une vue nommée Index. Nous devons créer cette vue pour afficher la liste des enregistrements de la base de données de films. Procédez comme suit :

Vous devez générer votre projet (sélectionnez l’option de menu Générer, Générer une solution) avant d’ouvrir la boîte de dialogue Ajouter une vue , sinon aucune classe n’apparaît dans la liste déroulante Afficher la classe de données .

  1. Cliquez avec le bouton droit sur la méthode Index() dans l’éditeur de code et sélectionnez l’option de menu Ajouter une vue (voir figure 9).
  2. Dans la boîte de dialogue Ajouter une vue, vérifiez que la case à cocher Créer une vue fortement typée est cochée .
  3. Dans la liste déroulante Afficher le contenu , sélectionnez la valeur Liste.
  4. Dans la liste déroulante Afficher la classe de données , sélectionnez la valeur MovieApp.Models.Movie.
  5. Cliquez sur le bouton Ajouter pour créer la nouvelle vue (voir figure 10).

Une fois ces étapes terminées, une nouvelle vue nommée Index.aspx est ajoutée au dossier Views\Home. Le contenu de la vue Index est inclus dans la liste 3.

Capture d’écran de l’éditeur de code, qui montre la zone de liste déroulante clic droit avec l’option Ajouter une vue sélectionnée.

Figure 09 : Ajout d’une vue à partir d’une action de contrôleur (Cliquer pour afficher l’image en taille réelle)

Capture d’écran de la zone Ajouter une vue, qui montre le nom de l’affichage, Index, et montre Créer un affichage fortement typé et Sélectionner master entrées de page sélectionnées.

Figure 10 : Création d’une vue à l’aide de la boîte de dialogue Ajouter une vue (Cliquer pour afficher l’image en taille réelle)

Listing 3 – Views\Home\Index.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MovieApp.Models.Movie>>" %> 

    <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

       Index

    </asp:Content> 

    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 

        <h2>Index</h2> 

        <table>

            <tr>

                <th></th>

                <th>

                    Id

                </th>

                <th>

                    Title

                </th>

                <th>

                    Director

                </th>

                <th>

                    DateReleased

                </th>

            </tr> 

        <% foreach (var item in Model) { %>

            <tr>

                <td>

                    <%= Html.ActionLink("Edit", "Edit", new { id=item.Id }) %> |

                    <%= Html.ActionLink("Details", "Details", new { id=item.Id })%>

                </td>

                <td>

                    <%= Html.Encode(item.Id) %>

                </td>

                <td>

                    <%= Html.Encode(item.Title) %>

                </td>

                <td>

                    <%= Html.Encode(item.Director) %>

                </td>

                <td>

                    <%= Html.Encode(String.Format("{0:g}", item.DateReleased)) %>

                </td>

            </tr>

        <% } %> 

        </table> 

        <p>

            <%= Html.ActionLink("Create New", "Create") %>

        </p> 

    </asp:Content>

La vue Index affiche tous les enregistrements vidéo de la table de base de données Movies dans une table HTML. La vue contient une boucle foreach qui itère au sein de chaque film représenté par la propriété ViewData.Model. Si vous exécutez votre application en appuyant sur la touche F5, vous verrez la page web dans la figure 11.

Capture d’écran de la vue Index, qui montre des informations sur le film, notamment l’ID, le titre, le réalisateur et la date de publication.

Figure 11 : Affichage Index (cliquer pour afficher l’image en taille réelle)

Création d’enregistrements de base de données

La vue Index que nous avons créée dans la section précédente inclut un lien permettant de créer des enregistrements de base de données. Allons-y et implémentons la logique et créez la vue nécessaire pour créer de nouveaux enregistrements de base de données de films.

Le contrôleur d’accueil contient deux méthodes nommées Create(). La première méthode Create() n’a aucun paramètre. Cette surcharge de la méthode Create() permet d’afficher le formulaire HTML permettant de créer un enregistrement de base de données vidéo.

La deuxième méthode Create() a un paramètre FormCollection. Cette surcharge de la méthode Create() est appelée lorsque le formulaire HTML permettant de créer un film est publié sur le serveur. Notez que cette deuxième méthode Create() a un attribut AcceptVerbs qui empêche l’appel de la méthode, sauf si une opération HTTP POST est effectuée.

Cette deuxième méthode Create() a été modifiée dans la classe HomeController mise à jour dans listing 4. La nouvelle version de la méthode Create() accepte un paramètre Movie et contient la logique d’insertion d’un nouveau film dans la table de base de données Movies.

Notes

Notez l’attribut Bind. Étant donné que nous ne voulons pas mettre à jour la propriété Movie ID à partir du formulaire HTML, nous devons exclure explicitement cette propriété.

Listing 4 – Controllers\HomeController.cs (méthode Create modifiée)

//

// GET: /Home/Create 

public ActionResult Create()

{

    return View();

}  

//

// POST: /Home/Create 

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult Create([Bind(Exclude="Id")] Movie movieToCreate)

{

     if (!ModelState.IsValid)

        return View(); 

    _db.AddToMovieSet(movieToCreate);

    _db.SaveChanges(); 

    return RedirectToAction("Index");

}

Visual Studio facilite la création du formulaire permettant de créer un enregistrement de base de données vidéo (voir figure 12). Procédez comme suit :

  1. Cliquez avec le bouton droit sur la méthode Create() dans l’éditeur de code et sélectionnez l’option de menu Ajouter un affichage.
  2. Vérifiez que la case à cocher Intitulée Créer une vue fortement typée est cochée .
  3. Dans la liste déroulante Afficher le contenu , sélectionnez la valeur Créer.
  4. Dans la liste déroulante Afficher la classe de données , sélectionnez la valeur MovieApp.Models.Movie.
  5. Cliquez sur le bouton Ajouter pour créer la nouvelle vue.

Capture d’écran de la zone Ajouter une vue pour le nom de l’affichage, Créer, qui montre Créer une vue fortement typée et Sélectionner master entrées de page sélectionnées.

Figure 12 : Ajout de la vue Créer (Cliquer pour afficher l’image en taille réelle)

Visual Studio génère automatiquement l’affichage dans listing 5. Cette vue contient un formulaire HTML qui inclut des champs qui correspondent à chacune des propriétés de la classe Movie.

Listing 5 – Views\Home\Create.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MovieApp.Models.Movie>" %> 

    <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

       Create

    </asp:Content> 

    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 

        <h2>Create</h2> 

        <%= Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.") %> 

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

            <fieldset>

                <legend>Fields</legend>

                <p>

                    <label for="Id">Id:</label>

                    <%= Html.TextBox("Id") %>

                    <%= Html.ValidationMessage("Id", "*") %>

                </p>

                <p>

                    <label for="Title">Title:</label>

                    <%= Html.TextBox("Title") %>

                    <%= Html.ValidationMessage("Title", "*") %>

                </p>

                <p>

                    <label for="Director">Director:</label>

                    <%= Html.TextBox("Director") %>

                    <%= Html.ValidationMessage("Director", "*") %>

                </p>

                <p>

                    <label for="DateReleased">DateReleased:</label>

                    <%= Html.TextBox("DateReleased") %>

                    <%= Html.ValidationMessage("DateReleased", "*") %>

                </p>

                <p>

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

                </p>

            </fieldset> 

        <% } %> 

        <div>

            <%=Html.ActionLink("Back to List", "Index") %>

        </div> 

    </asp:Content>

Notes

Le formulaire HTML généré par la boîte de dialogue Ajouter une vue génère un champ de formulaire ID. Étant donné que la colonne ID est une colonne Identity, nous n’avons pas besoin de ce champ de formulaire et vous pouvez le supprimer en toute sécurité.

Après avoir ajouté la vue Créer, vous pouvez ajouter de nouveaux enregistrements vidéo à la base de données. Exécutez votre application en appuyant sur la touche F5, puis cliquez sur le lien Créer pour afficher le formulaire de la figure 13. Si vous remplissez et envoyez le formulaire, un nouvel enregistrement de base de données de films est créé.

Notez que vous obtenez automatiquement la validation du formulaire. Si vous négligez d’entrer une date de sortie pour un film ou si vous entrez une date de sortie non valide, le formulaire est réaffiché et le champ date de publication est mis en surbrillance.

Capture d’écran du navigateur affichant la page Créer une vue, qui montre les champs de base de données requis pour le titre, le directeur et la date de publication.

Figure 13 : Création d’un enregistrement de base de données vidéo (cliquer pour afficher l’image en taille réelle)

Modification des enregistrements de base de données existants

Dans les sections précédentes, nous avons expliqué comment répertorier et créer de nouveaux enregistrements de base de données. Dans cette dernière section, nous expliquons comment modifier les enregistrements de base de données existants.

Tout d’abord, nous devons générer le formulaire Modifier. Cette étape est facile, car Visual Studio génère automatiquement le formulaire Modifier pour nous. Ouvrez la classe HomeController.cs dans l’éditeur de code Visual Studio et procédez comme suit :

  1. Cliquez avec le bouton droit sur la méthode Edit() dans l’éditeur de code et sélectionnez l’option de menu Ajouter une vue (voir figure 14).
  2. Cochez la case Créer une vue fortement typée.
  3. Dans la liste déroulante Afficher le contenu , sélectionnez la valeur Modifier.
  4. Dans la liste déroulante Afficher la classe de données , sélectionnez la valeur MovieApp.Models.Movie.
  5. Cliquez sur le bouton Ajouter pour créer la nouvelle vue.

L’exécution de ces étapes ajoute une nouvelle vue nommée Edit.aspx au dossier Views\Home. Cette vue contient un formulaire HTML permettant de modifier un enregistrement vidéo.

Capture d’écran de la zone Ajouter une vue pour le nom de l’affichage, Modifier, qui montre Créer un affichage fortement typé et Sélectionner master entrées de page sélectionnées.

Figure 14 : Ajout de la vue Modifier (cliquer pour afficher l’image pleine taille)

Notes

La vue Modifier contient un champ de formulaire HTML qui correspond à la propriété Id de film. Étant donné que vous ne souhaitez pas que des personnes modifient la valeur de la propriété Id, vous devez supprimer ce champ de formulaire.

Enfin, nous devons modifier le contrôleur d’accueil afin qu’il prenne en charge la modification d’un enregistrement de base de données. La classe HomeController mise à jour est contenue dans listing 6.

Liste 6 – Controllers\HomeController.cs (méthodes Edit)

//

// GET: /Home/Edit/5 

public ActionResult Edit(int id)

{

    var movieToEdit = (from m in _db.MovieSet

                       where m.Id == id

                       select m).First(); 

    return View(movieToEdit);

} 

//

// POST: /Home/Edit/5 

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult Edit(Movie movieToEdit)

{ 

    var originalMovie = (from m in _db.MovieSet

                         where m.Id == movieToEdit.Id

                         select m).First(); 

    if (!ModelState.IsValid)

        return View(originalMovie);

        _db.ApplyPropertyChanges(originalMovie.EntityKey.EntitySetName, movieToEdit);

        _db.SaveChanges(); 

        return RedirectToAction("Index");

}

Dans la liste 6, j’ai ajouté une logique supplémentaire aux deux surcharges de la méthode Edit(). La première méthode Edit() retourne l’enregistrement de base de données de films qui correspond au paramètre Id passé à la méthode. La deuxième surcharge effectue les mises à jour d’un enregistrement vidéo dans la base de données.

Notez que vous devez récupérer la vidéo d’origine, puis appeler ApplyPropertyChanges() pour mettre à jour la vidéo existante dans la base de données.

Résumé

L’objectif de ce tutoriel était de vous donner une idée de l’expérience de création d’une application MVC ASP.NET. J’espère que vous avez découvert que la création d’une application web MVC ASP.NET est très similaire à l’expérience de création d’une application Active Server Pages ou ASP.NET.

Dans ce tutoriel, nous avons examiné uniquement les fonctionnalités de base de l’infrastructure ASP.NET MVC. Dans les prochains tutoriels, nous approfondissons des sujets tels que les contrôleurs, les actions du contrôleur, les vues, l’affichage des données et les assistances HTML.