Création d'une application de gestion de films avec ASP.NET MVC (C #)

Philippe Vialatte (Traduction)

Stephen Walther construit une application web orientée base de données, basée sur ASP.NET MVC du début à la fin.
Ce tutoriel est une excellente introduction pour ceux qui débutent avec le Framework ASP.NET MVC et qui veulent se faire une idée du processus de construction d'une application ASP.NET MVC.

- Titre : Création d'une application de gestion de films avec ASP.NET MVC (C #)

- Auteur : Philippe Vialatte (Traduction)

- Parution : 1 mai 2009

- Licence : Copyright ® 2009 Equipe dotnet. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- Traduction

- Introduction

- Vue d'ensemble de l'application de gestion de films

- Prérequis

- Création d'un projet d'application Web ASP.NET MVC

- Création de la base de données

- Création du modèle

- Création du contrôleur ASP.NET MVC

- Lister les enregistrements de la base de données

- Création d'enregistrements dans la base de données

- Modification d'enregistrements existants de la base de données

- Résumé

Traduction

Cet article est la traduction la plus fidèle possible de l'article original : Creating a Movie Database Application

Introduction

Le but de ce tutoriel est de vous donner une idée de « ce que ça fait » de construire une application ASP.NET MVC. Dans ce tutoriel, je vais construire en vitesse une application ASP.NET MVC du début à la fin. Je vous montrerai comment construire une application web orientée base de données simple qui illustre comment vous pouvez lister, créer ou éditer des enregistrements d'une base de données.

Pour simplifier le processus de construction de notre application, nous allons profiter des fonctionnalités de scaffolding (tr. échaffaudage) de Visual Studio 2008. Nous allons laisser Visual Studio générer le code initial et le contenu de nos contrôleurs, modèles et vues.

Si vous avez travaillé avec ASP ou ASP.NET, vous devriez trouver ASP.NET MVC très familier. Les vues ASP.NET MVC ressemblent beaucoup à des pages ASP. Et, comme dans une application basée sur les formulaires Web ASP.NET, ASP.NET MVC fournit un accès complet à la richesse des langages et des classes fournies par le Framework .NET.

Mon espoir est que ce tutoriel va vous donner une idée de la façon dont la construction d'une application ASP.NET MVC est à la fois semblable et différente de la construction de pages ASP ou d'une application ASP.NET Web Forms.

Vue d'ensemble de l'application de gestion de films

Parce que notre objectif est de présenter des choses simples, nous allons construire une application de gestion de films très simple. Notre application de gestion de film simplifiée nous permettra de faire trois choses :

1. Lister l'ensemble des enregistrements de la base de données des films

2. Créer un nouvel enregistrement dans la base de données des films

3. Modifier un enregistrement existant dans la base de données des films

Encore une fois, parce que nous voulons garder les choses simples, nous allons tirer avantage d'un nombre minimal de fonctionnalités du Framework ASP.NET MVC nécessaires à la construction de notre application. Par exemple, nous ne ferons pas de développement dirigé par les tests.

Afin de créer notre application, nous aurons besoin de compléter chacune des étapes suivantes :

1. Créer un projet « Application Web ASP.NET MVC »

2. Créer la base de données

3. Créer le modèle de données

4. Créer le contrôleur ASP.NET MVC

5. Créer les vues ASP.NET MVC

Prérequis

Vous aurez besoin de Visual Studio 2008 ou Visual Web Developer Express 2008 pour construire une application ASP.NET MVC. Vous devrez également télécharger le Framework ASP.NET MVC.

Si vous ne possédez pas Visual Studio 2008, vous pouvez télécharger une version d'essai valable 90 jours de Visual Studio 2008 à partir de ce site :
http://www.microsoft.com/france/visualstudio/try/trial-software.mspx

Sinon, vous pouvez créer des applications ASP.NET MVC avec Visual Web Developer Express 2008. Si vous décidez d'utiliser Visual Web Developer Express, vous devrez avoir installé le Service Pack 1. Vous pouvez télécharger Visual Web Developer 2008 Express avec le Service Pack 1 à partir de ce site : http://msdn.microsoft.com/fr-fr/express/aa975050.aspx

Après l'installation de Visual Studio 2008 ou Visual Web Developer 2008, vous devrez installer le Framework ASP.NET MVC. Vous pouvez télécharger le Framework ASP.NET MVC sur le site Web suivant : http://www.asp.net/mvc/

Création d'un projet d'application Web ASP.NET MVC

