Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

TUTORIEL MVC - PARTIE 1

Par Alexandre DELVAUX Publié le 21/09/2017 à 13:56:54 Noter cet article:
(0 votes)
Avis favorable du comité de lecture

Introdution

Selon la définition officielle, Model-View-Controller (MVC) est un modèle d'architecture logicielle pour la mise en œuvre d'interfaces utilisateur. Il divise une application logicielle donnée en trois parties interconnectées, afin de séparer les représentations internes de l'information de la manière dont les informations sont présentées ou acceptées par l'utilisateur.

Ce didacticiel est destiné aux programmeurs .NET qui commencent à apprendre le framework MVC. Ce tutoriel vous amènera à un niveau intermédiaire de connaissance dans MVC, couvrant tous les aspects importants de MVC Framework avec une expérience de code pratique complète. Conditions préalables

Avant de suivre ce tutoriel, nous supposons que les lecteurs ont une connaissance de base du développement ASP.NET (langage C # et VB) et Visual Studio installé sur leur système.

MVC

Le Model-View-Controller (MVC) est un modèle architectural qui sépare une application en trois composants logiques principaux : le modèle, la vue et le contrôleur. Chacun de ces composants est conçu pour traiter les aspects de développement spécifiques d'une application. MVC est l'un des frameworks de développement Web les plus utilisés dans l'industrie pour créer des projets évolutifs et extensibles

Voici les composants de MVC :

- Modèle

Le composant Modèle correspond à toute la logique liée aux données avec laquelle l'utilisateur travaille. Cela peut représenter soit les données transférées entre les composants View et Controller, soit toute autre donnée liée à la logique métier. Par exemple, un objet client récupère les informations du client à partir de la base de données, le manipule et les met à jour dans la base de données ou l'utilise pour rendre les données.

- Vue

Le composant View est utilisé pour toute la logique UI de l'application. Par exemple, la vue client inclura tous les composants de l'interface utilisateur tels que les zones de texte, les menus déroulants, etc., dont l'utilisateur final interagit. Controleur

- Controleur

Les contrôleurs agissent comme une interface entre les composants du modèle et de la vue pour traiter toute la logique métier et les demandes entrantes, manipuler les données à l'aide du composant Modèle et interagir avec les vues pour rendre la sortie finale. Par exemple, le contrôleur du client prend en charge toutes les interactions et les entrées de la vue client et met à jour la base de données en utilisant le modèle client. Le même contrôleur sera utilisé pour afficher les données du client.

ASP.NET MVC

ASP.NET prend en charge trois grands modèles de développement : les pages Web, les formulaires Web et MVC (Model View Controller). Le framework ASP.NET MVC est un cadre de présentation léger et hautement vérifiable intégré aux fonctionnalités ASP.NET existantes, telles que les pages maîtresses, l'authentification, etc. Dans .NET, ce cadre est défini dans l'assemblage System.Web.Mvc. La dernière version de MVC Framework est 5.0. Nous utilisons Visual Studio pour créer des applications ASP.NET MVC qui peuvent être ajoutées en tant que modèle dans Visual Studio. Caractéristiques ASP.NET MVC

ASP.NET MVC fournit les fonctionnalités suivantes :

- Idéal pour développer des applications complexes mais légères.

- Fournit un cadre extensible et enfichable, qui peut être facilement remplacé et personnalisé. Par exemple, si vous ne souhaitez pas utiliser le Razor intégré ou le moteur de visualisation ASPX, vous pouvez utiliser n'importe quel autre moteur de visionnement tiers ou même personnaliser ceux existants.

- Utilise la conception basée sur les composants de l'application en la divisant logiquement en composants de modèle, de vue et de contrôleur. Cela permet aux développeurs de gérer la complexité des projets à grande échelle et de travailler sur des composants individuels

- La structure MVC améliore le développement et la stabilité du test de l'application, car tous les composants peuvent être conçus en fonction de l'interface et testés à l'aide d'objets simulés. Par conséquent, ASP.NET MVC Framework est idéal pour les projets avec une grande équipe de développeurs web.

- Prise en charge de toutes les fonctionnalités ASP.NET existantes telles que l'autorisation et l'authentification, les pages maîtresses, la liaison de données, les contrôles utilisateur, les appartenances, le routage ASP.NET, etc.

- N'utilise pas le concept de View State (qui est présent dans ASP.NET). Cela aide à créer des applications, légères et donnant un contrôle total aux développeurs.

- Ainsi, vous pouvez considérer MVC Framework comme un cadre majeur construit sur ASP.NET fournissant un large éventail de fonctions ajoutées axées sur le développement et les tests basés sur les composants.

Architecture

Regardons maintenant comment l'exécution d'une application MVC a lieu lorsqu'il y a une certaine demande du client. Le diagramme suivant illustre cette éxécution.

Étape 1 - Le navigateur client envoie une demande à l'application MVC.

Étape 2 - Global.ascx reçoit cette demande et effectue le routage en fonction de l'URL de la requête entrante à l'aide des objets RouteTable, RouteData, UrlRoutingModule et MvcRouteHandler.

Étape 3 - Cette opération de routage appelle le contrôleur approprié et l'exécute à l'aide de l'objet IControllerFactory et de la méthode Execute de l'objet MvcHandler.

Étape 4 - Le contrôleur traite les données à l'aide du modèle et invoque la méthode appropriée à l'aide de l'objet ControllerActionInvoker.

Étape 5 - Le modèle traité est ensuite passé à la vue, qui à son tour rend la sortie finale.

Les formulaires Web MVC et ASP.NET sont des modèles de développement interdépendants mais différents selon l'exigence de l'application et d'autres facteurs. À un niveau élevé, vous pouvez considérer que MVC est un cadre d'application Web avancé et sophistiqué conçu en tenant compte de la séparation des préoccupations et de la stabilité. Les deux modèles présentent leurs avantages et leurs inconvénients en fonction des exigences spécifiques. Ce concept peut être visualisé à l'aide du diagramme

Premiere application MVC

Lancez-nous et créez notre première application MVC à l'aide de Views and Controllers. Une fois que nous avons une petite expérience pratique sur la façon dont une application MVC de base fonctionne, nous allons apprendre tous les composants et concepts individuels.

Étape 1 - Démarrez votre Visual Studio et sélectionnez Fichier → Nouveau → Projet. Sélectionnez Web → Application Web ASP.NET MVC et nommez ce projet comme FirstMVCApplication. Sélectionnez l'emplacement en tant que C: \ MVC. Cliquez sur OK.

Étape 2 - Cela ouvrira l'option Modèle de projet. Sélectionnez Modèle vide et Affichez le moteur en tant que razor. Cliquez sur OK.

Maintenant, Visual Studio va créer notre premier projet MVC tel qu'illustré dans la capture d'écran suivante.

Étape 3 - Maintenant, nous créerons le premier contrôleur dans notre application. Les contrôleurs ne sont que des classes C # simples, qui contiennent de multiples méthodes publiques, appelées méthodes d'action. Pour ajouter un nouveau contrôleur, cliquez avec le bouton droit sur le dossier Contrôleurs dans notre projet et sélectionnez Ajouter → Contrôleur. Nommez le contrôleur en tant que HomeController et cliquez sur Ajouter.

Cela créera un fichier de classe HomeController.cs sous le dossier Controllers avec le code par défaut suivant.

Le code ci-dessus définit essentiellement un index de méthode publique dans notre HomeController et renvoie un objet ViewResult. Dans les prochaines étapes, nous allons apprendre à renvoyer une vue en utilisant l'objet ViewResult.

Étape 4 - Maintenant, nous ajouterons une nouvelle vue à notre Home Controller. Pour ajouter une nouvelle vue, cliquez sur le dossier de droite et cliquez sur Ajouter → Afficher.

Étape 5 - Nommez la nouvelle vue en tant qu'indice et Affichez le moteur comme Razor (SCHTML). Cliquez sur Ajouter.

Cela ajoutera un nouveau fichier cshtml à l'intérieur du dossier Vues / Accueil avec le code suivant :

Étape 6 - Modifiez le contenu du corps de View ci-dessus avec le code suivant :

Étape 7 - Maintenant, exécutez l'application. Cela vous donnera la sortie suivante dans le navigateur. Cette sortie est basée sur le contenu de notre fichier View. L'application appelle d'abord le contrôleur qui, à son tour, appelle cette vue et produit la sortie. À l'étape 7, la sortie que nous avons reçue était basée sur le contenu de notre fichier View et n'avait aucune interaction avec le contrôleur. En avançant, nous allons maintenant créer un petit exemple pour afficher un message de bienvenue avec l'heure actuelle en utilisant une interaction de View and Controller.

Étape 8 - MVC utilise l'objet ViewBag pour transmettre les données entre Controller et View. Ouvrez HomeController.cs et modifiez la fonction Index dans le code suivant.

Dans le code ci-dessus, nous définissons la valeur de l'attribut de sauvegarde de l'objet ViewBag. Le code vérifie l'heure actuelle et renvoie le message Good Morning / Afternoon en utilisant l'instruction Return View (). Notez qu’ici Greeting est juste un exemple d'attribut que nous avons utilisé avec l'objet ViewBag. Vous pouvez utiliser n'importe quel autre nom d'attribut à la place de Salutations.

Étape 9 - Ouvrez l'index.cshtml et copiez le code suivant dans la section du corps.

Dans le code ci-dessus, nous accédons à la valeur de l'attribut de salut de l'objet ViewBag à l'aide de @ (qui serait définie à partir du contrôleur).

Étape 10 - Maintenant, exécutez l'application à nouveau. Cette fois, notre code exécutera le Contrôleur d'abord, définissez le ViewBag, puis réglez-le à l'aide du code View. Voici la sortie.

Structure des dossiers

Maintenant que nous avons créé un exemple d'application MVC, regardons la structure des dossiers d'un projet MVC. Nous allons créer un nouveau projet MVC pour apprendre cela.

Dans votre Visual Studio, ouvrez Fichier → Nouveau → Projet et sélectionnez l'application ASP.NET MVC. Nommez-le MVCFolderDemo.

Cliquez sur OK. Dans la fenêtre suivante, sélectionnez Application Internet comme modèle de projet et cliquez sur OK.

Cela créera un exemple d'application MVC comme indiqué dans la capture d'écran suivante.

Remarque - Les fichiers présents dans ce projet sortent du modèle par défaut que nous avons sélectionné. Cela peut changer légèrement selon les différentes versions.

Dossier Controllers : Ce dossier contiendra toutes les classes Controller. MVC requiert le nom de tous les fichiers du contrôleur pour finir avec Controller.

Dans notre exemple, le dossier Controllers contient deux fichiers de classe: AccountController et HomeController.

Dossier Models : Ce dossier contiendra toutes les classes de modèles, qui sont utilisées pour fonctionner sur les données de l'application.

Dans notre exemple, le dossier Modèles contient AccountModels. Vous pouvez ouvrir et regarder le code dans ce fichier pour voir comment le modèle de données est créé pour gérer les comptes dans notre exemple.

Dossier Views : Ce dossier stocke les fichiers HTML liés à l'affichage de l'application et à l'interface utilisateur. Il contient un dossier pour chaque contrôleur.

Dans notre exemple, vous verrez trois sous-dossiers sous Vues, à savoir Compte, Accueil et Partagé qui contiennent des fichiers html spécifiques à cette zone de vue.

Dossiers App_Start : Ce dossier contient tous les fichiers nécessaires pendant la charge de l'application.

Par exemple, le fichier RouteConfig est utilisé pour acheminer l'URL entrante vers le contrôleur et l'action corrects

Dossier Content : Ce dossier contient tous les fichiers statiques, tels que css, images, icônes, etc.

Le fichier Site.cs dans ce dossier est le style par défaut appliqué.

Dossier Scripts : Ce dossier stocke tous les fichiers JS dans le projet. Par défaut, Visual Studio ajoute MVC, jQuery et d'autres bibliothèques JS standard.

Models

Le composant 'Modèle' est responsable de la gestion des données de l'application. Il répond à la demande de la vue et répond également aux instructions du contrôleur pour se mettre à jour. Les classes de modèles peuvent être créées manuellement ou générées à partir d'entités de base de données. Nous allons voir beaucoup d'exemples pour créer manuellement des modèles dans les chapitres suivants. Ainsi, dans ce chapitre, nous allons essayer l'autre option, c'est-à-dire générer à partir de la base de données afin que vous ayez une expérience pratique sur les deux méthodes. Créer des entités de base de données

Connectez-vous à SQL Server et créez une nouvelle base de données.

Maintenant, exécutez les requêtes suivantes pour créer de nouvelles tables.

Générer des modèles utilisant des entités de base de données

Après avoir créé la base de données et la configuration des tables, vous pouvez aller de l'avant et créer une nouvelle application MVC Empty. Cliquez avec le bouton droit de la souris sur le dossier Modèles dans votre projet et sélectionnez Ajouter → Nouvel élément. Ensuite, sélectionnez ADO.NET Entity Data Model.

Dans l'assistant suivant, choisissez Générer à partir de la base de données et cliquez sur Suivant. Définissez la connexion à votre base de données SQL.

Sélectionnez votre base de données et cliquez sur Test de connexion. Un écran semblable au suivant suivra. Cliquez sur Suivant.

Sélectionnez les tableaux, les vues et les procédures et fonctions stockées. Cliquez sur Terminer. Vous verrez la vue de modèle créée comme indiqué dans la capture d'écran suivante.

Les opérations ci-dessus créeraient automatiquement un fichier modèle pour toutes les entités de base de données. Par exemple, la table Student que nous avons créée entraînera un fichier modèle Student.cs avec le code suivant

Controllers

Asp.net MVC Controllers sont responsables de contrôler le flux de l'exécution de l'application. Lorsque vous effectuez une demande (signifie demander une page) à une application MVC, un contrôleur est responsable du retour de la réponse à cette demande. Le contrôleur peut effectuer une ou plusieurs actions. L'action du contrôleur peut renvoyer différents types de résultats d'action à une demande particulière.

Le contrôleur est responsable du contrôle de la logique de l'application et agit comme coordinateur entre la vue et le modèle. Le contrôleur reçoit une entrée des utilisateurs via View, puis traite les données de l'utilisateur à l'aide de Model et renvoie les résultats à la vue.

Pour créer un contrôleur :

Étape 1 - Créez une application vide MVC, puis cliquez avec le bouton droit sur le dossier Contrôleur dans votre application MVC

Étape 2 - Sélectionnez l'option de menu Ajouter → Contrôleur. Après la sélection, la boîte de dialogue Ajouter un contrôleur s'affiche. Nommez le contrôleur en tant que DemoController.

Un fichier de classe de contrôleur sera créé comme indiqué dans la capture d'écran suivante. MVC New Controller

Dans MVC Framework, les classes de contrôleurs doivent implémenter l'interface IController à partir de l'espace de noms System.Web.Mvc

C'est une interface très simple. La seule méthode, Exécuter, est invoquée lorsqu'une requête est ciblée sur la classe du contrôleur. Le MVC Framework sait quelle classe de contrôleur a été ciblée dans une requête en lisant la valeur de la propriété du contrôleur générée par les données de routage.

Étape 1 - Ajoutez un nouveau fichier de classe et nommez-le comme DemoCustomController. Modifiez maintenant cette classe pour hériter de l'interface IController.

Étape 2 - Copiez le code suivant dans cette classe.

Étape 3 - Exécutez l'application et vous recevrez la sortie suivante.

Views

Comme on l'a vu dans les chapitres initiaux initiaux, View est le composant impliqué dans l'interface utilisateur de l'application. Ces vues sont généralement liées à partir des données du modèle et ont des extensions telles que html, aspx, cshtml, vbhtml, etc. Dans notre première application MVC, nous avons utilisé Views with Controller pour afficher les données vers l'utilisateur final. Pour rendre ces contenus statiques et dynamiques au navigateur, MVC Framework utilise View Engines. View Engines sont essentiellement une implémentation de syntaxe de marquage, qui sont responsables de rendre le HTML final au navigateur.

MVC Framework est livré avec deux moteurs de vue intégrés :

- Razor Engine - Razor est une syntaxe de balisage qui permet le code C # ou VB côté serveur dans les pages Web. Ce code côté serveur peut être utilisé pour créer du contenu dynamique lorsque la page Web est en cours de chargement. Razor est un moteur avancé par rapport au moteur ASPX et a été lancé dans les versions ultérieures de MVC.

- ASPX Engine - ASPX ou le moteur de Web Forms est le moteur de vue par défaut inclus dans MVC Framework depuis le début. L'écriture d'un code avec ce moteur est similaire à l'écriture d'un code dans ASP.NET Web Forms

RAZOR

ASPX

Sur ces deux, Razor est un moteur de visualisation avancé tel qu'il se compose d'une syntaxe compacte, d'approches de développement axées sur les tests et de meilleures fonctionnalités de sécurité. Nous utiliserons le moteur Razor dans tous nos exemples car c'est le moteur de visualisation le plus utilisé

Ces moteurs de vue peuvent être codés et implémentés dans deux types suivants: Fortement dactylographié et Dynamiquement typé.

Ces approches sont semblables à la liaison précoce et à la liaison tardive respectivement dans lesquelles les modèles seront liés à la vue de manière forte ou dynamique. Vues pleinement dactylographiées

Pour comprendre ce concept, créez un exemple d'application MVC (suivez les étapes des chapitres précédents) et ajoutez un fichier de classe Contrôleur nommé ViewDemoController.

Maintenant, copiez le code suivant dans le fichier du contrôleur -

Dans le code ci-dessus, nous avons deux méthodes d'action définies: StronglyTypedIndex et IndexNotStonglyTyped. Nous allons maintenant ajouter des vues pour ces méthodes d'action. Cliquez avec le bouton droit de la souris sur la méthode d'action StonglyTypedIndex et cliquez sur Ajouter une vue. Dans la fenêtre suivante, cochez la case "Créer une vue fortement typée". Cela permettra également les options de modèle modèle modèle et échafaudage. Sélectionnez l'option Liste des modèles d'échafaudage. Cliquez sur Ajouter.

Un fichier de vue similaire à la capture d'écran suivante sera créé. Comme vous pouvez le remarquer, il a inclus la classe de modèle Blog ViewDemoController en haut. Vous pourrez également utiliser IntelliSense dans votre code avec cette approche.

Pour créer des vues dactylographiées dynamiques, cliquez avec le bouton droit de la souris sur l'action IndexNotStonglyTyped et cliquez sur Ajouter une vue.

Cette fois, ne sélectionnez pas la case "Créer une vue fortement typée".

La vue résultante aura le code suivant :

Comme vous pouvez le voir dans le code ci-dessus, cette fois, il n'a pas ajouté le modèle de Blog à la vue comme dans le cas précédent. En outre, vous ne pourrez pas utiliser IntelliSense cette fois car cette fois-ci, la liaison sera effectuée au moment de l'exécution.

Les vues fortement typées sont considérées comme une meilleure approche car nous savons déjà quelles données sont transmises en tant que Vues dactylographiées dynamiques à la différence des Vues dans lesquelles les données se lient au moment de l'exécution et peuvent entraîner des erreurs d'exécution, si quelque chose change dans le modèle lié.

CONCLUSION

Nous avons pu voir dans cette première partie de tutoriel, ce qu’était le modèle MVC et comment l’utiliser dans visual studio avec ASP.NET. La suite dans la deuxième partie de ce tutoriel.

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels