Ce tutoriel à pour objectif de fournir une démarche pas à pas pour la création d’une application CRUD avec WebMatrix, Razor et Entity Framework.
РPart 1 : introduction et pr̩sentation des outils
– Part 2 : création de l’application et définition du modèle objet
РPart 3 : cr̩ation du DBContex et du Repository
РPart 4 : impl̩mentation des fonctionnalit̩s CRUD
Dans cette cinquième et dernière partie de notre tutoriel sur la création d’une application CRUD avec WebMatrix, Razor et Entity Framework, nous verrons comment implémenter les interfaces Web pour la lecture, la modification, la suppression et l’enregistrement des données pour une table associative.
La table Affiliations étant une table association, quelques modifications seront donc nécessaires au code utilisé pour Personne et Organisme.
1 РImpl̩mentation de la grille
Dans le dossier Affiliations, ajoutez un nouveau fichier Index.cshtml.
Dans ce fichier, ajoutez les lignes de code suivantes, qui vont permettre d’afficher dans cette page la liste des affiliations qui ont été enregistrées dans la base de données :
@{
/// Définition du layout et du titre de la page
Layout = "~/_SiteLayout.cshtml";
Page.Title = "Gestion des organismes";
//déclaration des variables
var af = new AffiliationRepository();
//déclaration de la grille
var grid = new WebGrid(af.GetAll(),rowsPerPage : 10);
}
<hgroup class="title">
<h1>Affiliations.</h1>
</hgroup>
<p><a href="Create">Ajouter un nouvel enregistrement</a></p>
@* formatage et affichage de la grille *@
@grid.GetHtml(tableStyle:"grid",
headerStyle:"head",
alternatingRowStyle: "altrow",
columns: grid.Columns(
grid.Column("Personne.Nom","Employé"),
grid.Column("Organisme.Nom","Organisme"),
grid.Column("Fonction", "Fonction"),
grid.Column("Telephone", "Téléphone"),
grid.Column("", "", format: @<text><a href="Edit?organismeId=@item.OrganismeId&personneId=@item.PersonneId")>Editer</a>
| <a href="Details?organismeId=@item.OrganismeId&personneId=@item.PersonneId")>Détails</a>
| <a href="Delete?organismeId=@item.OrganismeId&personneId=@item.PersonneId")>Supprimer</a></text>)
)
)
Vous remarquez certainement pour les colonnes Employé et Organisme, l’affichage des propriétés Personne.Nom et Organisme.Nom. En effet, lors de la définition de l’entité Affiliation, vous avez défini les classes Personne et Organisme comme propriétés de l’entité. Cela permet à Entity Framework de charger automatiquement dans ces propriétés les données correspondantes aux clés étrangères dans la table Affiliations.
A l’exécution de cette page, vous obtenez le résultat suivant :
2 РAffichage d̩taill̩
Dans la page précédente, certaines informations comme l’adresse email n’ont pas été affichées dans la grille. Pour visualiser ces données, une page d’affichage détaillé doit être ajoutée à l’application.
Pour ajouter cette page, faites un clic droit sur le dossier Affiliation, sélectionnez l’option New File et créez un nouveau fichier Detail.cshtml.
Dans ce fichier, vous allez ajouter les lignes de code suivantes :
@{
Layout = "~/_SiteLayout.cshtml";
Page.Title = "Détails";
//Recupération des Id
int personneId = Request["personneId"].AsInt();
int organismeId = Request["organismeId"].AsInt();
//Déclaration des variables
var af = new AffiliationRepository();
var affiliation = new Affiliation();
//Selection de l'élément correspondant aux Id
affiliation = af.Find(personneId, organismeId);
}
<hgroup class="title">
<h1>Détails.</h1>
</hgroup>
<fieldset>
<legend></legend>
<ol>
<li class="employe">
<label>Employé:</label>
<label>@affiliation.Personne.Prenom @affiliation.Personne.Nom</label>
</li>
<li class="organisme">
<label>Organisme:</label>
<label>@affiliation.Organisme.Nom</label>
</li>
<li class="fonction">
<label>Fonction:</label>
<label>@affiliation.Fonction</label>
</li>
<li class="email">
<label>Adresse mail:</label>
<label>@affiliation.Email</label>
</li>
<li class="telephone">
<label>Téléphone:</label>
<label>@affiliation.Telephone</label>
</li>
</ol>
</fieldset>
<p><a href="Edit?organismeId=@affiliation.OrganismeId&personneId=@affiliation.PersonneId">Editer</a> |
<a href="Index">Retour à la liste</a>
</p>
A l’exécution, vous obtiendrez le résultat suivant :
3 – Enregistrement
Compte tenu du fait que Affiliations est une table association, vous allez dans un premier temps charger dans des listes déroulantes les noms des personnes et des organismes.
Pour cela, dans le fichier Create.cshtml que vous avez ajouté au dossier Affiliation, vous allez insérer les lignes de code suivantes :
var pr = new PersonneRepository();
var og = new OrganismeRepository();
var personnes = new List<Personne>();
var organismes = new List<Organisme>();
personnes = pr.GetAll();
organismes = og.GetAll();
Une boucle foreach sera utilisée pour charger les données dans une liste déroulante HTML. Le code pour effectuer cela est le suivant :
<select id="personneId" name="personneId">
@foreach(var p in personnes){
<option value="@p.PersonneId">@p.Nom</option>
}
</select>
En plus de la validation des champs, une vérification doit être effectuée pour éviter les contraintes de validation des clés. Le code pour cela est le suivant :
if (db.Affiliations.Find(personneId, organismeId) != null)
{
//Ajout d'un message d'erreur si les Id existent déjà dans la table affiliations
ModelState.AddError("personneId","Cet enregistrement existe déjà dans la base de données");
}
Le code complet de la page Create.cshtml est le suivant :
@{
// Définition du layout et du titre de la page
Layout = "~/_SiteLayout.cshtml";
Page.Title = "Enregistrement d'un organisme";
// initialisation des variables
var fonction = "";
var email = "";
var telephone = "";
//Lecture des données sur les personnes et les organismes
var pr = new PersonneRepository();
var og = new OrganismeRepository();
var af = new AffiliationRepository();
var personnes = new List<Personne>();
var organismes = new List<Organisme>();
personnes = pr.GetAll();
organismes = og.GetAll();
// Ajout des scripts de validation
Scripts.Add("~/Scripts/jquery-1.6.2.min.js");
Scripts.Add("~/Scripts/jquery.validate.min.js");
Scripts.Add("~/Scripts/jquery.validate.unobtrusive.min.js");
// Validation de la fonction
Validation.RequireField("fonction", "La fonction est obligatoire.");
if (IsPost) {
int personneId = Request.Form["personneId"].AsInt();
int organismeId = Request.Form["organismeId"].AsInt();
fonction = Request.Form["fonction"];
email = Request.Form["email"];
telephone = Request.Form["telephone"];
if (af.Find(personneId, organismeId) != null)
{
//Ajout d'un message d'erreur si les Id exitent déjà dans la table affiliations
ModelState.AddError("personneId","Cet enregistrement existe déjà dans la base de données");
}
if (Validation.IsValid()) {
if(ModelState.IsValid) {
var affiliation = new Affiliation{
PersonneId = personneId, OrganismeId = organismeId, Fonction = fonction, Email = email, Telephone = telephone };
af.Add(affiliation);
Response.Redirect("Index");
}
}
};
}
<hgroup class="title">
<h2>Enregistrement d'une affiliation</h2>
</hgroup>
<form method="post" action="">
@* Notification en cas d'erreur de validation *@
@Html.ValidationSummary("Veuillez corriger les erreurs suivantes:")
<fieldset>
<legend>Formlaire </legend>
<ol>
<li class="personneId">
<label for="personneId" >Employé:</label>
<select id="personneId" name="personneId">
@foreach(var p in personnes){
<option value="@p.PersonneId">@p.Nom</option>
}
</select>
</li>
<li class="organismeId">
<label for="organismeId" >Organisme:</label>
<select id="organismeId" name="organismeId">
@foreach(var o in organismes){
<option value="@o.OrganismeId">@o.Nom</option>
}
</select>
</li>
<li class="fonction">
<label for="fonction" @if(!ModelState.IsValidField("fonction")){<text>class="error-label"</text>}>Fonction:</label>
<input type="text" id="fonction" name="fonction" title="Fonction" value="@fonction" @Validation.GetHtml("fonction") />
@Html.ValidationMessage("fonction")
</li>
<li class="email">
<label for="email">Adresse mail:</label>
<input type="text" id="email" name="email" title="Email" value="@email" />
</li>
<li class="telephone">
<label for="telephone">Numéro de téléphone:</label>
<input type="text" id="telephone" name="telephone" title="Téléphone" value="@telephone" />
</li>
</ol>
<input type="submit" value="Enregistrer" title="Enregistrer" />
</fieldset>
</form>
<a href="Index">Retour à la liste</a>
A l’exécution, vous obtenez le résultat suivant :
4 – Modification
Penchons-nous maintenant sur la page permettant de modifier les informations d’une affiliation. Une nouvelle page Edit.cshtml doit être ajoutée dans le dossier Affiliation.
Dans cette page, vous allez dans un premier temps écrire le code permettant de retourner les informations sur la ligne qui doit être modifiée :
int personneId = Request["personneId"].AsInt();
int organismeId = Request["organismeId"].AsInt();
// initialisation des variables
var af = new AffiliationRepository();
var affiliation = new Affiliation();
affiliation = af.Find(personneId, organismeId);
var fonction = affiliation.Fonction;
var email = affiliation.Email;
var telephone = affiliation.Telephone;
Le code permettant de prendre en compte les modifications dans la base de données avec Entity Framework est le suivant :
affiliation.Fonction = fonction;
affiliation.Email = email;
affiliation.Telephone = telephone;
//Modification de l'affiliation
af.Update(affiliation);
Le code complet pour cette page est le suivant :
@using System.Data
@{
// Définition du layout et du titre de la page
Layout = "~/_SiteLayout.cshtml";
Page.Title = "Modification";
int personneId = Request["personneId"].AsInt();
int organismeId = Request["organismeId"].AsInt();
// initialisation des variables
var af = new AffiliationRepository();
var affiliation = new Affiliation();
affiliation = af.Find(personneId, organismeId);
var fonction = affiliation.Fonction;
var email = affiliation.Email;
var telephone = affiliation.Telephone;
// Ajout des scripts de validation
Scripts.Add("~/Scripts/jquery-1.6.2.min.js");
Scripts.Add("~/Scripts/jquery.validate.min.js");
Scripts.Add("~/Scripts/jquery.validate.unobtrusive.min.js");
// Validation de la fonction
Validation.RequireField("fonction", "La fonction est obligatoire.");
if (IsPost) {
fonction = Request.Form["fonction"];
email = Request.Form["email"];
telephone = Request.Form["telephone"];
if (Validation.IsValid()) {
affiliation.Fonction = fonction;
affiliation.Email = email;
affiliation.Telephone = telephone;
//Modification de l'affiliation
af.Update(affiliation);
Response.Redirect("Index");
}
};
}
<hgroup class="title">
<h2>Modification.</h2>
</hgroup>
<form method="post" action="">
@* Notification en cas d'erreur de validation *@
@Html.ValidationSummary("Veuillez corriger les erreurs suivantes:")
<fieldset>
<legend></legend>
<ol>
<li class="employe">
<label>Employé:</label>
<label>@affiliation.Personne.Prenom @affiliation.Personne.Nom</label>
</li>
<li class="organisme">
<label>Organisme:</label>
<label>@affiliation.Organisme.Nom</label>
</li>
<li class="fonction">
<label for="fonction" @if(!ModelState.IsValidField("fonction")){<text>class="error-label"</text>}>Fonction:</label>
<input type="text" id="fonction" name="fonction" title="Fonction" value="@fonction" @Validation.GetHtml("fonction") />
@* Write any email validation errors to the page *@
@Html.ValidationMessage("fonction")
</li>
<li class="email">
<label for="email">Adresse mail:</label>
<input type="text" id="email" name="email" title="Email" value="@email" />
</li>
<li class="telephone">
<label for="telephone">Numéro de téléphone:</label>
<input type="text" id="telephone" name="telephone" title="Téléphone" value="@telephone" />
</li>
</ol>
<input type="submit" value="Modifier" title="Edit" />
</fieldset>
</form>
<a href="Index">Retour à la liste</a>
qui produit le résultat suivant à l’exécution :
5 – Suppression
Enfin, pour finir avec cette table, vous allez créer la page Delete.cshtml dans le dossier Affiliation.
Le code source de cette page n’a rien de particulier et reprend les principes qui ont été utilisés pour implémenter la page de suppression pour la table Personnes.
Le code complet pour cette page est le suivant :
@{
// Définition du layout et du titre de la page
Layout = "~/_SiteLayout.cshtml";
Page.Title = "Suppression";
int personneId = Request["personneId"].AsInt();
int organismeId = Request["organismeId"].AsInt();
var af = new AffiliationRepository();
var affiliation = new Affiliation();
//Recherche de l'affiliation à supprimerf
affiliation = af.Find(personneId, organismeId);
if(IsPost)
{
//Supression de l'enregistrement
af.Remove(affiliation);
Response.Redirect("Index");
}
}
<hgroup class="title">
<h1>Suppression.</h1>
<h3>Êtes-vous sur de vouloir supprimer cet enregistrement ?</h3>
</hgroup>
<fieldset>
<legend></legend>
<ol>
<li class="employe">
<label>Employé:</label>
<label>@affiliation.Personne.Prenom @affiliation.Personne.Nom</label>
</li>
<li class="organisme">
<label>Organisme:</label>
<label>@affiliation.Organisme.Nom</label>
</li>
<li class="fonction">
<label>Fonction:</label>
<label>@affiliation.Fonction</label>
</li>
<li class="email">
<label>Adresse mail:</label>
<label>@affiliation.Email</label>
</li>
<li class="telephone">
<label>Téléphone:</label>
<label>@affiliation.Telephone</label>
</li>
</ol>
</fieldset>
<form method="post" action="">
<p>
<input type="submit" value="Supprimer" title="Supprimer" />
<a href="Index">Retour à la liste</a>
</p>
</form>
Il permet d’obtenir le résultat suivant à l’exécution :
Conclusion
Entity Framework, la technologie d’accès aux données qui est en passe de devenir un standard dans l’écosystème .NET peut être assez facilement exploitée avec WebMatrix pour la création d’applications Web robustes. Bien que l’éditeur WebMatrix manque beaucoup de fonctionnalités et d’extensions qui sont disponibles dans Visual Studio, comme l’échafaudage pour développer rapidement et facilement des applications utilisant Entity Framework, il permet néanmoins au développeur d’exploiter quasiment toutes les fonctionnalités de la librairie et supporte l’IntelliSence pour celle-ci.
Ce tutoriel nous a permis de concevoir bout-à -bout une petite solution complète de gestion des affiliations en utilisant Entity Framework, WebMatrix, Razor, NuGet et SQL Server Compact Edition et nous familiariser avec tous ces outils qui sont assez utilisés dans l’environnement .NET.
Vous pouvez donc vous baser sur cet exemple ou en modifier le code à votre guise pour développer votre propre application répondant à vos besoins fonctionnels avec WebMatrix.
Sources
Vous pouvez télécharger et modifier les sources ci-dessous à votre convenance.