Commençons par la création d'un nouveau projet application Web ASP.NET MVC dans Visual Studio 2008. Sélectionnez, dans le menu Fichier, Nouveau Projet et vous verrez la boîte de dialogue Nouveau projet de la figure 1. Sélectionnez C# comme langage de programmation et sélectionnez ASP.NET MVC Web Application comme modèle de projet. Donnez à votre projet, le nom MovieApp et cliquez sur le bouton OK.

NDT: Les projets ASP.NET MVC ne peuvent pas être trouvés dans la partie Site Web, uniquement dans projet. De plus, au moment où j'écris ce tutoriel, le Framework MVC n'a pas été localisé, d'où des boites de dialogue en anglais...

Figure 01 : La boîte de dialogue Nouveau projet

Assurez-vous de sélectionner la version 3.5 du Framework .NET dans la liste déroulante en haut de la boîte de dialogue Nouveau projet, ou le modèle de projet ASP.NET MVC ne s'affichera pas.

Lorsque vous créez un nouveau projet d'application Web MVC, Visual Studio vous invite à créer un projet de tests unitaires. La boîte de dialogue dans la Figure 2 s'affiche.
Comme nous n'allons pas créer de tests dans ce tutoriel, pour des contraintes de temps (et, oui, nous devrions nous sentir un peu coupable à ce sujet), nous allons sélectionner l'option No, do not create a unit test project, et cliquer sur le bouton OK.

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

Figure 02 : La boite de dialogue Create Unit Test Project

Une application ASP.NET MVC contient un ensemble de dossiers: Models, Views, et Controllers. Vous pouvez voir cet ensemble standard de dossiers dans la fenêtre Explorateur de solutions. Nous aurons besoin d'ajouter des fichiers dans ces répertoires Models, Views, et Controllers en vue de construire notre application de gestion de films.

Lorsque vous créez une nouvelle application MVC avec Visual Studio, vous avez un exemple d'application. Comme nous voulons partir de zéro, nous allons supprimer le contenu de cette application. Vous devrez supprimer le fichier suivant et le dossier suivant:

- Controllers\HomeController.cs

- Views\Home

Création de la base de données

Nous avons besoin de créer une base de données pour organiser notre base de données vidéo. Heureusement, Visual Studio inclut une base de données gratuite, nommée SQL Server Express. Suivez ces étapes pour créer la base de données:

1. Faites un clic droit sur le dossier App_Data dans la fenêtre Explorateur de solutions et sélectionnez l'option Ajouter, puis Nouvel élément.

2. Sélectionnez la catégorie données et sélectionnez le modèle base de données SQL Server (voir Figure 3).

3. Nommez votre nouvelle base de données MoviesDB.mdf et cliquez sur le bouton Ajouter.

Figure 03 : Création d'une base de données Microsoft SQL Server

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. Un double-clique sur le fichier MoviesDB.mdf ouvre la fenêtre de l'Explorateur de serveurs.

La fenêtre de l'explorateur de serveur est nommée Explorateur de bases de données dans le cas de Visual Web Developer.

Ensuite, nous avons besoin de créer une nouvelle table dans la base de données. Depuis la fenêtre de l'Explorateur de serveurs, faites un clic droit sur le dossier Tables et sélectionnez l'option Ajouter une nouvelle table. La sélection de cette option ouvre le concepteur de table de base de données. Créez les colonnes suivantes dans la base de données:

Nom de la colonne

Type des données

Null autorisé

Id

int

Non

Title

nvarchar(100)

Non

Director

nvarchar(100)

Non

DateReleased

datetime

Non

La première colonne, la colonne ID, a deux propriétés particulières. Tout d'abord, vous devez marquer la colonne de l'ID comme étant la clé primaire. Après avoir sélectionné la colonne de l'ID, cliquez sur le bouton Définir la clé primaire (l'icône qui ressemble à une clé). Ensuite, vous devez marquer la colonne l'ID en tant que colonne d'identité. Dans la fenêtre Propriétés de la colonne, descendez jusqu'à la section Spécification du compteur, et dépliez-la. Changez la propriété Est d'identité en lui affectant la valeur Oui. Lorsque vous avez terminé, le tableau devrait ressembler à la figure 4.

Figure 04 : La table de base de données Films

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

Après avoir fini de créer la table, ajoutez des enregistrements dans la table. Faites un clic droit sur la table Movies dans l'Explorateur de serveurs, et choisissez l'option Afficher les données de la table. Entrez une liste de vos films préférés (voir figure 5).

Figure 05 : Saisie de films

Création du modèle

