Construction d'une application web ASP.NET MVC 5 à l'aide de Visual Studio

(1)

Le 24 novembre 2020 Développement Web en ASP.NET ENSAT 2020-2021 : Génie Informatique 3^ème année cycle ingénieur

Construction d'une application web ASP.NET MVC 5 à l'aide de Visual Studio

Département Mathématiques & Informatique

Table des matières

Mise en route ... 2

Ajout d'un contrôleur ... 6

Ajout d'une vue ... 13

Ajout d'un modèle ... 24

Création d'une chaîne de connexion et de travailler avec SQL Server LocalDB ... 27

Pour accéder aux données de votre modèle d'un contrôleur ... 30

Examinant les méthodes Edit et la vue d'édition ... 41

(2)

Mise en route

Créer votre première Application

Cliquez sur Créer un projet, puis sélectionnez le langage c# sur la gauche et puis sélectionnez Application Web ASP.NET. Nommez votre projet « MvcMovieApplication» et puis cliquez sur OK.

(3)

Dans la boîte de dialogue Créer une application web ASP.NET , cliquez sur MVC et puis cliquez sur Créer.

(4)

Visual Studio utilise un modèle par défaut pour le projet ASP.NET MVC, que vous venez de créer.

(5)

Cliquez sur F5 pour démarrer le débogage. F5 oblige Visual Studio à lancer IIS Express et exécutez votre application web Visual Studio puis lance un navigateur et ouvre la page d'accueil de l'application.

L'application assure également pour vous inscrire et vous connecter. L'étape suivante consiste à modifier le

fonctionnement de cette application et en savoir un peu plus sur ASP.NET MVC. Fermez l'application ASP.NET MVC et nous allons changer du code.

(6)

Ajout d'un contrôleur

MVC est synonyme de modèle-vue-contrôleur. MVC est un pattern pour développer des applications qui sont bien architecturé, facile à entretenir. Contiennent des applications basées sur le MVC :

• Modèle : Classes qui représentent les données de l'application et qui utilisent une logique de validation pour faire respecter les règles de métier pour que les données.

• Vues: les fichiers Template que votre application utilise pour générer dynamiquement les réponses HTML.

• Contrôleurs : Classes qui gèrent les demandes entrantes de navigateur, récupérer des données de modèle et ensuite spécifier les vues qui retournent une réponse au navigateur.

Nous couvrant tous ces concepts dans ce TP et vous montrer comment s'en servir pour construire une application.

Explication :

Le contrôleur correspond au point d’entrée d’une requête http : Prenons l’URL suivante:

http://www.ensat.ac.ma/blog/index.

En Asp.Net MVC cette URL sera interprétée de la manière suivante : {www.ensat.ac.ma} => Nom de domaine, jusque-là, rien de nouveau.

{blog} => Là ça devient intéressant, ce segment de l’URL correspond au contrôleur qui sera invoqué par le moteur de routing du Framework MVC.

{index} => Ce segment correspond à l’action qui sera appelée à l’intérieur du controller. Concrètement, il s’agit du nom de la méthode de la classe.

Bien sûr, il s’agit du comportement par défaut, cette logique peut être modifiée et personnalisée.

Nous allons commencer par créer une classe de contrôleur. Dans de L'Explorateur de solutions, faites un clic droit le contrôleurs dossier, puis cliquez sur Add, puis contrôleur .

(7)

Dans la boîte de dialogue Ajouter une structure, cliquez sur Contrôleur de MVC 5 – vide et puis cliquez sur Ajouter.

Vous remarquerez également que le nom du contrôleur est automatiquement suffixé de “Controller”.

Rien ne vous oblige à suivre cette nomenclature, mais sachez que cela fait partie des bonnes pratiques de Microsoft et qu’il est fortement recommandé de la respecter. En effet cette règle permet de différencier les classes du Controller des autres classes que vous serez amené à créer dans votre projet.

Nommez votre nouveau contrôleur « HelloWorldController », puis cliquez sur Ajouter.

(8)

Notez que dans L'Explorateur qu'un nouveau fichier a été créé nommé HelloWorldController.cs et un nouveau dossier Views\HelloWorld. Le contrôleur est ouvert dans l'IDE.

Remplacez le contenu du fichier avec le code suivant.

using System.Web;

using System.Web.Mvc;

namespace MvcMovie.Controllers {

public class HelloWorldController : Controller {

(9)

//

// GET: /HelloWorld/

public string Index() {

return "This is my <b>default</b> action...";

}

//

// GET: /HelloWorld/Welcome/

public string Welcome() {

return "This is the Welcome action method...";

} } }

Les méthodes du contrôleur retourneront une chaîne HTML à titre d'exemple. Le contrôleur est appelé

