Création d’une application MVC 3 Application avec Razor et JavaScript non obstrusif
par Microsoft
L’exemple d’application web liste d’utilisateurs montre à quel point il est simple de créer ASP.NET applications MVC 3 à l’aide du moteur d’affichage Razor. L’exemple d’application montre comment utiliser le nouveau moteur d’affichage Razor avec ASP.NET MVC version 3 et Visual Studio 2010 pour créer un site web de liste d’utilisateurs fictif qui inclut des fonctionnalités telles que la création, l’affichage, la modification et la suppression d’utilisateurs.
Ce tutoriel décrit les étapes qui ont été effectuées pour générer l’exemple liste d’utilisateurs ASP.NET application MVC 3. Un projet Visual Studio avec du code source C# et VB est disponible pour accompagner cette rubrique : Téléchargement. Si vous avez des questions sur ce tutoriel, publiez-les sur le forum MVC.
Vue d’ensemble
L’application que vous allez créer est un site web de liste d’utilisateurs simple. Les utilisateurs peuvent entrer, afficher et mettre à jour les informations utilisateur.
Vous pouvez télécharger le projet VB et C# terminé ici.
Création de l’application web
Pour démarrer le didacticiel, ouvrez Visual Studio 2010 et créez un projet à l’aide du modèle application web ASP.NET MVC 3 . Nommez l’application « Mvc3Razor ».
Dans la boîte de dialogue Nouveau projet ASP.NET MVC 3 , sélectionnez Application Internet, sélectionnez le moteur d’affichage Razor, puis cliquez sur OK.
Dans ce tutoriel, vous n’utiliserez pas le fournisseur d’appartenance ASP.NET. Vous pouvez donc supprimer tous les fichiers associés à l’ouverture de session et à l’appartenance. Dans Explorateur de solutions, supprimez les fichiers et répertoires suivants :
- Contrôleurs\AccountController
- Modèles\AccountModels
- Views\Shared\_LogOnPartial
- Views\Account (et tous les fichiers de ce répertoire)
Modifiez le fichier _Layout.cshtml et remplacez le balisage à l’intérieur de l’élément <div> nommé logindisplay par le message « Connexion désactivée ». L’exemple suivant montre le nouveau balisage :
<div id="logindisplay">
Login Disabled
</div>
Ajout du modèle
Dans Explorateur de solutions, cliquez avec le bouton droit sur le dossier Modèles, sélectionnez Ajouter, puis cliquez sur Classe.
Nommez la classe UserModel. Remplacez le contenu du fichier UserModel par le code suivant :
using System.ComponentModel.DataAnnotations;
using System.Collections.Generic;
namespace Mvc3Razor.Models {
public class UserModel {
[Required]
[StringLength(6, MinimumLength = 3)]
[Display(Name = "User Name")]
[RegularExpression(@"(\S)+", ErrorMessage = "White space is not allowed")]
[ScaffoldColumn(false)]
public string UserName { get; set; }
[Required]
[StringLength(8, MinimumLength = 3)]
[Display(Name = "First Name")]
public string FirstName { get; set; }
[Required]
[StringLength(9, MinimumLength = 2)]
[Display(Name = "Last Name")]
public string LastName { get; set; }
[Required()]
public string City { get; set; }
}
public class Users {
public Users() {
_usrList.Add(new UserModel
{
UserName = "BenM",
FirstName = "Ben",
LastName = "Miller",
City = "Seattle"
});
_usrList.Add(new UserModel
{
UserName = "AnnB",
FirstName = "Ann",
LastName = "Beebe",
City = "Boston"
});
}
public List<UserModel> _usrList = new List<UserModel>();
public void Update(UserModel umToUpdate) {
foreach (UserModel um in _usrList) {
if (um.UserName == umToUpdate.UserName) {
_usrList.Remove(um);
_usrList.Add(umToUpdate);
break;
}
}
}
public void Create(UserModel umToUpdate) {
foreach (UserModel um in _usrList) {
if (um.UserName == umToUpdate.UserName) {
throw new System.InvalidOperationException("Duplicat username: " + um.UserName);
}
}
_usrList.Add(umToUpdate);
}
public void Remove(string usrName) {
foreach (UserModel um in _usrList) {
if (um.UserName == usrName) {
_usrList.Remove(um);
break;
}
}
}
public UserModel GetUser(string uid) {
UserModel usrMdl = null;
foreach (UserModel um in _usrList)
if (um.UserName == uid)
usrMdl = um;
return usrMdl;
}
}
}
La UserModel classe représente les utilisateurs. Chaque membre de la classe est annoté avec l’attribut Required de l’espace de noms DataAnnotations . Les attributs de l’espace de noms DataAnnotations fournissent une validation automatique côté client et côté serveur pour les applications web.
Ouvrez la HomeController classe et ajoutez une using directive afin de pouvoir accéder aux UserModel classes et Users :
using Mvc3Razor.Models;
Juste après la HomeController déclaration, ajoutez le commentaire suivant et la référence à une Users classe :
public class HomeController : Controller {
// The __usrs class is replacement for a real data access strategy.
private static Users _usrs = new Users();
La Users classe est un magasin de données en mémoire simplifié que vous allez utiliser dans ce tutoriel. Dans une application réelle, vous utiliseriez une base de données pour stocker les informations utilisateur. Les premières lignes du HomeController fichier sont illustrées dans l’exemple suivant :
using System.Web.Mvc;
using Mvc3Razor.Models;
namespace Mvc3Razor.Controllers {
public class HomeController : Controller {
// The __usrs class is replacement for a real data access strategy.
private static Users _usrs = new Users();
Générez l’application afin que le modèle utilisateur soit disponible pour l’Assistant De génération de modèles à l’étape suivante.
Création de l’affichage par défaut
L’étape suivante consiste à ajouter une méthode d’action et une vue pour afficher les utilisateurs.
Supprimez le fichier Views\Home\Index existant. Vous allez créer un fichier d’index pour afficher les utilisateurs.
Dans la HomeController classe, remplacez le contenu de la Index méthode par le code suivant :
return View(_usrs._usrList);
Cliquez avec le bouton droit à l’intérieur de la Index méthode, puis cliquez sur Ajouter une vue.
Sélectionnez l’option Créer une vue fortement typée . Pour Afficher la classe de données, sélectionnez Mvc3Razor.Models.UserModel. (Si Mvc3Razor.Models.UserModel ne s’affiche pas dans la zone Afficher la classe de données , vous devez générer le projet.) Vérifiez que le moteur d’affichage est défini sur Razor. Définissez Afficher le contenu sur Liste, puis cliquez sur Ajouter.
La nouvelle vue génère automatiquement les données utilisateur transmises à la Index vue. Examinez le fichier Views\Home\Index nouvellement généré. Les liens Créer,Modifier, Détails et Supprimer ne fonctionnent pas, mais le reste de la page est fonctionnel. Exécutez la page. Vous voyez une liste d’utilisateurs.
Ouvrez le fichier Index.cshtml et remplacez le ActionLink balisage pour Modifier, Détails et Supprimer par le code suivant :
@Html.ActionLink("Edit", "Edit", new { id=item.UserName }) |
@Html.ActionLink("Details", "Details", new { id=item.UserName }) |
@Html.ActionLink("Delete", "Delete", new { id=item.UserName })
Le nom d’utilisateur est utilisé comme ID pour rechercher l’enregistrement sélectionné dans les liens Modifier, Détails et Supprimer .
Création de l’affichage Détails
L’étape suivante consiste à ajouter une méthode d’action et une Details vue afin d’afficher les détails de l’utilisateur.
Ajoutez la méthode suivante Details au contrôleur de base :
public ViewResult Details(string id) {
return View(_usrs.GetUser(id));
}
Cliquez avec le bouton droit à l’intérieur de la Details méthode, puis sélectionnez Ajouter un affichage. Vérifiez que la zone Afficher la classe de données contient Mvc3Razor.Models.UserModel. Définissez Afficher le contenu sur Détails , puis cliquez sur Ajouter.
Exécutez l’application et sélectionnez un lien de détails. La structure automatique affiche chaque propriété dans le modèle.
Création de la vue Modifier
Ajoutez la méthode suivante Edit au contrôleur de base.
public ViewResult Edit(string id) {
return View(_usrs.GetUser(id));
}
[HttpPost]
public ViewResult Edit(UserModel um) {
if (!TryUpdateModel(um)) {
ViewBag.updateError = "Update Failure";
return View(um);
}
// ToDo: add persistent to DB.
_usrs.Update(um);
return View("Details", um);
}
Ajoutez une vue comme dans les étapes précédentes, mais définissez Afficher le contenu sur Modifier.
Exécutez l’application et modifiez le prénom et le nom de l’un des utilisateurs. Si vous ne respectez pas DataAnnotation les contraintes appliquées à la UserModel classe, lorsque vous envoyez le formulaire, vous verrez des erreurs de validation générées par le code du serveur. Par exemple, si vous remplacez le prénom « Ann » par « A », lorsque vous envoyez le formulaire, l’erreur suivante s’affiche sur le formulaire :
The field First Name must be a string with a minimum length of 3 and a maximum length of 8.
Dans ce didacticiel, vous traitez le nom d’utilisateur comme clé primaire. Par conséquent, la propriété nom d’utilisateur ne peut pas être modifiée. Dans le fichier Edit.cshtml , juste après l’instruction Html.BeginForm , définissez le nom d’utilisateur comme un champ masqué. Cela entraîne la transmission de la propriété dans le modèle. Le fragment de code suivant montre l’emplacement de l’instruction Hidden :
<h2>Edit</h2>
@using (Html.BeginForm()) {
@Html.Hidden("UserName", Model.UserName)
Remplacez le TextBoxFor balisage et ValidationMessageFor pour le nom d’utilisateur par un DisplayFor appel. La DisplayFor méthode affiche la propriété en tant qu’élément en lecture seule. L'exemple suivant montre le balisage complet. Les appels d’origine TextBoxFor et ValidationMessageFor sont commentés avec les caractères début-commentaire et commentaire de fin Razor (@* *@)
<div class="editor-label">
@Html.LabelFor(model => model.UserName)
</div>
<div class="editor-field">
@*
@Html.TextBoxFor(model => model.UserName)
@Html.ValidationMessageFor(model => model.UserName)
*@
@Html.DisplayFor(model => model.UserName)
</div>
Activation de la validation Client-Side
Pour activer la validation côté client dans ASP.NET MVC 3, vous devez définir deux indicateurs et inclure trois fichiers JavaScript.
Ouvrez le fichierWeb.configde l’application . Vérifiez que that ClientValidationEnabled et UnobtrusiveJavaScriptEnabled sont définis sur true dans les paramètres de l’application. Le fragment suivant du fichier Web.config racine montre les paramètres corrects :
<appSettings>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>
La définition de UnobtrusiveJavaScriptEnabled la valeur true active la validation discrète d’Ajax et de client discrète. Lorsque vous utilisez la validation discrète, les règles de validation sont transformées en attributs HTML5. Les noms d’attribut HTML5 ne peuvent se composer que de minuscules, de chiffres et de tirets.
La définition ClientValidationEnabled de la valeur true active la validation côté client. En définissant ces clés dans le fichier Web.config de l’application, vous activez la validation du client et javaScript discret pour l’ensemble de l’application. Vous pouvez également activer ou désactiver ces paramètres dans des vues individuelles ou dans des méthodes de contrôleur à l’aide du code suivant :
HtmlHelper.ClientValidationEnabled = true;
HtmlHelper.UnobtrusiveJavaScriptEnabled = true;
Vous devez également inclure plusieurs fichiers JavaScript dans la vue rendue. Un moyen simple d’inclure le Code JavaScript dans toutes les vues consiste à les ajouter au fichier Views\Shared\_Layout.cshtml . Remplacez l’élément <head> du fichier _Layout.cshtml par le code suivant :
<head>
<title>@View.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
</head>
Les deux premiers scripts jQuery sont hébergés par le réseau de distribution de contenu (CDN) Microsoft Ajax. En tirant parti du CDN Microsoft Ajax, vous pouvez améliorer considérablement les performances de premier accès de vos applications.
Exécutez l’application et cliquez sur un lien de modification. Affichez la source de la page dans le navigateur. La source du navigateur affiche de nombreux attributs du formulaire data-val (pour la validation des données). Lorsque la validation du client et javaScript discret sont activés, les champs d’entrée avec une règle de validation client contiennent l’attribut data-val="true" pour déclencher la validation du client discrète. Par exemple, le City champ dans le modèle a été décoré avec l’attribut Required , ce qui génère le code HTML indiqué dans l’exemple suivant :
<div class="editor-field">
<input data-val="true" data-val-required="The City field is required." id="City" name="City" type="text" value="Seattle" />
<span class="field-validation-valid" data-valmsg-for="City" data-valmsg-replace="true"></span>
</div>
Pour chaque règle de validation du client, un attribut de la forme data-val-rulename="message"est ajouté. À l’aide de l’exemple City de champ présenté précédemment, la règle de validation du client requise génère l’attribut data-val-required et le message « Le champ Ville est obligatoire ». Exécutez l’application, modifiez l’un des utilisateurs et effacez le City champ. Lorsque vous effectuez une tabulation hors du champ, un message d’erreur de validation côté client s’affiche.
De même, pour chaque paramètre de la règle de validation du client, un attribut au format data-val-rulename-paramname=paramvalue. Par exemple, la FirstName propriété est annotée avec l’attribut StringLength et spécifie une longueur minimale de 3 et une longueur maximale de 8. La règle de validation des données nommée length a le nom max du paramètre et la valeur de paramètre 8. Voici le code HTML généré pour le FirstName champ lorsque vous modifiez l’un des utilisateurs :
<input data-val="true"
data-val-length="The field First Name must be a string with a minimum length of 3 and a maximum length of 8."
data-val-length-max="8"
data-val-length-min="3"
data-val-required="The First Name field is required."
id="FirstName"
name="FirstName"
type="text"
value="Ben" />
Pour plus d’informations sur la validation de client discrète, consultez l’entrée Validation du client discrète dans ASP.NET MVC 3 dans le blog de Brad Wilson.
Notes
Dans ASP.NET MVC 3 Beta, vous devez parfois envoyer le formulaire pour démarrer la validation côté client. Cela peut être modifié pour la version finale.
Création de la vue Créer
L’étape suivante consiste à ajouter une méthode d’action et une Create vue afin de permettre à l’utilisateur de créer un nouvel utilisateur. Ajoutez la méthode suivante Create au contrôleur de base :
public ViewResult Create() {
return View(new UserModel());
}
[HttpPost]
public ViewResult Create(UserModel um) {
if (!TryUpdateModel(um)) {
ViewBag.updateError = "Create Failure";
return View(um);
}
// ToDo: add persistent to DB.
_usrs.Create(um);
return View("Details", um);
}
Ajoutez une vue comme dans les étapes précédentes, mais définissez Afficher le contenu sur Créer.
Exécutez l’application, sélectionnez le lien Créer , puis ajoutez un nouvel utilisateur. La Create méthode tire automatiquement parti de la validation côté client et côté serveur. Essayez d’entrer un nom d’utilisateur qui contient des espaces blancs, par exemple « Ben X ». Lorsque vous n’utilisez pas de tabulation dans le champ nom d’utilisateur, une erreur de validation côté client (White space is not allowed) s’affiche.
Ajouter la méthode Delete
Pour suivre ce didacticiel, ajoutez la méthode suivante Delete au contrôleur d’accueil :
public ViewResult Delete(string id) {
return View(_usrs.GetUser(id));
}
[HttpPost]
public RedirectToRouteResult Delete(string id, FormCollection collection) {
_usrs.Remove(id);
return RedirectToAction("Index");
}
Ajoutez une Delete vue comme dans les étapes précédentes, en définissant Afficher le contenu sur Supprimer.
Vous disposez maintenant d’une application MVC ASP.NET 3 simple mais entièrement fonctionnelle avec validation.