DOT NET (4IIR) 2023-2024

Tutorial : part1

Creation d’une application ASP.NET MVC:

1. Ouvrez Visual Studio et sélectionnez le menu Fichier -> Nouveau -> Projet.

2. Dans la boîte de dialogue Nouveau Projet, sélectionnez Web dans le volet de

gauche, puis sélectionnez Application Web ASP.NET (.NET Framework) dans le
volet du milieu. Entrez le nom de votre projet, par exemple
"MonApplicationMVC". Vous pouvez également modifier l'emplacement de
l'application MVC en cliquant sur le bouton Parcourir. Enfin, cliquez sur OK.

3. Dans la boîte de dialogue Nouvelle Application Web ASP.NET, sélectionnez MVC (si
ce n'est pas déjà sélectionné).

4. Maintenant, appuyez sur F5 pour exécuter le projet en mode débogage, ou sur

Ctrl + F5 pour exécuter le projet sans débogage. Cela ouvrira la page d'accueil
dans le navigateur.

Creation d’un controlleur:

1. Dans Visual Studio, faites un clic droit sur le dossier Controller -> sélectionnez Ajouter
-> cliquez sur Contrôleur.
Cela ouvrira la boîte de dialogue Ajouter un Scaffold.

Note : Le scaffold est un cadre de génération automatique de code pour les applications Web
ASP.NET. Le scaffold réduit le temps nécessaire pour développer un contrôleur, une vue, etc.
dans le framework MVC.
 2. Dans la boîte de dialogue Ajouter un Contrôleur, saisissez le nom du contrôleur.
N'oubliez pas que le nom du contrôleur doit se terminer par Controller. Écrivez
StudentController et cliquez sur Ajouter.

Cela créera la classe StudentController avec la méthode Index() dans le fichier

StudentController.cs sous le dossier Controllers.

La classe StudentController est dérivée de la classe Controller. Chaque contrôleur

dans MVC doit être dérivé de cette classe abstraite Controller. Cette classe Controller
de base contient des méthodes d'aide qui peuvent être utilisées à diverses fins.

3. Modifier le type de retour de la méthode Index d'ActionResult à string et exécuter

l’application.

Understand routing:
Chaque application MVC doit configurer au moins une route configurée par défaut par le
framework MVC. Vous pouvez enregistrer une route dans la classe RouteConfig, qui se
trouve dans RouteConfig.cs sous le dossier App_Start. La figure suivante illustre comment
configurer une route dans la classe RouteConfig.

Le schéma d'URL est considéré uniquement après la partie du nom de domaine dans l'URL.
Par exemple, le schéma d'URL "{controller}/{action}/{id}" ressemblerait à
localhost:1234/{controller}/{action}/{id}. Tout ce qui se trouve après "localhost:1234/" serait
considéré comme le nom du contrôleur. De la même manière, tout ce qui suit le nom du
contrôleur serait interprété comme le nom de l'action, puis la valeur du paramètre id.
Exercice 1:

URL Error? Controller Action Id

http://localhost/index
http://localhost/Home
http://localhost/home
http://localhost/HOME
http://localhost/home/index
http://localhost/home/index/2
http://localhost/home/index2
http://localhost/home/about
http://localhost/home/contact
http://localhost/student
http://localhost/student/index/123
http://localhost/student/Edit/12

Exercice2
Modifier le code de la fonction Index dans HomeController pour qu’elle affiche n fois le message
Hello+ nom + prénom.

nom, prénom et n : étant des paramètres récupérés de l’URL.

Si n n’a pas été précisé par l’utilisateur ou s’il est inférieur ou égal à zéro, le message sera affiché une
seule fois.
Quiz :

Choisissez la réponse la plus exacte. Une seule réponse correcte est supportée.
1. MVC signifie

 Model, Vision and Control

 Model, View and Controller
 Model, Data and Controller

2. Parmi les types de fichiers d'affichage suivants, lesquels sont pris en charge dans MVC ?

 .vbhtml
 .cshtml
 .aspx
 Les trois

3. Dans un modèle MVC, l’élément responsable de traiter les requêtes est

 Controller.
 Model.
 View.

4. Le model binding permet de

 Récupérer les données.

 Valider les données.
 Mettre à jour la base.

5. Le protocole http est considéré comme

 Moyen de valider les données.

 Manière de communiquer avec le serveur.
 Manière de transférer les données au serveur.

6. Le modèle MVC est principalement pour

 Séparer entre les taches.

 Simplifier la création de la base de données.
 Utiliser des connexions sécurisées.

7. Un modèle est utilisé pour

 La structuration des données.

 La gestion des erreurs.
 La présentation des données.
8. Dans la relation des composants de MVC

 Le contrôleur qui manipule le modèle et la vue.

 Le modèle manipule seulement la vue.
 La vue manipule le controlleur et la vue.

9. Lequel des éléments suivants est un modèle de route par défaut dans MVC ?

 "/{action}/{controller}/{id}"
 "{controller}/{id}"
 "/{controller}/{action}/{id}"
 "/{controller}/{id}"

10. Cette route [Route("Store/{id?}/Details")] n’est pas accessible par

 /Store/Details/Details.
 /Store/20/Details.
 /Store/Details/20.

11. Laquelle des classes par défaut suivantes est utilisée pour configurer toutes les routes
dans MVC ?

 FilterConfig
 RegisterRouteConfig
 RouteConfig
 MVCRoutes

12. Pour un routage conventionnel de ce type, dans lequel est défini trois routes suivantes
public static void RegisterRoutes(RouteCollection routes){
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index",
id=UrlParameter.Optional }
);
routes.MapRoute(name : "static",
url :"welcome",
defaults : new { controller = "Home", action = "index" }
);
routes.MapRoute("",
"Public/{controller}/{action}",
new { controller = "Home", action = "index" }
);
}