HelloWorldController et la première méthode est nommée Index. Nous allons appeler à partir d'un navigateur. Exécutez l'application (en appuyant sur F5 ou Ctrl + F5). Dans le navigateur, ajoutez « HelloWorld » le chemin d'accès dans la barre d'adresse. (Par exemple, dans l'illustration ci-dessous, c' est http://localhost:44357/HelloWorld.) La page dans le navigateur va ressembler à la capture d'écran suivante. Dans la méthode ci-dessus, le code renvoyé une chaîne directement.

ASP.NET MVC appelle différents classes contrôleur (et différents méthodes d'action en leur sein) selon l'URL entrante. La logique de routage URL par défaut utilisée par ASP.NET MVC utilise un format comme celui-ci pour déterminer quel code appeler :

/[Controller]/[ActionName]/[Parameters]

Vous définissez le format de routage dans le fichier App_Start/RouteConfig.cs . public class RouteConfig

{

public static void RegisterRoutes(RouteCollection routes) {

routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

routes.MapRoute(

(10)

url: "{controller}/{action}/{id}",

defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }

);

}

Lorsque vous exécutez l'application et ne fournissez des segments d'URL, il utilise par défaut le contrôleur « Home » et la méthode d'action « Index » spécifié dans la section valeurs par défaut du code ci-dessus.

La première partie de l'URL détermine la classe de contrôleur à exécuter. Si /HelloWorld mappe à la HelloWorldController classe. La deuxième partie de l'URL détermine la méthode d'action sur la classe à exécuter. Si /HelloWorld/Index causerait la méthode Index de la classe HelloWorldController à exécuter. Notez que nous n'avions pas ajouté Index à /HelloWorld et la méthode Index a été utilisée par défaut. C'est parce qu'une méthode nommée Index est la méthode par défaut qui sera appelée sur un contrôleur s’elle n’est pas spécifiée explicitement. La troisième partie du segment URL ( Parameters) c’est pour acheminer les données.

Accédez à http://localhost:44357/HelloWorld/Welcome. La méthode Welcome s'exécute et retourne la chaîne "C'est la méthode d'action Welcome". Le mappage de MVC par défaut est /[Controller]/[ActionName]/[Parameters]. Pour cette URL, le contrôleur est HelloWorld et Welcome est la méthode d'action. Vous n'avez pas utilisé [Parameters] qu’est une partie de l'URL.

Nous allons modifier l'exemple un peu afin que vous pouvez passer des informations de paramètre de l'URL au contrôleur (par exemple, /HelloWorld/Welcome? name = Ginf & level = 3). Changer votre Welcome méthode pour inclure deux

(11)

paramètres comme indiqué ci-dessous. Notez que le code utilise la fonctionnalité de paramètre optionnel c# pour indiquer que le level paramètre si par défaut à 1, si aucune valeur n'est passée pour ce paramètre.

public string Welcome(string name, int level = 1) {

return HttpUtility.HtmlEncode("Hello " + name + ", Level is: " + level);

}

Remarque sur la sécurité : Le code ci-dessus utilise HttpServerUtility.HtmlEncode pour protéger l'application des entrées malveillantes (à savoir le JavaScript). Pour plus d'informations voir Comment : protéger contre les attaques de Script dans une Application Web en utilisant l'encodage HTML à cordes.

Lancez votre application et accédez à l'URL de l'exemple (http://localhost:44357/HelloWorld/Welcome? name = Ginf &

level = 3). Vous pouvez essayer différentes valeurs pourname et level dans l'URL. Le système de liaison pour le modèle MVC ASP.NET mappe automatiquement les paramètres nommés de la chaîne de requête dans la barre d'adresse aux paramètres dans votre méthode.

Dans l'exemple ci-dessus, le segment d'URL ( Parameters) n'est pas utilisé, les paramètres name et level sont transmis sous forme de chaînes de requête. Le ? (point d'interrogation) dans l'URL ci-dessus est un séparateur, et suivent les chaînes de requête. Le & caractère sépare les chaînes de requête.

Remplacez la méthode Welcome avec le code suivant :

public string Welcome(string name, int ID = 1) {

return HttpUtility.HtmlEncode("Hello " + name + ", ID: " + ID);

}

Exécutez l'application et entrez l'URL suivante : http://localhost:44357/HelloWorld/ Welcome /3? name = GINF

Cette fois le troisième segment de l'URL correspondant au paramètre de routage ID. La méthode d'action Welcome contient un paramètre (ID) correspondant à la spécification de l'URL dans la méthode RegisterRoutes . public static void RegisterRoutes(RouteCollection routes)

{

routes.MapRoute(

(12)

);

}

Dans les applications ASP.NET MVC, il est plus courant de passer des paramètres en tant que données de routage (comme nous l’avons fait avec ID ci-dessus) et de les transmettre sous forme de chaînes de requête. Vous pourriez également ajouter une route pour passer le name et level dans les paramètres sous forme de données d'itinéraire dans l'URL. Dans le fichier App_Start\RouteConfig.cs , ajoutez la route de "Hello" :

public class RouteConfig {

routes.MapRoute(

);

routes.MapRoute(

url: "{controller}/{action}/{name}/{id}"

);

} }

Exécutez l'application et accédez à http://localhost:44357/helloWorld/Welcome/GINF/3.

Pour de nombreuses applications MVC, la route par défaut fonctionne très bien. Vous apprendrez plus loin dans ce TP comment passer des données à l'aide du modèle de classeur, et vous n'aurez pas à modifier l'itinéraire par défaut pour cela.

Dans ces exemples, le contrôleur a fait la partie « VC » de MVC — autrement dit, le travail de vue et le contrôleur. Le contrôleur a retourné directement du HTML. Normalement, nous ne voulons pas que contrôleurs retour du HTML directement, car cela devient très lourd au code. Au lieu de cela, nous utiliserons généralement un fichier de vue distincte afin de générer la réponse HTML. Voyons ensuite comment nous pouvons faire cela.

(13)

Ajout d'une vue

Dans cette section, vous allez modifier la classe HelloWorldController pour afficher les fichiers de vue permettant d'encapsuler proprement le processus de génération réponses HTML à un client.

Vous allez créer un fichier de modèle de vue en utilisant le moteur d'affichage Razor.

Les templates de vue basée sur le Razor portent une extension de fichier .cshtml et fournir un moyen élégant pour créer du HTML en sortie à l'aide du C#. Razor minimise le nombre de caractères et saisie requis lors de l'écriture d'un template d'affichage et permet une rapidité, fluidité, du codage de flux de travail.

Actuellement, la méthode Index retourne une chaîne avec un message qui est codé dans la classe de contrôleur. Changer la méthode Index pour renvoyer un objet View , comme illustré dans le code suivant :

public ActionResult Index() {

return View();

}

La méthode de Index ci-dessus utilise une vue pour générer une réponse HTML dans le navigateur. Les méthodes des contrôleurs (également connues comme méthodes d'action), telle que la méthode de Index ci-dessus, retournent généralement un ActionResult (ou une classe dérivée de ActionResult), des types non primitifs comme chaîne.

Clic droit sur le dossier Views\HelloWorld et cliquez sur Ajouter, puis cliquez sur MVC 5 Voir Page avec disposition (Razor).

(14)

Dans la boîte de dialogue Spécifier le nom d'élément , entrez Index et puis cliquez sur OK.

Dans la boîte de dialogue Sélectionner une Page de disposition , acceptez la valeur par défaut _Layout.cshtml , puis cliquez sur OK.

(15)

Dans la boîte de dialogue ci-dessus, le dossier Views\Shared est sélectionné dans le volet gauche. Si vous aviez un fichier mise en page personnalisée dans un autre dossier, vous pouvez le sélectionner.

Le fichier MvcMovieApplication\Views\HelloWorld\Index.cshtml est créé.

Ajoutez le code en jaune :

@{

Layout = "~/Views/Shared/_Layout.cshtml";

}

@{

ViewBag.Title = "Index";

}

<h2>Index</h2>

<p>Hello from our View Template!</p>

Faites un clic droit sur le fichier Index.cshtml et sélectionnez afficher dans le navigateur.

(16)

Vous pouvez également cliquez droit sur le fichier Index.cshtml et sélectionnez voir en Page inspecteur. Voir le tutoriel de l'inspecteur de la Page pour plus d'informations.

Sinon, exécutez l'application et naviguez vers le contrôleur de HelloWorld (

http://localhost:xxxx/HelloWorld

^{). La}

méthode Index dans votre contrôleur n'a pas fait beaucoup de travail ; simplement, il a couru l'instruction return View(), qui précise que la méthode doit utiliser un fichier de modèle de vue pour restituer une réponse au navigateur. Parce que vous n'a pas spécifier explicitement le nom du fichier modèle vue d'utiliser, ASP.NET MVC par défaut en utilisant le fichier

Index.cshtml

de la vue dans le dossier

\Views\HelloWorld

. L'image ci-dessous montre la chaîne « Hello from our View Template! » codé en directe dans la vue.

(17)

Évolution des vues et Pages de disposition

Tout d'abord, vous souhaitez modifier le lien « Nom de l'Application » en haut de la page. Ce texte est commun à chaque page. Elle est effectivement appliquée dans un seul endroit dans le projet, même si elle apparaît sur chaque page de l'application. Allez dans le dossier /Views/Shared dans L'Explorateur de solutions et ouvrez le fichier _Layout.cshtml . Ce fichier s'appelle Layout et il se trouve dans le dossier Shared et il est utilisé par toutes les autres pages.

