You are on page 1of 22

Cration d'une application de gestion

de films avec ASP.NET MVC (C #)


par Philippe Vialatte (Traduction) (ma page DVP) (Blog)
Date de publication : mai 2009
Dernire mise jour :

Stephen Walther construit une application web oriente base de donnes, base sur
ASP.NET MVC du dbut la fin.
Ce tutoriel est une excellente introduction pour ceux qui dbutent avec le Framework
ASP.NET MVC et qui veulent se faire une ide du processus de construction d'une
application ASP.NET MVC.

Cration d'une application de gestion de films avec ASP.NET MVC (C #) par Philippe Vialatte (Traduction) (ma page DVP) (Blog)

Traduction.....................................................................................................................................................................3
Introduction...................................................................................................................................................................3
Vue d'ensemble de l'application de gestion de films.................................................................................................. 3
Prrequis...................................................................................................................................................................... 3
Cration d'un projet d'application Web ASP.NET MVC...............................................................................................4
Cration de la base de donnes.................................................................................................................................5
Cration du modle..................................................................................................................................................... 8
Cration du contrleur ASP.NET MVC......................................................................................................................10
Lister les enregistrements de la base de donnes................................................................................................... 12
Cration d'enregistrements dans la base de donnes..............................................................................................16
Modification d'enregistrements existants de la base de donnes.............................................................................20
Rsum...................................................................................................................................................................... 22

-2Copyright 2009 - Equipe dotnet. Aucune reproduction, mme 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' 3 ans de prison et jusqu' 300 000 E
de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/mvc/create-movie-database/

Cration d'une application de gestion de films avec ASP.NET MVC (C #) par Philippe Vialatte (Traduction) (ma page DVP) (Blog)

Traduction
Cet article est la traduction la plus fidle possible de l'article original :

Creating a Movie Database Application

Introduction
Le but de ce tutoriel est de vous donner une ide 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 dbut la fin. Je vous montrerai
comment construire une application web oriente base de donnes simple qui illustre comment vous pouvez lister,
crer ou diter des enregistrements d'une base de donnes.
Pour simplifier le processus de construction de notre application, nous allons profiter des fonctionnalits de
scaffolding (tr. chaffaudage) de Visual Studio 2008. Nous allons laisser Visual Studio gnrer le code initial et le
contenu de nos contrleurs, modles et vues.
Si vous avez travaill avec ASP ou ASP.NET, vous devriez trouver ASP.NET MVC trs familier. Les vues ASP.NET
MVC ressemblent beaucoup des pages ASP. Et, comme dans une application base sur les formulaires Web
ASP.NET, ASP.NET MVC fournit un accs complet la richesse des langages et des classes fournies par le
Framework .NET.
Mon espoir est que ce tutoriel va vous donner une ide de la faon dont la construction d'une application ASP.NET
MVC est la fois semblable et diffrente 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 prsenter des choses simples, nous allons construire une application de gestion de
films trs simple. Notre application de gestion de film simplifie nous permettra de faire trois choses :
1
2
3

Lister l'ensemble des enregistrements de la base de donnes des films


Crer un nouvel enregistrement dans la base de donnes des films
Modifier un enregistrement existant dans la base de donnes des films

Encore une fois, parce que nous voulons garder les choses simples, nous allons tirer avantage d'un nombre minimal
de fonctionnalits du Framework ASP.NET MVC ncessaires la construction de notre application. Par exemple,
nous ne ferons pas de dveloppement dirig par les tests.
Afin de crer notre application, nous aurons besoin de complter chacune des tapes suivantes :
1
2
3
4
5

Crer un projet Application Web ASP.NET MVC


Crer la base de donnes
Crer le modle de donnes
Crer le contrleur ASP.NET MVC
Crer les vues ASP.NET MVC

Prrequis
Vous aurez besoin de Visual Studio 2008 ou Visual Web Developer Express 2008 pour construire une application
ASP.NET MVC. Vous devrez galement tlcharger le Framework ASP.NET MVC.
Si vous ne possdez pas Visual Studio 2008, vous pouvez tlcharger 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
-3Copyright 2009 - Equipe dotnet. Aucune reproduction, mme 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' 3 ans de prison et jusqu' 300 000 E
de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/mvc/create-movie-database/

Cration d'une application de gestion de films avec ASP.NET MVC (C #) par Philippe Vialatte (Traduction) (ma page DVP) (Blog)

Sinon, vous pouvez crer des applications ASP.NET MVC avec Visual Web Developer Express 2008. Si vous dcidez
d'utiliser Visual Web Developer Express, vous devrez avoir install le Service Pack 1. Vous pouvez tlcharger
Visual Web Developer 2008 Express avec le Service Pack 1 partir de ce site :
fr-fr/express/aa975050.aspx

http://msdn.microsoft.com/

Aprs l'installation de Visual Studio 2008 ou Visual Web Developer 2008, vous devrez installer le Framework ASP.NET
MVC. Vous pouvez tlcharger le Framework ASP.NET MVC sur le site Web suivant :

http://www.asp.net/mvc/

Cration d'un projet d'application Web ASP.NET MVC


Commenons par la cration d'un nouveau projet application Web ASP.NET MVC dans Visual Studio 2008.
Slectionnez, dans le menu Fichier, Nouveau Projet et vous verrez la bote de dialogue Nouveau projet de la figure
1. Slectionnez C# comme langage de programmation et slectionnez ASP.NET MVC Web Application comme
modle de projet. Donnez votre projet, le nom MovieApp et cliquez sur le bouton OK.
NDT: Les projets ASP.NET MVC ne peuvent pas tre trouvs 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 bote de dialogue Nouveau projet

-4Copyright 2009 - Equipe dotnet. Aucune reproduction, mme 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' 3 ans de prison et jusqu' 300 000 E
de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/mvc/create-movie-database/

Cration d'une application de gestion de films avec ASP.NET MVC (C #) par Philippe Vialatte (Traduction) (ma page DVP) (Blog)

Assurez-vous de slectionner la version 3.5 du Framework .NET dans la liste droulante


en haut de la bote de dialogue Nouveau projet, ou le modle de projet ASP.NET MVC
ne s'affichera pas.
Lorsque vous crez un nouveau projet d'application Web MVC, Visual Studio vous invite crer un projet de tests
unitaires. La bote de dialogue dans la Figure 2 s'affiche.
Comme nous n'allons pas crer de tests dans ce tutoriel, pour des contraintes de temps (et, oui, nous devrions nous
sentir un peu coupable ce sujet), nous allons slectionner 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 fentre Explorateur de solutions. Nous aurons besoin d'ajouter des
fichiers dans ces rpertoires Models, Views, et Controllers en vue de construire notre application de gestion de films.
Lorsque vous crez une nouvelle application MVC avec Visual Studio, vous avez un exemple d'application. Comme
nous voulons partir de zro, nous allons supprimer le contenu de cette application. Vous devrez supprimer le fichier
suivant et le dossier suivant:

Controllers\HomeController.cs
Views\Home

Cration de la base de donnes


Nous avons besoin de crer une base de donnes pour organiser notre base de donnes vido. Heureusement,
Visual Studio inclut une base de donnes gratuite, nomme SQL Server Express. Suivez ces tapes pour crer la
base de donnes:

-5Copyright 2009 - Equipe dotnet. Aucune reproduction, mme 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' 3 ans de prison et jusqu' 300 000 E
de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/mvc/create-movie-database/

Cration d'une application de gestion de films avec ASP.NET MVC (C #) par Philippe Vialatte (Traduction) (ma page DVP) (Blog)

1
2
3

Faites un clic droit sur le dossier App_Data dans la fentre Explorateur de solutions et slectionnez l'option
Ajouter, puis Nouvel lment.
Slectionnez la catgorie donnes et slectionnez le modle base de donnes SQL Server (voir Figure 3).
Nommez votre nouvelle base de donnes MoviesDB.mdf et cliquez sur le bouton Ajouter.

Figure 03 : Cration d'une base de donnes Microsoft SQL Server


Aprs avoir cr votre base de donnes, vous pouvez vous connecter la base de donnes en double-cliquant sur le
fichier MoviesDB.mdf situ dans le dossier App_Data. Un double-clique sur le fichier MoviesDB.mdf ouvre la fentre
de l'Explorateur de serveurs.
La fentre de l'explorateur de serveur est nomme Explorateur de bases de donnes dans
le cas de Visual Web Developer.
Ensuite, nous avons besoin de crer une nouvelle table dans la base de donnes. Depuis la fentre de l'Explorateur
de serveurs, faites un clic droit sur le dossier Tables et slectionnez l'option Ajouter une nouvelle table. La slection
de cette option ouvre le concepteur de table de base de donnes. Crez les colonnes suivantes dans la base de
donnes:
Nom de la colonne
Id
Title
Director
DateReleased