Nous avons ensuite besoin de créer un ensemble de classes pour représenter notre base de données. Nous avons besoin de créer un modèle de base de données. Nous allons profiter de l'Entity Framework de Microsoft pour générer les classes de notre modèle de base de données automatiquement.

Le Framework ASP.NET MVC n'est pas lié à l'Entity Framework Microsoft. Vous pouvez créer les classes de votre modèle de base de données en utilisant une variété d'outils de Mapping Objet Relationnel (OR/M), y compris des LINQ to SQL, Subsonic, et NHibernate.

Suivez ces étapes pour lancer l'Assistant Entity Data Model:

1. Faites un clic droit sur le dossier Models dans la fenêtre Explorateur de solutions et sélectionnez l'option 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 et cliquez sur le bouton Ajouter.

Après avoir cliqué sur le bouton Ajouter, l'assistant Entity Data Model (Entity Data Model Wizard) apparaît (voir Figure 6). Suivez ces étapes pour terminer l'Assistant:

1. Dans l'étape Choose Model Contents (Choisir le contenu du modèle), sélectionnez l'option Generate from database (Générer depuis la base de données).

2. Dans l'étape Choose Your Data Connection (Choisissez 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. Dans l'étape Choose Your Database Objects(Choisissez vos objets de base de données), développez le noeud Tables, sélectionnez la table Movies. Entrez l'espace de noms Models et cliquez sur le bouton Terminer.

Figure 06 : Créer un modèle de base de données avec l'assistant Entity Data Model

Après avoir complété l'assistant Entity Data Model, le Entity Data Model Designer (concepteur Entity Data Model) s'ouvre. Le concepteur devrait afficher la table Movies (voir Figure 7).

Figure 07 : Le concepteur Entity Data Model

Nous avons besoin de faire un changement avant de continuer. L'assistant Entity Data Model génère un modèle de classe nommé Movies, qui représente la table Movies de la base de données. Comme nous allons utiliser la classe Movies pour représenter un film, nous allons modifier le nom de la classe pour mettre Movie à la place de Movies (singulier plutôt que pluriel).

Double-cliquez sur le nom de la classe dans le concepteur et changez le nom de la classe de Movies en Movie. Après avoir fait ce changement, cliquez sur le bouton Enregistrer (l'icône de la disquette) pour générer la classe Movie.

Création du contrôleur ASP.NET MVC

La prochaine étape est de 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 ASP.NET MVC.

Suivez ces étapes :

1. Dans la fenêtre Explorateur de solutions, faites un clic droit sur le dossier Controllers et sélectionnez l'option Ajouter, Controller.

2. Dans le dialogue Add Controller (Ajouter Contrôleur), entrez le nom HomeController et cochez la case Add action methods for Create, Update and Details scenarios (Ajouter les méthodes d'action pour créer, mettre à jour, et les détails des scénarios) (voir figure 8).

3. Cliquez sur le bouton Add (Ajouter) pour ajouter le nouveau contrôleur à votre projet.

Après avoir terminé ces étapes, le contrôleur du Listing 1 est créé. Notez qu'il contient des méthodes Index, Details, Create, et Edit. Dans les sections suivantes, nous allons ajouter le code nécessaire pour faire fonctionner ces méthodes.

Figure 08 : Ajout d'un nouveau contrôleur ASP.NET MVC

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();
}
}
}
}

Lister les enregistrements de la base de données

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

Nous allons utiliser la méthode Index() pour afficher la liste des enregistrements de la table Movies. Nous allons profiter des classes d'accès aux données que nous avons créées précédemment pour récupérer les enregistrements de la base de données dans la méthode Index().

J'ai modifié la classe HomeController dans le Listing 2 de sorte qu'elle contienne une nouvelle variable privée _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 le Listing 2. la méthode Index() utilise la classe MoviesDBEntities pour récupérer tous les enregistrements de la table Movies de la base de données. L'expression _db.MovieSet.ToList() retourne une liste de tous les enregistrements de la table Movies.

NDT : Ce n'est pas précisé, mais, pour que le projet compile, il faut aussi ajouter using MovieApp.Models; dans les clauses using.

La liste des films est passée à la vue. Tout ce qui est passé à la méthode View() est passé à la vue sous forme de données de vue.

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 avons besoin de créer cette vue pour afficher la liste des enregistrements de la table Movies. Suivez ces étapes:

Vous devez construire votre projet (choisissez l'option de menu Générer, Générer la solution), avant d'ouvrir la boîte de dialogue Add View (Ajouter une vue) ou aucune classe n'apparaîtra dans la liste déroulante Afficher les données de classe.

1. Faites un clic droit sur la méthode Index() dans l'éditeur de code et sélectionnez l'option Add View (voir figure 9).

2. Dans la boîte de dialogue Add View, vérifiez que la case à cocher Create a strongly-typed view (Créer un vue fortement typée) est cochée.

3. Dans la liste déroulante View Content (Contenu de la vue), sélectionnez la valeur List.

4. Dans la liste déroulante View Data Class (Classe de données de la vue), sélectionnez la valeur MovieApp.Models.Movie.

5. Cliquez sur le bouton Add pour créer la nouvelle vue (voir figure 10).

Après avoir terminé ces étapes, une nouvelle vue nommée index.aspx est ajoutée au dossier Views\Home. Le contenu de la vue Index est inclus dans le Listing 3.

Figure 09 : Ajout d'une vue à partir de l'action d'un contrôleur

Figure 10 : Création d'une vue grâce au dialogue Ajouter une vue

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="head" runat="server">
<title>Index</title>
</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.PrimaryKey */ }) %> |
<%= Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ })%>
</td>
<td>
<%= Html.Encode(item.Id) %>
</td>
<td>
<%= Html.Encode(item.Title) %>
</td>
<td>
<%= Html.Encode(item.Director) %>
</td>
<td>
<%= Html.Encode(item.DateReleased) %>
</td>
</tr>

<% } %>

</table>

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

</asp:Content>

La vue Index affiche tous les enregistrements de la table Movies de la base de données dans un tableau HTML. La vue contient une boucle foreach qui itère sur 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 de la figure 11.

Figure 11 : La vue Index

Création d'enregistrements dans la base de données

La vue Index que nous avons créée dans la section précédente inclut un lien pour la création de nouveaux enregistrements dans la base de données. Nous allons donc implémenter la logique et créer la vue nécessaire à la création de nouveaux enregistrements dans la base de données.

Le contrôleur Home contient deux méthodes nommées Create(). La première méthode Create() n'a pas d'arguments. Cette surcharge de la méthode Create() à comme responsabilité d'afficher le formulaire HTML pour créer un nouveau film dans la base de données.

La seconde méthode Create() prend comme paramètre un objet FormCollection. Cette surcharge de la méthode Create() est appelée lorsque le formulaire HTML de création d'un nouveau film est posté sur le serveur. Notez que cette deuxième méthode Create() à un attribut AcceptVerbs, qui empêche que la méthode soit appelée à moins qu'une opération HTTP Post soit exécutée.

Cette seconde méthode Create() a été modifiée dans la classe HomeController du Listing 4. La nouvelle version de la méthode Create() accepte un paramètre Movie et contient la logique de l'insertion d'un nouveau film dans la table Movies de la base de données.

Remarquez l'attribut Bind. Comme nous ne voulons pas mettre à jour la propriété Id de Movie depuis notre formulaire HTML, il faut exclure explicitement cette propriété.

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

public ActionResult Create()
{
return View();
}

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Create([Bind(Exclude = "Id")] Movie movieToCreate)
{
if (!ModelState.IsValid)
return View();

try
{
_db.AddToMovieSet(movieToCreate);
_db.SaveChanges();

return RedirectToAction("Index");
}
catch
{
return View();
}
}

Visual Studio permet de créer facilement un formulaire destiné à la création d'un nouveau film dans la base de données (voir la figure 12). Suivez ces étapes:

1. Faites un clic droit sur la méthode Create() dans l'éditeur de code et sélectionnez l'option Add View.

2. Vérifiez que la case à cocher Create a strongly-typed view est cochée.

3. Dans la liste déroulante View content, sélectionnez la valeur Create.

4. Dans la liste déroulante View data class, sélectionnez la valeur MovieApp.Models.Movie.

5. Cliquez sur le bouton Add pour créer la nouvelle vue.

Figure 12 : Ajout la vue Create

Visual Studio génère la vue du Listing 5 automatiquement.
Cette vue contient un formulaire HTML qui inclut des champs correspondant à 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="head" runat="server">
<title>Create</title>
</asp:Content>

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

<h2>Create</h2>

<%= Html.ValidationSummary() %>

<% 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>

Le formulaire HTML généré par la boite de dialogue Add View génère un champ Id dans le formulaire. Comme la colonne Id est une colonne d'identité, vous n'avez pas besoin de ce champ de formulaire et vous pouvez le supprimer.