Le template Layout permet de préciser le layout de conteneur HTML de votre site en un seul endroit, puis l'appliquer sur plusieurs pages dans votre site. Recherchez la ligne de @RenderBody() . RenderBody est un espace réservé où toutes les pages spécifiques à la vue que vous créez apparaissent, "encapsulés" dans la page layout. Par exemple, si vous sélectionnez le lien A propos de, le point de vue Views\Home\About.cshtml est restitué à l'intérieur de la méthode RenderBody .

Modifier le contenu de l'élément title. Changer l' ActionLink sur la page layout de "Nom de l'Application" à "MVC Movie"

et le contrôleur de "Home" à "Movies". Le fichier complet de mise en page est illustré ci-dessous :

<!DOCTYPE html>

<html>

<head>

(18)

<title>@ViewBag.Title - Movie App</title>

@Styles.Render("~/Content/css")

@Scripts.Render("~/bundles/modernizr")

</head>

<body>

<button type="button" class="navbar-toggle" data-toggle="collapse"

data-target=".navbar-collapse">

</button>

@Html.ActionLink("MVC Movie", "Index", "Movies", null, new { @class =

"navbar-brand" }) </div>

<li>@Html.ActionLink("Home", "Index", "Home")</li>

<li>@Html.ActionLink("About", "About", "Home")</li>

<li>@Html.ActionLink("Contact", "Contact", "Home")</li>

</ul>

@Html.Partial("_LoginPartial") </div>

</div>

@RenderBody() <hr />

<p>© @DateTime.Now.Year - My ASP.NET Application</p>

</footer>

</div>

(19)

@Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @RenderSection("scripts", required: false)

</body>

</html>

Exécutez l'application et Notez qu'il dit maintenant « MVC Movie ». Cliquez sur le lien du sujet et vous voyez comment cette page affiche "MVC Movie", trop. Nous avons été en mesure d'apporter la modification une fois dans le modèle de disposition et ont toutes les pages du site reflètent le nouveau titre.

Lorsque nous avons créé tout d'abord le fichier Views\HelloWorld\Index.cshtml , il contient le code suivant :

@{

}

Le code de Razor ci-dessus définit la mise en page. Examinez le fichier Views\_ViewStart.cshtml , il contient la même balise de Razor. Le fichierViews\_ViewStart.cshtml définit la disposition commune qui utiliseront toutes les vues, donc vous pouvez supprimer ce code dans le fichier Views\HelloWorld\Index.cshtml .

@*@{

}*@

@{

ViewBag.Title = "Index";

}

(20)

<h2>Index</h2>

Vous pouvez utiliser la propriété de Layout pour définir une vue de la mise en page différente ou définie sur null si aucun fichier de mise en page ne sera utilisé.

Maintenant, nous allons changer le titre de la vue Index.

Ouvrez MvcMovie\Views\HelloWorld\Index.cshtml. Il y a deux endroits pour faire le changement : tout d'abord, le texte qui apparaît dans le titre du navigateur, puis dans l'élément <h2>. Vous le ferez différemment afin de voir quel morceau de code change quelle partie de l'application.

@{

ViewBag.Title = "Movie List";

}

<h2>My Movie List</h2>

Pour indiquer l'élément title qui s’affiche sur le HTML, le code ci-dessus définit une propriété Title de l'objet ViewBag (qui est dans le modèle d'affichage Index.cshtml ). Notez que le modèle de disposition ( Views\Shared\_Layout.cshtml ) utilise cette valeur dans l'élément <title> dans le cadre de la section <head> du code HTML que nous avons modifié précédemment.

<!DOCTYPE html>

<html>

<head>

<title>@ViewBag.Title - Movie App</title>

@Styles.Render("~/Content/css")

@Scripts.Render("~/bundles/modernizr")

</head>

En utilisant cette approche ViewBag , vous pouvez passer facilement des autres paramètres entre votre modèle d'affichage et votre fichier de mise en page.

Exécutez l'application. Notez que le titre du navigateur, le titre principal et les titres secondaires ont changé. (Si vous ne voyez pas de changements dans le navigateur, vous pourriez être Regarde un contenu mis en cache. Appuyez sur Ctrl + F5 dans votre navigateur pour forcer la réponse du serveur à charger.) Le titre du navigateur est créé avec le

ViewBag.Title , nous avons mis dans le modèle d'affichage Index.cshtml et les autres "-film App" ajouté dans le fichier de mise en page.

(21)

Notez également comment le contenu dans le modèle d'affichage Index.cshtml a fusionné avec le modèle d'affichage _Layout.cshtml et une seule réponse HTML a été envoyée au navigateur. Modèles de disposition rendent vraiment facile les modifications qui s'appliquent dans l'ensemble de toutes les pages dans votre application.

Notre peu de « données » (dans ce cas, le message «Hello from our View Template!») est codé en directe. L'application MVC dispose d'un "V" (vue) et vous avez un "C" (contrôleur), mais pas de "M" (modèle) encore. Nous allons montrer comment créer une base de données et extraire des données de modèle de celui-ci.

Passage des données du contrôleur à la vue

Avant que nous allons à une base de données et parler de modèles, tout d'abord, parlons de passage des informations du contrôleur à une vue. Les classes contrôleur sont appelés en réponse à une demande d'URL entrante. Une classe de contrôleur est là où vous écrivez le code qui gère le navigateur entrant, récupère les données d'une base de données et en fin de compte décide quel type de réponse à envoyer au navigateur. Les templates d'affichage sont lancées ensuite à partir d'un contrôleur pour générer et formater une réponse HTML au navigateur.

Les contrôleurs sont chargés de fournir toutes les données ou les objets qui sont requis pour un modèle d'affichage pour rendre une réponse au navigateur. Une bonne pratique : un modèle d'affichage ne doit jamais exécuter la logique métier ou interagir avec une base de données directement. Au lieu de cela, un modèle d'affichage devrait fonctionner uniquement avec les données qui sont fournies par le contrôleur. Maintenir cette « séparation des tâches » permet de garder votre code propre, testables et plus facile à gérer.

Actuellement, la méthode d'action Welcome dans la classe HelloWorldController prend un name et un paramètre level et ensuite renvoie les valeurs directement dans le navigateur. Plutôt que d'avoir le contrôleur à rendre cette réponse sous forme de chaîne, nous allons changer le contrôleur pour utiliser un modèle d'affichage à la place. Le modèle d'affichage va générer une réponse dynamique, ce qui signifie que vous devrez passer des bits de données du contrôleur à la vue afin de générer la réponse. Vous pouvez le faire en donnant le contrôleur la possibilité de mettre les données dynamiques (paramètres) et que le modèle d'affichage doit récupérer dans un objet ViewBag pour ensuite accéder au modèle d'affichage.

Revenez au fichier HelloWorldController.cs et modifiez la méthode Welcome pour ajouter une valeur de Message et Level à l'objet ViewBag . ViewBag est un objet dynamique, ce qui signifie que vous pouvez y mettre ce que vous

(22)

voulez ; l'objet ViewBag n'a aucuns propriétés définis jusqu'à ce que vous mettiez quelque chose dedans. Le système de liaison pour le modèle MVC ASP.NET mappe automatiquement les paramètres nommés (name et level) de la chaîne de requête dans la barre d'adresse aux paramètres dans votre méthode. Le dossier complet de HelloWorldController.cs ressemble à ceci :

using System.Web;

using System.Web.Mvc;

namespace MvcMovie.Controllers {

public class HelloWorldController : Controller {

return View();

}

public ActionResult Welcome(string name, int level = 1) {

ViewBag.Message = "Hello " + name;

ViewBag.Level = level;

return View();

} } }