Type des donnes


int
nvarchar(100)
nvarchar(100)
datetime

Non
Non
Non
Non

Null autoris

-6Copyright 2009 - Equipe dotnet. Aucune reproduction, mme 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' 3 ans de prison et jusqu' 300 000 E
de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/mvc/create-movie-database/

Cration d'une application de gestion de films avec ASP.NET MVC (C #) par Philippe Vialatte (Traduction) (ma page DVP) (Blog)

La premire colonne, la colonne ID, a deux proprits particulires. Tout d'abord, vous devez marquer la colonne
de l'ID comme tant la cl primaire. Aprs avoir slectionn la colonne de l'ID, cliquez sur le bouton Dfinir la cl
primaire (l'icne qui ressemble une cl). Ensuite, vous devez marquer la colonne l'ID en tant que colonne d'identit.
Dans la fentre Proprits de la colonne, descendez jusqu' la section Spcification du compteur, et dpliez-la.
Changez la proprit 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 donnes Films


La dernire tape consiste enregistrer la nouvelle table. Cliquez sur le bouton Enregistrer (l'icne de la disquette)
et donnez la nouvelle table le nom Movies.

-7Copyright 2009 - Equipe dotnet. Aucune reproduction, mme 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' 3 ans de prison et jusqu' 300 000 E
de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/mvc/create-movie-database/

Cration d'une application de gestion de films avec ASP.NET MVC (C #) par Philippe Vialatte (Traduction) (ma page DVP) (Blog)

Aprs avoir fini de crer 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 donnes de la table. Entrez une liste de vos films
prfrs (voir figure 5).

Figure 05 : Saisie de films

Cration du modle
Nous avons ensuite besoin de crer un ensemble de classes pour reprsenter notre base de donnes. Nous avons
besoin de crer un modle de base de donnes. Nous allons profiter de l'Entity Framework de Microsoft pour gnrer
les classes de notre modle de base de donnes automatiquement.
Le Framework ASP.NET MVC n'est pas li l'Entity Framework Microsoft. Vous pouvez
crer les classes de votre modle de base de donnes en utilisant une varit 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
2
3

Faites un clic droit sur le dossier Models dans la fentre Explorateur de solutions et slectionnez l'option
Ajouter, Nouvel lment.
Slectionnez la catgorie donnes, et slectionnez le modle ADO.NET Entity Data Model.
Donnez votre modle de donnes le nom MoviesDBModel.edmx et cliquez sur le bouton Ajouter.

Aprs avoir cliqu sur le bouton Ajouter, l'assistant Entity Data Model (Entity Data Model Wizard) apparat (voir Figure
6). Suivez ces tapes pour terminer l'Assistant:

-8Copyright 2009 - Equipe dotnet. Aucune reproduction, mme 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' 3 ans de prison et jusqu' 300 000 E
de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/mvc/create-movie-database/

Cration d'une application de gestion de films avec ASP.NET MVC (C #) par Philippe Vialatte (Traduction) (ma page DVP) (Blog)

1
2
3

Dans l'tape Choose Model Contents (Choisir le contenu du modle), slectionnez l'option Generate from
database (Gnrer depuis la base de donnes).
Dans l'tape Choose Your Data Connection (Choisissez votre connexion de donnes), utilisez la connexion
de donnes MoviesDB.mdf et le nom MoviesDBEntities pour les paramtres de connexion. Cliquez sur le
bouton Suivant.
Dans l'tape Choose Your Database Objects(Choisissez vos objets de base de donnes), dveloppez
le noeud Tables, slectionnez la table Movies. Entrez l'espace de noms Models et cliquez sur le bouton
Terminer.

Figure 06 : Crer un modle de base de donnes avec l'assistant Entity Data Model
Aprs avoir complt 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).

