Tutoriel : Générer des vues pour EF Database First avec ASP.NET application MVC
À l’aide de MVC, Entity Framework et ASP.NET génération de modèles automatique, vous pouvez créer une application web qui fournit une interface à une base de données existante. Cette série de tutoriels vous montre comment générer automatiquement du code qui permet aux utilisateurs d’afficher, de modifier, de créer et de supprimer des données qui résident dans une table de base de données. Le code généré correspond aux colonnes de la table de base de données.
Ce tutoriel se concentre sur l’utilisation de ASP.NET génération de modèles automatique pour générer les contrôleurs et les vues.
Dans ce tutoriel, vous allez :
- Ajouter une structure
- Ajouter des liens vers de nouvelles vues
- Afficher les affichages des étudiants
- Afficher les vues d’inscription
Prérequis
- Créer les modèles d’application web et de données
- Lorsque vous utilisez Visual Studio 2022, installez des modèles de projet et d’élément Net Framework.
Ajouter une structure
Vous êtes prêt à générer du code qui fournira des opérations de données standard pour les classes de modèle. Vous ajoutez le code en ajoutant un élément de structure. Il existe de nombreuses options pour le type de génération automatique que vous pouvez ajouter ; dans ce tutoriel, la structure inclut un contrôleur et des vues qui correspondent aux modèles Student et Enrollment que vous avez créés dans la section précédente.
Pour maintenir la cohérence dans votre projet, vous allez ajouter le nouveau contrôleur au dossier Contrôleurs existant. Cliquez avec le bouton droit sur le dossier Contrôleurs , puis sélectionnez Ajouter un>nouvel élément généré automatiquement.
Sélectionnez le contrôleur MVC 5 avec des vues, à l’aide de l’option Entity Framework . Cette option génère le contrôleur et les vues pour la mise à jour, la suppression, la création et l’affichage des données dans votre modèle.
Sélectionnez Student (ContosoSite.Models) pour la classe de modèle, puis sélectionnez ContosoUniversityDataEntities (ContosoSite.Models) pour la classe de contexte. Conservez le nom du contrôleur en tant que StudentsController.
Cliquez sur Ajouter.
Si vous recevez une erreur, cela peut être dû au fait que vous n’avez pas généré le projet dans la section précédente. Si c’est le cas, essayez de générer le projet, puis ajoutez à nouveau l’élément généré automatiquement.
Une fois le processus de génération de code terminé, vous verrez un nouveau contrôleur et des vues dans les dossiers Contrôleurs et Vues>Étudiants de votre projet.
Effectuez de nouveau les mêmes étapes, mais ajoutez une structure pour la classe Enrollment . Une fois terminé, vous disposez d’un fichier EnrollmentsController.cs et d’un dossier sous Vues nommées Inscriptions avec les vues Créer, Supprimer, Détails, Modifier et Index.
Ajouter des liens vers de nouvelles vues
Pour faciliter la navigation vers vos nouvelles vues, vous pouvez ajouter quelques liens hypertexte aux vues Index pour les étudiants et les inscriptions. Ouvrez le fichier dans Views>Home>Index.cshtml, qui est la page d’accueil de votre site. Ajoutez le code suivant sous le jumbotron.
<div>
@Html.ActionLink("List of students", "Index", "Students")<br />
@Html.ActionLink("List of enrollments", "Index", "Enrollments")
</div>
Pour la méthode ActionLink, le premier paramètre est le texte à afficher dans le lien. Le deuxième paramètre est l’action et le troisième paramètre est le nom du contrôleur. Par exemple, le premier lien pointe vers l’action Index dans StudentsController. Le lien hypertexte réel est construit à partir de ces valeurs. Le premier lien prend finalement les utilisateurs dans le fichier Index.cshtml dans le dossier Views/Students .
Afficher les affichages des étudiants
Vous allez vérifier que le code ajouté à votre projet affiche correctement une liste des étudiants et permet aux utilisateurs de modifier, de créer ou de supprimer les enregistrements des étudiants dans la base de données.
Cliquez avec le bouton droit sur le fichier View>Home>Index.cshtml, puis sélectionnez Affichage dans le navigateur. Dans la page d’accueil de l’application, sélectionnez Liste des étudiants.
Dans la page Index , notez la liste des étudiants et des liens pour modifier ces données. Sélectionnez le lien Créer un nouveau lien et fournissez des valeurs pour un nouvel étudiant. Cliquez sur Créer et notez que le nouvel étudiant est ajouté à votre liste.
De retour sur la page Index , sélectionnez le lien Modifier et modifiez certaines des valeurs d’un étudiant. Cliquez sur Enregistrer et notez que l’enregistrement de l’étudiant a été modifié.
Enfin, sélectionnez le lien Supprimer et vérifiez que vous souhaitez supprimer l’enregistrement en cliquant sur le bouton Supprimer .
Sans écrire de code, vous avez ajouté des vues qui effectuent des opérations courantes sur les données de la table Student.
Vous avez peut-être remarqué que l’étiquette de texte d’un champ est basée sur la propriété de base de données (par exemple LastName) qui n’est pas nécessairement ce que vous souhaitez afficher sur la page web. Par exemple, vous préférerez peut-être que l’étiquette soit Nom. Vous allez résoudre ce problème d’affichage plus loin dans le tutoriel.
Afficher les vues d’inscription
Votre base de données comprend une relation un-à-plusieurs entre les tables Student et Enrollment et une relation un-à-plusieurs entre les tables Cours et Inscription. Les vues de l’inscription gèrent correctement ces relations. Accédez à la page d’accueil de votre site, puis sélectionnez le lien Liste des inscriptions, puis créez un lien.
La vue affiche un formulaire permettant de créer un enregistrement d’inscription. Notez en particulier que le formulaire contient une liste déroulante CourseID et une liste déroulante StudentID . Les deux sont renseignés avec des valeurs des tables associées.
En outre, la validation des valeurs fournies est automatiquement appliquée en fonction du type de données du champ. La note nécessite un nombre. Par conséquent, un message d’erreur s’affiche si vous essayez de fournir une valeur incompatible : le champ Grade doit être un nombre.
Vous avez vérifié que les vues générées automatiquement permettent aux utilisateurs d’utiliser les données de la base de données. Dans le tutoriel suivant de cette série, vous allez mettre à jour la base de données et apporter les modifications correspondantes dans l’application web.
Étapes suivantes
Dans ce tutoriel, vous allez :
- Ajout d’une structure automatique
- Ajout de liens vers de nouvelles vues
- Affichages des étudiants
- Affichage des affichages d’inscription
Passez au didacticiel suivant pour apprendre à modifier la base de données.