L'objet ViewBag contient maintenant des données qui seront transmises automatiquement à l'affichage. Ensuite, vous avez besoin d'un modèle d'affichage Bienvenue ! Dans le menu générer , sélectionnez Générer la Solution (ou Ctrl + Maj + B) pour s'assurer que le projet est compilé. Clic droit sur le dossier Views\HelloWorld et cliquez sur Ajouter, puis cliquez sur MVC 5 Voir Page avec (disposition Razor).

Dans la boîte de dialogue Spécifier le nom d'élément, entrez Welcome et puis cliquez sur OK.

(23)

Dans la boîte de dialogue Sélectionner une Page de disposition, acceptez la valeur par défaut _Layout.cshtml, puis cliquez sur OK.

Le fichier MvcMovie\Views\HelloWorld\Welcome.cshtml est créé.

Remplacez la balise dans le fichier Welcome.cshtml . Vous allez créer une boucle qui dit « Hello » autant de fois que l'utilisateur dit qu'il se doit. Le dossier complet de Welcome.cshtml est illustré ci-dessous.

@{

ViewBag.Title = "Welcome";

}

<h2>Welcome</h2>

(24)

<ul>

@for (int i = 0; i < ViewBag.level; i++) {

<li>@ViewBag.Message</li>

}

</ul>

Exécutez l'application, puis accédez à l'URL suivante :

http://localhost:22288/HelloWorld/Welcome? name=GINF&level=3

Maintenant données sont tirées de l'URL et transmises au contrôleur en utilisant le modèle de classeur. Le contrôleur empaquète les données dans un objet ViewBag et passe cet objet à la vue. La vue affiche ensuite les données au format HTML à l'utilisateur.

Dans l'exemple ci-dessus, nous avons utilisé un objet ViewBag pour transmettre les données du contrôleur à une vue.

Nous avons utilisé un modèle d'affichage pour transférer des données d'un contrôleur à une vue. L'approche modèle vue en passant les données est généralement beaucoup préférable à l'approche de vue sans modèle. Eh bien, c'était une sorte de « M » pour le modèle, mais pas le genre de base de données.

Ajout d'un modèle

Dans cette section, vous ajouterez quelques classes pour gérer les films dans une base de données. Ces classes seront de la partie « modèle » de l'application ASP.NET MVC.

Vous allez utiliser une technologie d'accès aux données de .NET Framework appelée l’Entity Framework pour définir et travailler avec ces classes du modèle. Entity Framework (souvent dénommé "EF") prend en charge un modèle de

développement appelé Code First. Code tout d'abord vous permet de créer des objets de modèle en écrivant des classes simples. (Ce sont également connu sous le nom des classes POCO, de «plain-old CLR objects.")») Vous pourrez ensuite créée à la volée la base de données à partir de vos classes, ce qui permet à un workflow de développement très propre et

(25)

rapide. Si vous devez d'abord créer la base de données. Vous pouvez alors suivre le TP1, qui couvre la première partie Scaffolding de développement d'applications à base de EF.

Ajouter des Classes de modèle

Dans l' Explorateur de solutions, faites un clic droit sur le dossier des modèles , sélectionnez Ajouter et puis sélectionnez classe.

Entrez le nom de classe "Movie".

Ajoutez les cinq propriétés suivantes à la classe de Movie : using System;

namespace MvcMovie.Models {

public class Movie {

public int ID { get; set; } public string Title { get; set; }

public DateTime ReleaseDate { get; set; } public string Genre { get; set; }

public decimal Price { get; set; } }

}

Nous allons utiliser la classe Movie pour représenter des films dans une base de données. Chaque instance d'un objet Movie correspondra à une ligne d'une table de base de données, et chaque propriété de la classe de Movie sera mappée à une colonne dans la table.

Dans le même fichier, ajoutez la classe MovieDBContext suivante : using System;

(26)

using System.Data.Entity;

public int ID { get; set; } public string Title { get; set; }

public class MovieDBContext : DbContext {

public DbSet<Movie> Movies { get; set; } }

}

La classe MovieDBContext représente le contexte de base de données de film Entity Framework, qui gère la récupération, le stockage et mise à jour des instances de classe du Movie dans une base de données. La MovieDBContext dérive de la classe de base de DbContext fournie par Entity Framework.

Afin d'être en mesure de référencier les DbContext et DbSet, vous devez ajouter l'instruction using suivante en haut du fichier :

Vous pouvez le faire en ajoutant manuellement à l'aide de l'instruction, ou vous pouvez faites un clic droit sur les lignes ondulées rouges cliquez sur résoudre et puis cliquez sur using System.Data.Entity.

(27)

Remarque : Les instructions inutilisées de using ont été supprimées. Vous pouvez pour cela faire un clic droit dans le fichier, cliquez sur Organiser les instructions using et puis cliquez sur Supprimer les instructions Using obsolètes.

Nous avons enfin ajouté un modèle (le M dans MVC). Dans la section suivante, vous travaillerez avec la chaîne de connexion de base de données.

Création d'une chaîne de connexion et de travailler avec SQL Server LocalDB

La classe MovieDBContext , que vous avez créé gère la tâche de se connecter à la base de données et de cartographie des objets Movie aux enregistrements de la base de données. Une question que vous pourriez vous demander,

cependant, c'est comment spécifier quelle base de données est connectée. Vous n'avez pas réellement spécifié quelle base de données à utiliser, Entity Framework utilise par défaut le LocalDB. Dans cette section, nous allons ajouter explicitement une chaîne de connexion dans le fichier Web.config de l'application.

SQL Server Express LocalDB

LocalDB est une version allégée du SQL Server Express Database Engine qui commence à la demande et s'exécute en mode utilisateur. LocalDB s'exécute dans un mode spécial de SQL Server Express qui vous permet de travailler avec des bases de données sous forme de fichiers .mdf . En général, les fichiers de base de données LocalDB sont conservés dans le dossier App_Data d'un projet web.

(28)

SQL Server Express n'est pas recommandé pour une utilisation dans les applications web de production. LocalDB en particulier ne devrait pas servir à la production avec une application web parce qu'il n'est pas conçu pour fonctionner avec IIS. Cependant, une base de données LocalDB peut être facilement migrée vers SQL Server ou SQL Azure.

Dans Visual Studio 2013 (et en 2012), LocalDB est installé par défaut avec Visual Studio.

Par défaut, Entity Framework recherche une chaîne de connexion, le même nom que la classe de contexte de l'objet (MovieDBContext pour ce projet). Pour plus d'informations, consultez Chaînes de connexion SQL Server pour les Applications Web ASP.NET.