-9Copyright 2009 - Equipe dotnet. Aucune reproduction, mme 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' 3 ans de prison et jusqu' 300 000 E
de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/mvc/create-movie-database/

Cration d'une application de gestion de films avec ASP.NET MVC (C #) par Philippe Vialatte (Traduction) (ma page DVP) (Blog)

Figure 07 : Le concepteur Entity Data Model


Nous avons besoin de faire un changement avant de continuer. L'assistant Entity Data Model gnre un modle de
classe nomm Movies, qui reprsente la table Movies de la base de donnes. Comme nous allons utiliser la classe
Movies pour reprsenter un film, nous allons modifier le nom de la classe pour mettre Movie la place de Movies
(singulier plutt que pluriel).
Double-cliquez sur le nom de la classe dans le concepteur et changez le nom de la classe de Movies en Movie. Aprs
avoir fait ce changement, cliquez sur le bouton Enregistrer (l'icne de la disquette) pour gnrer la classe Movie.

Cration du contrleur ASP.NET MVC


La prochaine tape est de crer le contrleur ASP.NET MVC. Un contrleur est charg de contrler la faon dont un
utilisateur interagit avec une application ASP.NET MVC.
Suivez ces tapes :
1
2
3

Dans la fentre Explorateur de solutions, faites un clic droit sur le dossier Controllers et slectionnez l'option
Ajouter, Controller.
Dans le dialogue Add Controller (Ajouter Contrleur), entrez le nom HomeController et cochez la case Add
action methods for Create, Update and Details scenarios (Ajouter les mthodes d'action pour crer,
mettre jour, et les dtails des scnarios) (voir figure 8).
Cliquez sur le bouton Add (Ajouter) pour ajouter le nouveau contrleur votre projet.

Aprs avoir termin ces tapes, le contrleur du Listing 1 est cr. Notez qu'il contient des mthodes Index, Details,
Create, et Edit. Dans les sections suivantes, nous allons ajouter le code ncessaire pour faire fonctionner ces
mthodes.
- 10 Copyright 2009 - Equipe dotnet. Aucune reproduction, mme 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' 3 ans de prison et jusqu' 300 000 E
de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/mvc/create-movie-database/

Cration d'une application de gestion de films avec ASP.NET MVC (C #) par Philippe Vialatte (Traduction) (ma page DVP) (Blog)

Figure 08 : Ajout d'un nouveau contrleur ASP.NET MVC


Listing 1 - Controllers\HomeController.cs
using
using
using
using
using
using

System;
System.Collections.Generic;
System.Linq;
System.Web;
System.Web.Mvc;
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)

- 11 Copyright 2009 - Equipe dotnet. Aucune reproduction, mme 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' 3 ans de prison et jusqu' 300 000 E
de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/mvc/create-movie-database/

Cration d'une application de gestion de films avec ASP.NET MVC (C #) par Philippe Vialatte (Traduction) (ma page DVP) (Blog)