Une adresse url de type /Public/Enseignant/connect est analysée par la

 1ere route
 2eme route
  3eme route

13. Selon la question précédente, si on permute l’ordre de la 1ere route avec la troisième
route, l’url /Home est analysée par

 1ere route
 2eme route
 3eme route
Annexe:
1- ASP.NET MVC Folder Structure

Visual Studio creates the following folder structure of the ASP.NET MVC application by
default.

App_Data: The App_Data folder can contain application data files like LocalDB, .mdf
files, XML files, and other data related files. IIS will never serve files from App_Data
folder.

App_Start: The App_Start folder can contain class files that will be executed when the
application starts. Typically, these would be config files like AuthConfig.cs,
BundleConfig.cs, FilterConfig.cs, RouteConfig.cs etc. MVC 5 includes BundleConfig.cs,
FilterConfig.cs and RouteConfig.cs by default. We will see the significance of these
files later.

Content: The Content folder contains static files like CSS files, images, and icons files.
MVC 5 application includes bootstrap.css, bootstrap.min.css, and Site.css by default.

Controllers: The Controllers folder contains class files for the controllers.
A Controller handles users' request and returns a response. MVC requires the name of
all controller files to end with "Controller". You will learn about the controller in the
next section.

Fonts: The Fonts folder contains custom font files for your application: Fonts folder

Models: The Models folder contains model class files. Typically model class includes
public properties, which will be used by the application to hold and manipulate
application data.

Scripts: The Scripts folder contains JavaScript or VBScript files for the application. MVC
5 includes javascript files for bootstrap, jquery 1.10, and modernizer by default.

Views: The Views folder contains HTML files for the application. Typically view file is a
.cshtml file where you write HTML and C# or VB.NET code. The Views folder includes a
separate folder for each controller. For example, all the .cshtml files, which will be
rendered by HomeController will be in View > Home folder. The Shared folder under
the View folder contains all the views shared among different controllers e.g., layout
files.

Additionally, MVC project also includes the following configuration files:

Global.asax: Global.asax file allows you to write code that runs in response to
application-level events, such as Application_BeginRequest, application_start,
application_error, session_start, session_end, etc.
Packages.config : Packages.config file is managed by NuGet to track what packages and
versions you have installed in the application.

Web.config : Web.config file contains application-level configurations.