Ouvrez dans la racine de l’application le fichier Web.config ci-dessous. (Pas le fichier Web.config dans le dossier vues .)

Trouver l'élément <connectionStrings> :

(29)

Ajoutez la chaîne de connexion suivante à l'élément <connectionStrings> dans le fichier Web.config .

<add name="MovieDBContext"

connectionString="Data

Source=(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|\Movies.mdf;Integrated Security=True" providerName="System.Data.SqlClient" />

L'exemple suivant montre une partie du fichier Web.config avec la nouvelle chaîne de connexion a ajouté :

<add name="DefaultConnection" connectionString="Data

Source=(LocalDb)\v11.0;AttachDbFilename=|DataDirectory|\aspnet-MvcMovie- 20130603030321.mdf;Initial Catalog=aspnet-MvcMovie-20130603030321;Integrated Security=True" providerName="System.Data.SqlClient" />

<add name="MovieDBContext" connectionString="Data

Source=(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|\Movies.mdf;Integrated Security=True" providerName="System.Data.SqlClient"

/>

Les deux chaînes de connexion sont très similaires. La première chaîne de connexion nommée DefaultConnection est utilisée pour la base de données membres, pour contrôler qui peut accéder à l'application. Vous avez ajouté la chaîne de connexion spécifie une base de données LocalDB nommé Movie.mdf situé dans le dossier App_Data . Le nom de la chaîne de connexion doit correspondre au nom de la classe DbContext .

using System;

public int ID { get; set; }

public string Title { get; set; }

}

Il est inutile en fait d'ajouter la chaîne de connexion MovieDBContext. Si vous ne spécifiez aucune chaîne de connexion, Entity Framework créera une base de données LocalDB dans le répertoire utilisateurs avec le nom qualifié complet de la classe de DbContext (dans ce cas MvcMovie.Models.MovieDBContext). Vous pouvez nommer la base de données avec ce que vous voulez, à condition qu'elle a le suffixe .MDF. Par exemple, nous pourrions nommer la base de données MyFilms.mdf.

Ensuite, vous allez générer une nouvelle classe de MoviesController que vous pouvez utiliser pour afficher les données de film et permettre aux utilisateurs de créer de nouveaux listings de cinéma.

(30)

Pour accéder aux données de votre modèle d'un contrôleur

Dans cette section, vous créez une nouvelle classe de MoviesController et écrire du code qui récupère les données de film et l'affiche dans le navigateur à l'aide d'un modèle d'affichage.

Générez l'application avant de passer à l'étape suivante. Si vous ne générez l'application, vous obtiendrez une erreur à l'ajout d'un contrôleur.

Dans l'Explorateur de solutions, cliquez droit sur le dossier de contrôleurs et puis cliquez sur Ajouter, puis contrôleur.

(31)

Dans la boîte de dialogue Ajouter une structure , cliquez sur Contrôleur 5 MVC avec vues, à l'aide d'Entity Framework et puis cliquez sur Ajouter.

• Sélectionnez Movie(MvcMovie.Models) pour la classe de modèle.

• Sélectionnez MovieDBContext (MvcMovie.Models) pour la classe de contexte de données.

• Pour le nom du contrôleur, entrez MoviesController.

L'image ci-dessous montre la boîte de dialogue :

Cliquez sur Ajouter. (Si vous obtenez une erreur, vous probablement n'a pas créé l'application avant de commencer l'ajout du contrôleur). Visual Studio crée les fichiers et les dossiers suivants :

• A MoviesController.cs fichier dans le dossier de contrôleurs .

• Un dossier Views\Movies .

• Create.cshtml, Delete.cshtml, Details.cshtml, Edit.cshtmlet Index.cshtml dans le nouveau dossier de Views\Movies . Visual Studio crée automatiquement le CRUD (créer, lire, mettre à jour et supprimer) les méthodes d'action et des vues pour vous (la création automatique des méthodes d'action CRUD et de vues est connue sous le nom scaffolding). Vous avez maintenant une application web entièrement fonctionnel que vous permet de créer, la liste, modifier et supprimer des entrées de cinéma.

Exécuter l'application et cliquez sur le Film de MVC lien (ou parcourez le contrôleur Movies en ajoutant /Movies à l'URL dans la barre d'adresse de votre navigateur). Parce que l'application s'appuie sur la valeur par défaut de routage (défini

(32)

dans le fichier App_Start\RouteConfig.cs ), le navigateur demande Http://localhost:xxxxx/films est acheminé vers la méthode par défaut d'action Index du contrôleur de Movies . En d'autres termes, le navigateur demande

http://localhost:22288/Movies est effectivement le même que le navigateur demande http://localhost:22288/Movies /Index.

Le résultat est une liste vide de films, parce que vous n'avez pas encore ajouté.

Création d'un film

Cliquez sur le lien Créer nouveau . Entrer dans quelques détails sur un film et puis cliquez sur le bouton créer .

(33)

Remarque : Vous n’êtes pas en mesure d'entrer des décimales ou des virgules dans le champ prix.

Apres avoir inclus correctement les données sur un film. En cliquant sur le bouton créer provoque la forme être publiée sur le serveur, où les informations sur le film sont enregistrées dans la base de données. Vous êtes alors redirigé vers l'URL /Movies , où vous pouvez voir le film nouvellement créé dans la liste.

(34)

(35)

Essayez de la modifier, les Détails et supprimer les liens, qui sont tous fonctionnels.

Examinant le Code généré

Ouvrez le fichier Controllers\MoviesController.cs et examinez la méthode Index générée. Une partie du contrôleur de film avec la méthode de Index est indiquée ci-dessous.

public class MoviesController : Controller {

private MovieDBContext db = new MovieDBContext();

// GET: /Movies/

return View(db.Movies.ToList());

}

Une demande au contrôleur de Movies renvoie toutes les entrées de la table de Movies et transmet ensuite les résultats à l'affichage de Index . La ligne suivante de la classe MoviesController instancie un contexte de base de données de film, comme décrit plus haut. Vous pouvez utiliser le contexte de base de données de film pour interroger, modifier et supprimer des films.

private MovieDBContext db = new MovieDBContext();

Les modèles fortement typées et le mot-clé @model

Vous avez vu comment un contrôleur peut passer des données ou objets à un modèle d'affichage à l'aide de l'objet ViewBag . Le ViewBag est un objet dynamique qui offre un moyen pratique de liaison tardive pour transmettre des informations à une vue.

MVC offre également la possibilité de transmettre des objets fortement typée à un modèle d'affichage. Cette approche fortement typée permet une meilleure compilation, vérification du code et une plus riche IntelliSense dans l'éditeur de Visual Studio. Le mécanisme scaffoldingpour la génération de modèles automatique dans Visual Studio utilise cette approche (qui est, en passant le modèle fortement typé) avec les modèles de classe et vue de MoviesController lorsqu'il a créé des méthodes et des vues.

Dans le fichier Controllers\MoviesController.cs , examinez la méthode générée de Details . La méthode de Details ci- dessous.

public ActionResult Details(int? id)

(36)

