ASP.NET MVC - Vues

Pour apprendre ASP.NET MVC, nous allons construire une application Internet.

Partie 5 :Ajoutez des vues pour afficher l'application.

Dossier Views

Views Les dossiers stockent des fichiers liés à l'affichage de l'application (interface utilisateur) (fichiers HTML). Selon la langue, les extensions de ces fichiers peuvent être html, asp, aspx, cshtml et vbhtml.

Le dossier Views contient un dossier pour chaque contrôleur.

Visual Web Developer a créé un dossier Account, un dossier Home, un dossier Shared (dans le dossier Views).

Le dossier Account contient les pages utilisées pour enregistrer et se connecter aux utilisateurs.

Le dossier Home est utilisé pour stocker les pages de l'application telles que la page d'accueil et la page "À propos".

Le dossier Shared est utilisé pour stocker les vues partagées entre les contrôleurs (pages de modèles et pages de mise en page).

Types de fichiers ASP.NET

Vous pouvez trouver les types de fichiers HTML suivants dans le dossier Views :

Type de fichier Extension
HTML pur .htm ou .html
ASP classique .asp
ASP.NET classique .aspx
ASP.NET Razor C# .cshtml
ASP.NET Razor VB .vbhtml

Fichier Index

Le fichier Index.cshtml représente la page d'accueil de l'application. C'est le fichier par défaut de l'application (fichier d'accueil).

Écrivez le contenu suivant dans le fichier :

@{ViewBag.Title = "Page d'accueil";}
<h1>Bienvenue sur CodeW3C.com</h1>
<p>Mettez ici le contenu de la page d'accueil</p>

Fichier About

Le fichier About.cshtml représente la page "À propos" de l'application.

Écrivez le contenu suivant dans le fichier :

@{ViewBag.Title = "À propos de nous";}
<h1>À propos de nous</h1>
<p>Mettez ici le contenu "À propos de nous"</p>

Exécuter l'application

Choisissez le débogage, démarrez le débogage à partir du menu débogage (ou appuyez sur F5).

Votre application ressemblera à cela :

Cliquez sur "Accueil" et "À propos", pour voir comment cela fonctionne.

Félicitations

Félicitations. Vous avez créé votre première application MVC.

Remarque :L'onglet "Film" ne peut toujours pas être cliqué. Nous ajoutons le code pour l'onglet "Film" dans les chapitres ultérieurs de ce tutoriel.