Listing 1 - Controllers\HomeController.cs
{

try
{

// TODO: Add update logic here

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

Lister les enregistrements de la base de donnes


La mthode Index du contrleur est la mthode par dfaut pour une application ASP.NET MVC. Lorsque vous
excutez une application ASP.NET MVC, la mthode Index() est la premire mthode de traitement qui est appele.
Nous allons utiliser la mthode Index() pour afficher la liste des enregistrements de la table Movies. Nous allons
profiter des classes d'accs aux donnes que nous avons cres prcdemment pour rcuprer les enregistrements
de la base de donnes dans la mthode Index().
J'ai modifi la classe HomeController dans le Listing 2 de sorte qu'elle contienne une nouvelle variable prive _db.
La classe MoviesDBEntities reprsente notre modle de base de donnes et nous allons utiliser cette classe pour
communiquer avec notre base de donnes.
J'ai galement modifi la mthode Index() dans le Listing 2. la mthode Index() utilise la classe MoviesDBEntities pour
rcuprer tous les enregistrements de la table Movies de la base de donnes. L'expression _db.MovieSet.ToList()
retourne une liste de tous les enregistrements de la table Movies.
NDT : Ce n'est pas prcis, mais, pour que le projet compile, il faut aussi ajouter using
MovieApp.Models; dans les clauses using.
La liste des films est passe la vue. Tout ce qui est pass la mthode View() est pass la vue sous forme
de donnes de vue.
Listing 2 - Controllers/HomeController.cs (mthode Index modifie)
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 mthode Index() retourne une vue nomme Index. Nous avons besoin de crer cette vue pour afficher la liste des
enregistrements de la table Movies. Suivez ces tapes:

- 12 Copyright 2009 - Equipe dotnet. Aucune reproduction, mme 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' 3 ans de prison et jusqu' 300 000 E
de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/mvc/create-movie-database/

Cration d'une application de gestion de films avec ASP.NET MVC (C #) par Philippe Vialatte (Traduction) (ma page DVP) (Blog)

Vous devez construire votre projet (choisissez l'option de menu Gnrer, Gnrer la
solution), avant d'ouvrir la bote de dialogue Add View (Ajouter une vue) ou aucune classe
n'apparatra dans la liste droulante Afficher les donnes de classe.
1
2
3
4
5

Faites un clic droit sur la mthode Index() dans l'diteur de code et slectionnez l'option Add View (voir figure
9).
Dans la bote de dialogue Add View, vrifiez que la case cocher Create a strongly-typed view (Crer un
vue fortement type) est coche.
Dans la liste droulante View Content (Contenu de la vue), slectionnez la valeur List.
Dans la liste droulante View Data Class (Classe de donnes de la vue), slectionnez la valeur
MovieApp.Models.Movie.
Cliquez sur le bouton Add pour crer la nouvelle vue (voir figure 10).

Aprs avoir termin ces tapes, une nouvelle vue nomme index.aspx est ajoute 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 contrleur

- 13 Copyright 2009 - Equipe dotnet. Aucune reproduction, mme 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' 3 ans de prison et jusqu' 300 000 E
de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/mvc/create-movie-database/

Cration d'une application de gestion de films avec ASP.NET MVC (C #) par Philippe Vialatte (Traduction) (ma page DVP) (Blog)

Figure 10 : Cration d'une vue grce 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>
- 14 Copyright 2009 - Equipe dotnet. Aucune reproduction, mme 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' 3 ans de prison et jusqu' 300 000 E
de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/mvc/create-movie-database/

Cration d'une application de gestion de films avec ASP.NET MVC (C #) par Philippe Vialatte (Traduction) (ma page DVP) (Blog)

Listing 3 - Views\Home\index.aspx
<%=
<%=
</td>
<td>
<%=
</td>
<td>
<%=
</td>
<td>
<%=
</td>
<td>
<%=
</td>
</tr>

Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) %> |


Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ })%>
Html.Encode(item.Id) %>
Html.Encode(item.Title) %>
Html.Encode(item.Director) %>
Html.Encode(item.DateReleased) %>

<% } %>
</table>
<p>
</p>

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

</asp:Content>

La vue Index affiche tous les enregistrements de la table Movies de la base de donnes dans un tableau HTML. La
vue contient une boucle foreach qui itre sur chaque film reprsent par la proprit ViewData.Model.
Si vous excutez votre application en appuyant sur la touche F5, vous verrez la page Web de la figure 11.

- 15 Copyright 2009 - Equipe dotnet. Aucune reproduction, mme 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' 3 ans de prison et jusqu' 300 000 E
de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/mvc/create-movie-database/