{

if (id == null) {

return new HttpStatusCodeResult(HttpStatusCode.BadRequest);

}

Movie movie = db.Movies.Find(id);

if (movie == null) {

return HttpNotFound();

}

return View(movie);

}

Le paramètre id est généralement transmis sous forme de routage de données, par exemple

http://localhost:22288/movies/details/1 définira le contrôleur pour le contrôleur film, l'action aux details et l' id à 1. Vous pouvez également passer à la carte d'identité avec une chaîne de requête comme suit : http://localhost:22288/movies/details?id=1

Si un Movie est trouvé, une instance du modèle Movie est passée à la vue de Details : return View(movie);

Examinez le contenu du fichier Views\Movies\Details.cshtml :

@model MvcMovie.Models.Movie

@{

ViewBag.Title = "Details";

}

<h2>Details</h2>

<div>

<h4>Movie</h4>

<hr />

<dt>

@Html.DisplayNameFor(model => model.Title) </dt>

@*Markup omitted for clarity.*@

</dl>

</div>

<p>

@Html.ActionLink("Edit", "Edit", new { id = Model.ID }) | @Html.ActionLink("Back to List", "Index")

</p>

(37)

En incluant une instruction de @model en haut du fichier de modèle de la vue, vous pouvez spécifier le type d'objet que la vue attend. Lorsque vous avez créé le contrôleur film, Visual Studio a automatiquement inclus la déclaration suivante de

@model en haut du fichier Details.cshtml :

Cette directive @model vous permet d'accéder au film que le contrôleur a transmis à l'affichage en utilisant un Model objet fortement typé. Par exemple, dans le modèle de Details.cshtml , le code passe chaque champ de film pour les DisplayNameFor et les DisplayFor HTML Helpers avec le Model objet fortement typé. Create et Edit méthodes et modèles de vue également passent un objet de modèle de film.

Examiner le modèle d'affichage Index.cshtml et la méthode Index dans le fichier MoviesController.cs . Remarquez comment le code crée un objet de List lorsqu'il appelle la méthode d'assistance de View dans la méthode d'action Index . Le code passe ensuite cette liste de Movies de la méthode d'action Index à la vue :

return View(db.Movies.ToList());

}

Lorsque vous avez créé le contrôleur film, Visual Studio a automatiquement inclus la déclaration suivante de @model en haut du fichier Index.cshtml :

@model IEnumerable<MvcMovie.Models.Movie>

Cette directive @model vous permet d'accéder à la liste des films que le contrôleur a transmis à l'affichage en utilisant un Model objet fortement typé. Par exemple, dans le modèle Index.cshtml , le code effectue une boucle sur les films en faisant une instruction foreach sur le Model objet fortement typé :

@foreach (var item in Model) { <tr>

<td>

@Html.DisplayFor(modelItem => item.Title) </td>

<td>

@Html.DisplayFor(modelItem => item.ReleaseDate) </td>

<td>

@Html.DisplayFor(modelItem => item.Genre) </td>

<td>

@Html.DisplayFor(modelItem => item.Price) </td>

<th>

@Html.DisplayFor(modelItem => item.Rating) </th>

(38)

<td>

@Html.ActionLink("Edit", "Edit", new { id=item.ID }) |

@Html.ActionLink("Details", "Details", new { id=item.ID }) | @Html.ActionLink("Delete", "Delete", new { id=item.ID }) </td>

</tr>

}

Parce que le Model objet est fortement typé (comme un objet IEnumerable<Movie> ), chaque objet item dans la boucle est de type Movie. Entre autres avantages, cela signifie que vous obtenez une vérification de la compilation du code et le support complet de IntelliSense dans l'éditeur de code :

Travailler avec SQL Server LocalDB

Entity Framework Code First a détecté que la chaîne de connexion de base de données qui a été fournie pointe à une base de données de Movies qui n'existe pas encore, donc le premier Code créé automatiquement la base de données.

Vous pouvez vérifier qu'il est été créé par la recherche dans le dossier App_Data . Si vous ne voyez pas le fichier

Movies.mdf , cliquez sur le bouton Afficher tous les fichiers dans la barre d'outils de L'Explorateur de solutions , cliquez sur le bouton Actualiser et puis développez le dossier App_Data .

(39)

Double-cliquez sur Movies.mdf pour ouvrir l'Explorateur de serveurs, puis développez le dossier Tables pour voir le tableau de films. Notez l'icône de clé à côté de l'ID. Par défaut, EF fera une propriété nommée ID de la clé primaire.

Cliquez-droit sur la table de Movies et sélectionnez Afficher les données de Table pour voir les données que vous avez créé.

(40)

Cliquez-droit sur la table de Movies et sélectionnez Ouvrir la définition de Table pour voir la structure de la table que Entity Framework Code First créé pour vous.

Remarquez comment le schéma des cartes table Movies à la classe de Movie que vous avez créée précédemment.

Entity Framework Code First automatiquement créé ce schéma basé sur votre catégorie de Movie .

Lorsque vous avez terminé, fermer la connexion en MovieDBContext un clic droit et en sélectionnant Fermer connexion.

(Si vous ne fermez pas la connexion, vous pouvez obtenir une erreur la prochaine fois que vous exécutez le projet).

Vous avez maintenant une base de données et des pages pour afficher, modifier, mettre à jour et supprimer des données.

Dans la suite, nous examinerons le reste du code structure et ajouter une méthode de SearchIndex et une vue de SearchIndex qui vous permet de rechercher des films dans cette base de données.

(41)

Examinant les méthodes Edit et la vue d'édition

Dans cette section, vous allez examiner la généré Edit les méthodes d'action et de vues pour le contrôleur de film. Mais tout d'abord nous allons présenter les améliorations pour afficher la date de sortie. Ouvrez le fichier Models\Movie.cs et ajoutez les lignes en surbrillance ci-dessous :

using System;

using System.ComponentModel.DataAnnotations;

public int ID { get; set; }

public string Title { get; set; }

[Display(Name = "Release Date")]

[DataType(DataType.Date)]

[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]

}

L'attribut Display spécifie ce qu'il faut afficher le nom d'un champ (en l'occurrence "Release Date" au lieu de

«ReleaseDate»). L'attribut de DataTypespécifie le type des données, dans ce cas c'est une date, pour le moment les informations stockées dans le champ n'est pas affiché.

Exécutez l'application et naviguez vers le contrôleur de Movies . Maintenez le pointeur de la souris sur un lien modifier pour voir l'URL qu'il relie aux.

(42)

Le lien modifier a été généré par la méthode Html.ActionLink dans la vue Views\Movies\Index.cshtml :

@Html.ActionLink("Edit", "Edit", new { id=item.ID })