Après avoir ajouté la vue Create, vous pouvez ajouter de nouveaux enregistrements à la base de données. Exécutez votre application en appuyant sur la touche F5 et cliquez sur le lien « Create New » pour voir le formulaire de la figure 13. Si vous remplissez et soumettez le formulaire, un nouvel enregistrement sera créé dans la base de données.

Notez que vous obtenez automatiquement une validation de surface de votre formulaire. Si vous négligez d'entrer une date de sortie pour un film, ou que vous entrez une date non valide, le formulaire est à nouveau affiché et la date de sortie est mise en évidence.

Figure 13 : Création d'un nouveau enregistrement de film dans la base de données

Modification d'enregistrements existants de la base de données

Dans les sections précédentes, nous avons vu la façon dont vous pouvez faire une liste et de créer de nouveaux enregistrements de base de données. Dans cette dernière section, nous discuterons de la façon dont vous pouvez modifier des enregistrements de base de données.

Tout d'abord, nous avons besoin de modifier la vue Index. La vue Index rend un lien Edit à côté de chaque film. Nous avons besoin de modifier ce lien, afin qu'il passe la bonne clé primaire à la vue Edit.

Trouver la ligne de code suivante dans la vue Index :

/* id=item.PrimaryKey */ }) %> |

Remplacer le commentaire / * id = item.PrimaryKey * / par la clé primaire, de façon à ce que la nouvelle ligne de code ressemble à ceci:

{id=item.Id}) %> | item.Id id = ())%> |

NDT : Le tutoriel d'origine semble un peu dépassé par la version RC1 du Framework. En effet, avec la version RC1, on trouve, dans la page Index, le code suivant:

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

Ensuite, nous avons besoin de générer la forme Edit. Cette étape est simple, car Visual Studio va générer le formulaire pour nous automatiquement. Ouvrez la classe HomeController.cs dans l'éditeur de code Visual Studio et suivez ces étapes :

1. Faites un clic droit sur la méthode Edit() dans l'éditeur de code et sélectionnez Add View (voir figure 14).

2. Vérifiez que la case à cocher Create a strongly-typed view est cochée.

3. Dans la liste déroulante View content, sélectionnez la valeur Edit.

4. Dans la liste déroulante View data class, sélectionnez la valeur MovieApp.Models.Movie.

5. Cliquez sur le bouton Add pour créer la nouvelle vue.

L'achèvement de ces étapes ajoute une nouvelle vue nommée Edit.aspx au dossier Views\Home. Cette vue contient un formulaire HTML permettant l'édition d'un film.

Figure 14 : Ajout de la vue

La vue Edit contient un champ de formulaire HTML qui correspond à la propriété Id du film. Comme vous ne voulez pas que les personnes éditent la valeur de la propriété Id, il faut supprimer ce champ de formulaire.

Enfin, nous avons besoin de modifier le contrôleur Home afin qu'il permette la modification d'un enregistrement de la base de données. La classe HomeController mise à jour se trouve dans le Listing 6.

Listing 6 - Controllers\HomeController.cs (Méthodes Edit)

public ActionResult Edit(int id)
{

var movieToEdit = (from m in _db.MovieSet
where m.Id == id
select m).First();

return View(movieToEdit);
}

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Edit(Movie movieToEdit)
{
if (!ModelState.IsValid)
return View();

try
{
var originalMovie = (from m in _db.MovieSet
where m.Id == movieToEdit.Id
select m).First();

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

return RedirectToAction("Index");
}
catch
{
return View();
}
}

Dans le Listing 6, j'ai ajouté de la logique à chacune des surcharges de la méthode Edit(). La première méthode Edit() retourne l'enregistrement de base de données qui correspond à l'ID passé en paramètre à la méthode. La deuxième surcharge effectue les mises à jour pour enregistrer un film dans la base de données.

Notez que vous devez récupérer le film original, et faire ensuite appel à ApplyPropertyChanges(), afin de mettre à jour le film existant dans la base de données.

Résumé

Le but de ce tutoriel est de vous donner une idée de l'effet que fait la construction d'une application ASP.NET MVC. J'espère que vous avez découvert que la construction d'une application Web ASP.NET MVC est très similaire à la construction d'une application ASP ou ASP.NET.

Dans ce tutoriel, nous avons examiné uniquement les caractéristiques les plus basiques du Framework ASP.NET MVC. Dans les tutoriels suivants, nous plongerons plus en profondeur dans des sujets tels que les contrôleurs, les actions des contrôleur, les vues, les données des vues, et les auxiliaires HTML (HTML Helpers).