Cration d'une application de gestion de films avec ASP.NET MVC (C #) par Philippe Vialatte (Traduction) (ma page DVP) (Blog)

Figure 11 : La vue Index

Cration d'enregistrements dans la base de donnes


La vue Index que nous avons cre dans la section prcdente inclut un lien pour la cration de nouveaux
enregistrements dans la base de donnes. Nous allons donc implmenter la logique et crer la vue ncessaire la
cration de nouveaux enregistrements dans la base de donnes.
Le contrleur Home contient deux mthodes nommes Create(). La premire mthode Create() n'a pas d'arguments.
Cette surcharge de la mthode Create() comme responsabilit d'afficher le formulaire HTML pour crer un nouveau
film dans la base de donnes.
La seconde mthode Create() prend comme paramtre un objet FormCollection. Cette surcharge de la mthode
Create() est appele lorsque le formulaire HTML de cration d'un nouveau film est post sur le serveur. Notez que
cette deuxime mthode Create() un attribut AcceptVerbs, qui empche que la mthode soit appele moins
qu'une opration HTTP Post soit excute.
Cette seconde mthode Create() a t modifie dans la classe HomeController du Listing 4. La nouvelle version de
la mthode Create() accepte un paramtre Movie et contient la logique de l'insertion d'un nouveau film dans la table
Movies de la base de donnes.
Remarquez l'attribut Bind. Comme nous ne voulons pas mettre jour la proprit Id de
Movie depuis notre formulaire HTML, il faut exclure explicitement cette proprit.
- 16 Copyright 2009 - Equipe dotnet. Aucune reproduction, mme 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' 3 ans de prison et jusqu' 300 000 E
de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/mvc/create-movie-database/

Cration d'une application de gestion de films avec ASP.NET MVC (C #) par Philippe Vialatte (Traduction) (ma page DVP) (Blog)

Listing 4 - Controllers\HomeController.cs (mthode Create modifie)


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 crer facilement un formulaire destin la cration d'un nouveau film dans la base de
donnes (voir la figure 12). Suivez ces tapes:
1
2
3
4
5

Faites un clic droit sur la mthode Create() dans l'diteur de code et slectionnez l'option Add View.
Vrifiez que la case cocher Create a strongly-typed view est coche.
Dans la liste droulante View content, slectionnez la valeur Create.
Dans la liste droulante View data class, slectionnez la valeur MovieApp.Models.Movie.
Cliquez sur le bouton Add pour crer la nouvelle vue.

- 17 Copyright 2009 - Equipe dotnet. Aucune reproduction, mme 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' 3 ans de prison et jusqu' 300 000 E
de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/mvc/create-movie-database/

Cration d'une application de gestion de films avec ASP.NET MVC (C #) par Philippe Vialatte (Traduction) (ma page DVP) (Blog)

Figure 12 : Ajout la vue Create


Visual Studio gnre la vue du Listing 5 automatiquement.
Cette vue contient un formulaire HTML qui inclut des champs correspondant chacune des proprits 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>
- 18 Copyright 2009 - Equipe dotnet. Aucune reproduction, mme 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' 3 ans de prison et jusqu' 300 000 E
de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/mvc/create-movie-database/

Cration d'une application de gestion de films avec ASP.NET MVC (C #) par Philippe Vialatte (Traduction) (ma page DVP) (Blog)

Listing 5 - Views\Home\Create.aspx

</p>
<p>

</p>
<p>

<label for="Director">Director:</label>
<%= Html.TextBox("Director") %>
<%= Html.ValidationMessage("Director", "*") %>
<label for="DateReleased">DateReleased:</label>
<%= Html.TextBox("DateReleased") %>
<%= Html.ValidationMessage("DateReleased", "*") %>

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


</p>
</fieldset>
<% } %>
<div>
<%=Html.ActionLink("Back to List", "Index") %>
</div>
</asp:Content>

Le formulaire HTML gnr par la boite de dialogue Add View gnre 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.
Aprs avoir ajout la vue Create, vous pouvez ajouter de nouveaux enregistrements la base de donnes. Excutez
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 donnes.
Notez que vous obtenez automatiquement une validation de surface de votre formulaire. Si vous ngligez 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.