L'objet Html est une aide qui est exposée à l'aide d'une propriété de la classe de base System.Web.Mvc.WebViewPage . La méthode ActionLink le Helper le rend facile de générer dynamiquement des liens hypertexte HTML qui pointent vers des méthodes d'action sur les contrôleurs. Le premier argument à la méthode ActionLink est de rendre le texte du lien (par exemple, <a>Edit Me</a>). Le second argument est le nom de la méthode d'action à appeler (dans ce cas, l'action Edit ). Le dernier argument est un objet anonyme qui génère les données de parcours (dans ce cas, l'ID de 4).

Le lien généré montré dans l'image précédente est http://localhost:22288/films/Edit/4. L'itinéraire par défaut (créé en App_Start\RouteConfig.cs) prend le modèle d'URL {controller}/{action}/{id}. Par conséquent, ASP.NET se traduit par http://localhost:22288/films/Edit/4 une requête à la méthode d'action Edit du contrôleur de Movies avec paramètre ID est égal à 4. Examinez le code suivant dans le fichier App_Start\RouteConfig.cs . La méthode MapRoute est utilisé pour router les requêtes HTTP vers le contrôleur correcte et la méthode d'action et fournir le paramètre d'ID facultatif. La méthode MapRoute est également utilisée par les HtmlHelpers comme ActionLink générer des URL donné le contrôleur, méthode d'action et des données de parcours.

(43)

routes.MapRoute(

);

}

Vous pouvez également passer des paramètres de méthode d'action à l'aide d'une chaîne de requête. Par exemple, l'URL Edit/films/http://localhost:22288? ID = 3 passe également le paramètre ID de 3 pour la méthode d'action Edit du contrôleur de Movies .

(44)

Ouvrir le contrôleur de Movies . Les deux méthodes d'action Edit figurent ci-dessous.

// GET: /Movies/Edit/5

public ActionResult Edit(int? id)

(45)

{

if (id == null) {

return new HttpStatusCodeResult(HttpStatusCode.BadRequest);

}

Movie movie = db.Movies.Find(id);

if (movie == null) {

return HttpNotFound();

}

return View(movie);

}

// POST: /Movies/Edit/5

// To protect from overposting attacks, please enable the specific properties you want to bind to, for

// more details see http://go.microsoft.com/fwlink/?LinkId=317598.

[HttpPost]

[ValidateAntiForgeryToken]

public ActionResult Edit([Bind(Include="ID,Title,ReleaseDate,Genre,Price")] Movie movie)

{

if (ModelState.IsValid) {

db.Entry(movie).State = EntityState.Modified;

db.SaveChanges();

return RedirectToAction("Index");

}

return View(movie);

}

Avis la deuxième méthode d'action Edit est précédée de l'attribut HttpPost . Cet attribut spécifie que cette surcharge de la méthode Edit peut être appelée uniquement pour les requêtes POST. Vous pouvez appliquer l'attribut HttpGet à la première méthode edit, mais ce n'est pas nécessaire, parce que c'est la valeur par défaut. (Nous nous référerons à des méthodes d'action qui sont assignées implicitement l'attribut HttpGet comme méthodes HttpGet ). L'attribut Bind est un autre mécanisme de sécurité important qui empêche les pirates de trop poster des données à votre modèle. Vous devez seulement inclure des propriétés dans l'attribut de liaison que vous souhaitez modifier. Vous pouvez lire sur s'et

(46)

l'attribut de liaison dans mon outre Remarque sur la sécurité. Dans le modèle simple utilisé dans ce tutoriel, nous engagera toutes les données dans le modèle. L'attribut ValidateAntiForgeryToken est utilisé pour prévenir la falsification d'une demande et est jumelé avec @Html.AntiForgeryToken() dans le fichier de vue de l'édition

(Views\Movies\Edit.cshtml), une partie est illustrée ci-dessous :

@{

ViewBag.Title = "Edit";

}

