4IIR : Outils de développement - Framework .NET Pr. C.
AZROUMAHLI
Création des application Web .NET Core - Compte Rendu
Partie 1. Application Web avec ASP.NET Core
Question 1.1. Donner l’architecture d’une application web ASP.NET Core standard :
………………………………………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………………………………………
Question 1.2. Ajouter un lien vers la page Razor « Pages/Contact.cshtml» dans la Template « _Layout.cshtml» partagés :
<li class="nav-item">
................................................................................................
</li>
Question 1.3. Vous voulez changer la Template partagés par défaut pour utiliser une autre Template « _Layout2.cshtml» dans
la page « contact.cshtml». Ajouter la ligne convenable pour changer la mise en page par défaut :
@{
ViewData["Title"] = "Contact";
................................................................................................
}
<div>
Question 1.4. Soit la page Razor « Pages/Privacy.cshtml » ci-dessous :
@{
ViewData["Title"] = "Politique";
}
<h1>@ViewData["Title"]</h1>
<p>EMSI Tanger 4IIR @2023</p>
L’exécution retourne l’erreur que la variable 2023 n’existe pas. Proposez une solution pour ajouter la chaine de caractère
« @2023 » dans la page « Privacy.cshtml » :
@{
ViewData["Title"] = "Politique";
................................................................................................
}
<h1>@ViewData["Title"]</h1>
<p>......................................</p>
Question 1.5. Vous voulez ajouter une image à votre page Razor, alors vous créer un dossier dédié aux ressources image dans
le dossier wwwroot. Donner la syntaxe correcte pour ajouter l’image « img1.png» à votre page Razor :
<img src="....................................................."/>
Question 1.6. Etant donnée la syntaxe suivante dans le fichier « Pages/Product/Index.cshtml.cs » :
public class IndexModel : PageModel{
public List<Produit> ProduitList = new List<Produit>();
}
Page 1 sur 5
4IIR : Outils de développement - Framework .NET Pr. C. AZROUMAHLI
public class Produit{
public string id; public string nom; public string description; public string prix;
}
Donner la syntaxe qui permet d’ajouter les données sauvegarder dans l’objet ProduitList sous forme d’un tableau dans la
page Razor « Pages/Product/Index.cshtml» :
@model NOM_PROJET.Produit.IndexModel
<table class="table">
<thead>
<tr class="text-center">
<th>Matricule</th> <th>Nom du produit</th> <th>Description</th> <th>Prix</th>
</tr>
</thead>
<tbody>
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
</tbody>
</table>
Partie 2. Exploitation d’une Application web ASP.NET avec SQL Server
Question 2.1. Suivant la syntaxe décrit dans la question 1.6. Modifier la méthode public void OnGet() pour lire les produits de
la base de données, sauvegarder chaque produit dans un objet et ajouter ce nouveau objet dans la liste : ProduitList.
public void OnGet(){
try{
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
} catch (Exception ex) {
Console.WriteLine("Exception: "+ex.ToString());
}}
Question 2.2. Vous avez créé un formulaire dans la page « Pages/Product/Create.cshtml » pour ajouter un nouveau produit
dans la base de données.
Comment vous pouvez lire les données saisies par l’utilisateur dans les inputs du formulaire ?
Page 2 sur 5
4IIR : Outils de développement - Framework .NET Pr. C. AZROUMAHLI
public class CreateModel : PageModel
{
public Produit produit=new Produit();
public void OnGet(){…}
public void OnPost(){
produit._nom = … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … …
produit._description = … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … …
produit._prix = … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … …
produit.createProduct() ;
}
}
Question 2.3. Créer la méthode createProduct() de la classe Product qui permet d’ajouter un nouveau produit dans la
base de données :
public void createProduct(){
……………………………………………………………………………………………………………………………… …………………………………………………………
……………………………………………………………………………………………………………………………… …………………………………………………………
……………………………………………………………………………………………………………………………… …………………………………………………………
……………………………………………………………………………………………………………………………… …………………………………………………………
……………………………………………………………………………………………………………………………… …………………………………………………………
……………………………………………………………………………………………………………………………… …………………………………………………………
……………………………………………………………………………………………………………………………… …………………………………………………………
……………………………………………………………………………………………………………………………… …………………………………………………………
……………………………………………………………………………………………………………………………… …………………………………………………………
……………………………………………………………………………………………………………………………… …………………………………………………………
}
Question 2.4. Vous voulez ajouter une page d’édition (ou suppression) des produits. Le lien de cette page doit être un lien
dynamique qui passe l’ID de chaque produit dans la liste comme un paramètre de recherche.
▪ Donner le lien hypertexte à ajouter dans la page « Pages/Product/Create.cshtml » :
<tr>
<!-- Les données du produit-->
<td>
<a href="… … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … ">Modifier</a>
</td>
</tr>
▪ Comment vous pouvez lire cette valeur (L’ID passé dans l’url) dans le modèle « Pages/Product/Create.cshtml.cs » :
String _id = … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … ;
Partie 3. Exploitation d’une Application web ASP.NET avec SQL Server
Question 3.1. Vous voulez utiliser les états des sessions pour envoyer et partager les données entre vos pages Razor. Qu’elle
est le nom du Nugget à installer ?
………………………………………………………………………………………………………………………………………………………………………………………………
Question 3.2. Après avoir installer le Nugget appropriés pour utiliser les êtas de sessions dans votre application Web .NET, vous
devrez ajouter le service des sessions et l’activer pour l’utiliser dans vos pages Razor dans « program.cs ». Comment ?
Page 3 sur 5
4IIR : Outils de développement - Framework .NET Pr. C. AZROUMAHLI
……………………………………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………………………………
Question 3.3. Un utilisateur a été bien connecter. Vous voulez sauvegarder ces données dans l’état de session pour les afficher
dans les autres pages Razor. Modifier le code ci-dessous pour sauvegarder ces données :
using Microsoft.AspNetCore.Http;
…
public class LoginModel : PageModel{
public Utilisateur utilisateurData = new Utilisateur();
public void OnGet(){…}
public void OnPost(){
if (!utilisateurData.VerifierPw()){
return;
} else {
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
}}}
public class Utilisateur {
public int id; public string fullName = ""; public string userLogin = "";
public string userPw = ""; public string userType = "";}
Question 3.4. Le Use Case de votre application exige la modification du contenu de la page « Pages/Product/Index.cshtml»,
sorte que le lien vers la page « Pages/Product/Create.cshtml » est inaccessible aux utilisateurs de type « client ».
▪ Rediriger l’utilisateur dans la fonction GET() dans la modèle « Pages/Product/Create.cshtml.cs » :
public class CreateModel : PageModel{
public void OnGet(){
…………………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………………
}}
▪ Cacher le lien vers la page « Create.cshtml » pour les utilisateurs « client » dans la page « Index.cshtml » :
………………………………………………………………………………………………………………………………………………………………………………………………
<a asp-page="/Produit/Create">Nouveau Produit</a>
………………………………………………………………………………………………………………………………………………………………………………………………
Question 3.5. Un utilisateur vient à se déconnecter en visitant la page « Pages/Users/Logout.cshtml ». Alors vous devrez vider
les données sauvegarder dans l’état de la session dans la méthode GET(), et rediriger l’utilisateur vers la page
d’authentification « Pages/Users/Login.cshtml ». Comment vous pouvez le faire ?
public class LogoutModel : PageModel{
public void OnGet(){
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
}}
Page 4 sur 5
4IIR : Outils de développement - Framework .NET Pr. C. AZROUMAHLI
Partie 4. Application Web avec ASP.NET Core avec le pattern MVC
Question 4.1. Donner l’architecture d’une application web ASP.NET Core (Model-View-Controller) :
………………………………………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………………………………………
Question 4.2. Vous avez opté à utiliser l’Entity Framework .NET pour créer les pages d’action CRUD du modèle Product.
Comment vous pouvez appliquer les migrations de ce modèle ?
………………………………………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………………………………………
Question 4.3. Etant donné les méthodes (actions) ci-dessous dans le fichier : «Controllers/ProductController.cs ».
public class ProductController : Controller{
private readonly ApplicationDbContext _context;
public ProductController(ApplicationDbContext context){
_context = context;
}
public async Task<IActionResult> Index(){
return View(await _context.Product.ToListAsync());
}}
Dans le fichier « _Layout.cshtml », ajouter un lien vers la page « Views/Product/Index.cstml » qui affiche la liste des produits :
<li class="nav-item">
<a … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … >Liste des produits</a>
</li>
Question 4.4. Ajouter une méthode de recherche dans le contrôleur de « Controllers/ProductController.cs ». Et afficher les
résultats utilisant le page « « Views/Product/Index.cstml » :
▪ L’action Search() dans contrôleurs « Controllers/ProductController.cs »:
public IActionResult Search(){
………………………………………………………………………………………………………………………………………………………………
}
▪ Le formulaire de recherche dans le fichier … … … … … … … … … … … … … … … … … … … … … … … … … :
<div> <form asp-action="… … … … … … … … … … … … … … … … … … … … ">
<input name="searchData"/>
………………………………………………………………………………………………………………………………………………………………
</form></div>
▪ L’action SearchResults() dans contrôleurs « Controllers/ProductController.cs »:
public async Task<IActionResult> SearchResults(… … … … … … … … … … … … … … … … … … … … ){
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
}
Page 5 sur 5