- 19 Copyright 2009 - Equipe dotnet. Aucune reproduction, mme 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' 3 ans de prison et jusqu' 300 000 E
de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/mvc/create-movie-database/

Cration d'une application de gestion de films avec ASP.NET MVC (C #) par Philippe Vialatte (Traduction) (ma page DVP) (Blog)

Figure 13 : Cration d'un nouveau enregistrement de film dans la base de donnes

Modification d'enregistrements existants de la base de donnes


Dans les sections prcdentes, nous avons vu la faon dont vous pouvez faire une liste et de crer de nouveaux
enregistrements de base de donnes. Dans cette dernire section, nous discuterons de la faon dont vous pouvez
modifier des enregistrements de base de donnes.
Tout d'abord, nous avons besoin de modifier la vue Index. La vue Index rend un lien Edit ct 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 faon ce que la nouvelle ligne de


code ressemble ceci:

- 20 Copyright 2009 - Equipe dotnet. Aucune reproduction, mme 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' 3 ans de prison et jusqu' 300 000 E
de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/mvc/create-movie-database/

Cration d'une application de gestion de films avec ASP.NET MVC (C #) par Philippe Vialatte (Traduction) (ma page DVP) (Blog)

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

NDT : Le tutoriel d'origine semble un peu dpass 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 gnrer la forme Edit. Cette tape est simple, car Visual Studio va gnrer le formulaire
pour nous automatiquement. Ouvrez la classe HomeController.cs dans l'diteur de code Visual Studio et suivez ces
tapes :
1
2
3
4
5

Faites un clic droit sur la mthode Edit() dans l'diteur de code et slectionnez Add View (voir figure 14).
Vrifiez que la case cocher Create a strongly-typed view est coche.
Dans la liste droulante View content, slectionnez la valeur Edit.
Dans la liste droulante View data class, slectionnez la valeur MovieApp.Models.Movie.
Cliquez sur le bouton Add pour crer la nouvelle vue.

L'achvement de ces tapes ajoute une nouvelle vue nomme 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 proprit Id du
film. Comme vous ne voulez pas que les personnes ditent la valeur de la proprit Id, il
faut supprimer ce champ de formulaire.
Enfin, nous avons besoin de modifier le contrleur Home afin qu'il permette la modification d'un enregistrement de la
base de donnes. La classe HomeController mise jour se trouve dans le Listing 6.

- 21 Copyright 2009 - Equipe dotnet. Aucune reproduction, mme 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' 3 ans de prison et jusqu' 300 000 E
de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/mvc/create-movie-database/

Cration d'une application de gestion de films avec ASP.NET MVC (C #) par Philippe Vialatte (Traduction) (ma page DVP) (Blog)

Listing 6 - Controllers\HomeController.cs (Mthodes 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 mthode Edit(). La premire mthode Edit()
retourne l'enregistrement de base de donnes qui correspond l'ID pass en paramtre la mthode. La deuxime
surcharge effectue les mises jour pour enregistrer un film dans la base de donnes.
Notez que vous devez rcuprer le film original, et faire ensuite appel ApplyPropertyChanges(), afin de mettre
jour le film existant dans la base de donnes.

Rsum
Le but de ce tutoriel est de vous donner une ide de l'effet que fait la construction d'une application ASP.NET MVC.
J'espre que vous avez dcouvert que la construction d'une application Web ASP.NET MVC est trs similaire la
construction d'une application ASP ou ASP.NET.
Dans ce tutoriel, nous avons examin uniquement les caractristiques les plus basiques du Framework ASP.NET
MVC. Dans les tutoriels suivants, nous plongerons plus en profondeur dans des sujets tels que les contrleurs, les
actions des contrleur, les vues, les donnes des vues, et les auxiliaires HTML (HTML Helpers).

- 22 Copyright 2009 - Equipe dotnet. Aucune reproduction, mme 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' 3 ans de prison et jusqu' 300 000 E
de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/mvc/create-movie-database/

You might also like