@using (Html.BeginForm()) {

@Html.AntiForgeryToken() <div class="form-horizontal">

<h4>Movie</h4>

<hr />

@Html.ValidationSummary(true) @Html.HiddenFor(model => model.ID)

@Html.LabelFor(model => model.Title, new { @class = "control-label col- md-2" })

@Html.EditorFor(model => model.Title)

@Html.ValidationMessageFor(model => model.Title) </div>

</div>

@Html.AntiForgeryToken() génère un jeton d'anti-contrefaçon de formulaire masqué qui doit correspondre dans la méthode Edit du contrôleur de Movies . Vous pouvez en savoir plus sur Cross-site request forgery (XSRF ou CSRF, également connu sous le nom) dans mon tutoriel XSRF/CSRF prévention dans MVC.

La méthode EditHttpGet prend le paramètre ID de film, lève les yeux du film à l'aide de la méthode Entity Framework Find et retourne le film sélectionné à la vue d'édition. Si un film est introuvable, HttpNotFound est retourné. Lorsque le système d'échafaudage créé la vue d'édition, il a examiné la Movie classe et créé le code pour restituer des éléments

<label> et <input> pour chaque propriété de la classe. L'exemple suivant montre l'affichage d'édition qui a été généré par le système d'échafaudage de visual studio :

(47)

@{

ViewBag.Title = "Edit";

}

@using (Html.BeginForm()) {

@Html.AntiForgeryToken() <div class="form-horizontal">

<h4>Movie</h4>

<hr />

@Html.ValidationSummary(true) @Html.HiddenFor(model => model.ID)

@Html.LabelFor(model => model.Title, new { @class = "control-label col- md-2" })

@Html.EditorFor(model => model.Title)

@Html.ValidationMessageFor(model => model.Title) </div>

</div>

@Html.LabelFor(model => model.ReleaseDate, new { @class = "control-label col-md-2" })

@Html.EditorFor(model => model.ReleaseDate)

@Html.ValidationMessageFor(model => model.ReleaseDate) </div>

</div>

@*Genre and Price removed for brevity.*@

</div>

(48)

</div>

}

<div>

@Html.ActionLink("Back to List", "Index")

</div>

@section Scripts {

@Scripts.Render("~/bundles/jqueryval") }

Remarquez comment le modèle d'affichage a une déclaration de @model MvcMovie.Models.Movie en haut du fichier, cette option indique que l'opinion attend le modèle pour le modèle d'affichage de type Movie.

Le code structure utilise plusieurs méthodes d'assistance pour rationaliser le balisage HTML. Le helper Html.LabelFor affiche le nom du champ ("Title", "Date de sortie", "Genre" ou "Prix"). Le programme d'assistance Html.EditorFor restitue un élément <input> HTML. Le helper Html.ValidationMessageFor affiche des messages de validation associés à cette propriété.

Exécutez l'application et accédez à l'URL /Movies . Cliquez sur un lien modifier . Dans le navigateur, affichez le code source de la page. Ci-dessous le code HTML de l'élément form.

<input name="__RequestVerificationToken" type="hidden" value="UxY6bkQyJCXO3Kn5AXg- 6TXxOj6yVBi9tghHaQ5Lq_qwKvcojNXEEfcbn-

FGh_0vuw4tS_BRk7QQQHlJp8AP4_X4orVNoQnp2cd8kXhykS01" /> <fieldset class="form- horizontal">

<legend>Movie</legend>

<label class="control-label" for="Title">Title</label>

<input class="text-box single-line" id="Title" name="Title" type="text"

value="GhostBusters" />

<span class="field-validation-valid help-inline" data-valmsg-for="Title"

data-valmsg-replace="true"></span>

</div>

(49)

</div>

<label class="control-label" for="ReleaseDate">Release Date</label>

</div>

<label class="control-label" for="Genre">Genre</label>

<input class="text-box single-line" id="Genre" name="Genre" type="text"

value="Comedy" />

<span class="field-validation-valid help-inline" data-valmsg-for="Genre"

</div>

<label class="control-label" for="Price">Price</label>

<input class="text-box single-line" data-val="true" data-val-number="The field Price must be a number." data-val-required="The Price field is required."

id="Price" name="Price" type="text" value="7.99" />

<span class="field-validation-valid help-inline" data-valmsg-for="Price"

</div>

</div>

(50)

</fieldset>

</form>

Les éléments <input> sont dans un élément de <form> HTML dont l'attribut action a la valeur post à l'URL /Movies/Edit . Les données de formulaire seront affichées sur le serveur lorsqu'un clic est effectué sur le bouton Enregistrer . La seconde ligne montre l' cachés XSRF jeton généré par l'appel de @Html.AntiForgeryToken() .

Traitement de la demande POST

La liste suivante répertorie la version HttpPost de la méthode d'action Edit .

[HttpPost]

[ValidateAntiForgeryToken]

public ActionResult Edit([Bind(Include="ID,Title,ReleaseDate,Genre,Price")] Movie movie)

{

if (ModelState.IsValid) {

db.Entry(movie).State = EntityState.Modified;

db.SaveChanges();

return RedirectToAction("Index");

}

return View(movie);

}

L'attribut ValidateAntiForgeryToken valide le jeton XSRF généré par l'appel de @Html.AntiForgeryToken() dans la vue.

Le classeur de modèles ASP.NET MVC prend les valeurs du formulaire affiché et crée un objet de Movie qui est passé comme paramètre de movie . La méthode ModelState.IsValid vérifie que les données fournies dans le formulaire peuvent servir à modifier (edit ou mise à jour) un objet Movie . Si les données sont valides, les données de film sont enregistrées à la collection de Movies de la db(MovieDBContext instance). Les nouvelles données du film sont enregistrées dans la base de données en appelant la méthode SaveChanges de MovieDBContext. Après avoir sauvegardé les données, le code redirige l'utilisateur vers la méthode d'action Index de la classe MoviesController , qui affiche la collection de films, y compris les changements que vient de faire.

Dès la validation du côté client détermine que les valeurs d'un champ ne sont pas valides, un message d'erreur s'affiche.

Si vous désactivez JavaScript, vous n'aurez pas validation côté client, mais le serveur détecte les valeurs publiées ne sont

(51)

pas valides, et les valeurs de la forme vont être réaffichées avec messages d'erreur. Plus tard dans le tutoriel, nous examinons validation plus en détail.

Les aides de Html.ValidationMessageFor dans le modèle d'affichage Edit.cshtml prendre soin d'afficher des messages d'erreur approprié.

(52)

(53)

Toutes les méthodes HttpGet suivent un modèle similaire. Ils identifient un objet film (ou une liste d'objets, dans le cas Index) et passent du modèle à la vue. La méthode Create passe un objet film vide à la vue de la création. Toutes les méthodes que créer, modifier, supprimer ou modifient des données dans le cas contraire le faire dans la HttpPost de surcharge de la méthode. Modification de données dans une méthode HTTP GET est un risque pour la sécurité, tel que décrit dans le blog de post ASP.NET MVC Astuce #46 – n'utilisez pas supprimer les liens car ils créent des trous de sécurité. Modification de données dans une méthode GET viole également les meilleures pratiques HTTP et le modèle architectural de reste , qui stipule que les requêtes GET ne devraient pas changer l'état de votre application. En d'autres termes, une opération GET doit être une opération sécuritaire qui n'a aucun effets secondaires et ne modifie pas vos données persistantes.

Si vous utilisez un ordinateur de l'anglais américain, vous pouvez ignorer cette section et passer à l'étape suivante du didacticiel. Vous pouvez télécharger la version généralisez ce tutoriel ici. Pour un excellent tutoriel de deux parties sur l'internationalisation, voir ASP.NET MVC 5 internationalisation de Nadeem.

Note à l'appui de jQuery validation pour les paramètres régionaux non anglais qui utilisent une virgule («, ») pour un point décimal et les formats de date US non-anglais, vous devez inclure globalize.js et votre fichier spécifique cultures/globalize.cultures.js (de https://github.com/jquery/globalize ) et le JavaScript pour utiliser

Globalize.parseFloat. Vous pouvez obtenir la validation de non-anglais jQuery de NuGet. (Ne pas installer généralisez si vous utilisez un paramètre régional anglais.)

1. Dans le menu Outils , cliquez sur Gestionnaire de Package de bibliothèqueet puis cliquez sur Manage NuGet Packages de Solution.

(54)

2. Dans le volet gauche, sélectionnez Online. (Voir l'image ci-dessous).

3. Dans la zone de saisie de recherche installé les paquets , entrez Globaliser.

(55)

Cliquez sur installer. Le fichier Scripts\jquery.globalize\globalize.js sera ajouté à votre projet. Le dossier

Scripts\jquery.globalize\cultures\ contient de nombreux fichiers JavaScript de culture. Remarque, il peut prendre cinq minutes pour installer ce package.

Le code suivant montre les modifications dans le fichier Views\Movies\Edit.cshtml :

@section Scripts {

@Scripts.Render("~/bundles/jqueryval")

<script

src="~/Scripts/globalize/cultures/globalize.culture.@(System.Threading.Thread.Current Thread.CurrentCulture.Name).js"></script>

$.validator.methods.number = function (value, element) { return this.optional(element) ||

!isNaN(Globalize.parseFloat(value));

}

(56)

$(document).ready(function () {

Globalize.culture('@(System.Threading.Thread.CurrentThread.CurrentCulture.Name)');

});

</script>

jQuery.extend(jQuery.validator.methods, { range: function (value, element, param) {

//Use the Globalization plugin to parse the value var val = Globalize.parseFloat(value);

return this.optional(element) || (

val >= param[0] && val <= param[1]);

} });

$.validator.methods.date = function (value, element) { return this.optional(element) ||

Globalize.parseDate(value) ||

Globalize.parseDate(value, "yyyy-MM-dd");

}

</script>

}

Pour éviter de répéter ce code dans chaque vue d'édition, vous pouvez la déplacer vers le fichier de mise en page. Pour optimiser le téléchargement de script, consultez mon tutoriel groupés et Minification.

Pour plus d'informations, consultez ASP.NET MVC 3 internationalisation et ASP.NET MVC 3 internationalisation - partie 2 (NerdDinner).

Comme une solution temporaire, si vous ne pouvez pas obtenir validation travaillant dans vos paramètres régionaux, vous pouvez forcer votre ordinateur à utiliser en anglais américain ou vous pouvez désactiver le JavaScript dans votre

navigateur. Pour forcer votre ordinateur à utiliser en anglais américain, vous pouvez ajouter l'élément globalization dans le fichier web.config de projets racine. Le code suivant montre l'élément globalization avec la culture mises à l'anglais des États-Unis.

<system.web>

</system.web>

(57)

Dans le prochain tutoriel, nous implémenterai fonctionnalité de recherche.