Remarque
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de vous connecter ou de modifier des répertoires.
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de modifier des répertoires.
par Rick Anderson
Note
Une version mise à jour de ce didacticiel est disponible ici à l’aide de la dernière version de Visual Studio. Le nouveau tutoriel utilise ASP.NET Core MVC, qui fournit de nombreuses améliorations sur ce didacticiel.
Ce tutoriel explique ASP.NET Core MVC avec des contrôleurs et des vues. Razor Pages est une nouvelle alternative dans ASP.NET Core, un modèle de programmation basé sur des pages qui facilite la création d’une interface utilisateur web plus facile et plus productive. Nous vous recommandons d’essayer le didacticiel Razor Pages avant la version MVC. Tutoriel sur les Razor Pages :
- Est plus facile à suivre.
- Couvre plus de fonctionnalités.
- Est l’approche recommandée pour le développement d’applications.
MVC signifie modèle-view-controller. MVC est un modèle pour le développement d’applications bien conçues, testables et faciles à gérer. Les applications MVC contiennent les éléments suivants :
- M odels : classes qui représentent les données de l’application et qui utilisent la logique de validation pour appliquer des règles métier pour ces données.
- V iews : Fichiers de modèle utilisés par votre application pour générer dynamiquement des réponses HTML.
- C ontrollers : classes qui gèrent les demandes de navigateur entrantes, récupèrent des données de modèle, puis spécifient des modèles d’affichage qui retournent une réponse au navigateur.
Nous allons couvrir tous ces concepts de cette série de tutoriels et vous montrer comment les utiliser pour créer une application.
Commençons par créer une classe de contrôleur. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le dossier Contrôleurs , puis cliquez sur Ajouter, puis Contrôleur.
Dans la boîte de dialogue Ajouter une structure , cliquez sur Contrôleur MVC 5 - Vide, puis sur Ajouter.
Nommez votre nouveau contrôleur « HelloWorldController », puis cliquez sur Ajouter.
Notez que dans l’Explorateur de solutions , un nouveau fichier a été créé nommé HelloWorldController.cs et un nouveau dossier Views\HelloWorld. Le contrôleur est ouvert dans l’IDE.
Remplacez le contenu du fichier par le code suivant.
using System.Web;
using System.Web.Mvc;
namespace MvcMovie.Controllers
{
public class HelloWorldController : Controller
{
//
// GET: /HelloWorld/
public string Index()
{
return "This is my <b>default</b> action...";
}
//
// GET: /HelloWorld/Welcome/
public string Welcome()
{
return "This is the Welcome action method...";
}
}
}
Les méthodes du contrôleur retournent une chaîne html comme exemple. Le contrôleur est nommé HelloWorldController et la première méthode est nommée Index. Appelons-le à partir d’un navigateur. Exécutez l’application (appuyez sur F5 ou Ctrl+F5). Dans le navigateur, ajoutez « HelloWorld » au chemin d’accès dans la barre d’adresses. (Par exemple, dans l’illustration ci-dessous, il s’agit http://localhost:1234/HelloWorld.) La page du navigateur se présente comme la capture d’écran suivante. Dans la méthode ci-dessus, le code a retourné directement une chaîne. Vous avez dit au système de retourner simplement du code HTML, et il l’a fait !
ASP.NET MVC appelle différentes classes de contrôleur (et différentes méthodes d’action dans celles-ci) en fonction de l’URL entrante. La logique de routage d’URL par défaut utilisée par ASP.NET MVC utilise un format comme celui-ci pour déterminer le code à appeler :
/[Controller]/[ActionName]/[Parameters]
Vous définissez le format de routage dans le fichier App_Start/RouteConfig.cs .
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
Lorsque vous exécutez l’application et que vous ne fournissez aucun segment d’URL, l'application utilise par défaut le contrôleur « Accueil » et la méthode d’action « Index » spécifiée dans la section des paramètres par défaut du code ci-dessus.
La première partie de l’URL détermine la classe de contrôleur à exécuter. Par conséquent, /HelloWorld est mappé vers la classe HelloWorldController. La deuxième partie de l’URL détermine la méthode d’action sur la classe à exécuter. Par conséquent , /HelloWorld/Index entraînerait l’exécution de la Index méthode de la HelloWorldController classe. Notez que nous avons uniquement dû accéder à /HelloWorld et que la Index méthode a été utilisée par défaut. Cela est dû au fait qu’une méthode nommée Index est la méthode par défaut qui sera appelée sur un contrôleur si elle n’est pas spécifiée explicitement. La troisième partie du segment d’URL (Parameters) concerne les données de routage. Nous allons voir les données de routage plus loin dans ce didacticiel.
Accédez à http://localhost:xxxx/HelloWorld/Welcome. La méthode Welcome s’exécute et retourne la chaîne « C'est la méthode d'action Welcome... ». Le mappage MVC par défaut est /[Controller]/[ActionName]/[Parameters]. Pour cette URL, le contrôleur est HelloWorld, et Welcome est la méthode d’action. Vous n’avez pas encore utilisé la partie [Parameters] de l’URL.
Nous allons modifier l’exemple légèrement afin que vous puissiez transmettre des informations de paramètre de l’URL au contrôleur (par exemple, /HelloWorld/Welcome ?name=Scott&numtimes=4). Modifiez votre Welcome méthode pour inclure deux paramètres, comme indiqué ci-dessous. Notez que le code utilise la fonctionnalité de paramètre facultatif C# pour indiquer que le numTimes paramètre doit être défini par défaut sur 1 si aucune valeur n’est passée pour ce paramètre.
public string Welcome(string name, int numTimes = 1) {
return HttpUtility.HtmlEncode("Hello " + name + ", NumTimes is: " + numTimes);
}
Note
Remarque de sécurité : le code ci-dessus utilise HttpUtility.HtmlEncode pour protéger l’application contre les entrées malveillantes (à savoir JavaScript). Pour plus d’informations , consultez Comment : protéger contre les attaques de script dans une application web en appliquant l’encodage HTML aux chaînes.
Exécutez votre application et accédez à l’exemple d’URL (http://localhost:xxxx/HelloWorld/Welcome?name=Scott&numtimes=4). Vous pouvez essayer différentes valeurs pour name et numtimes dans l’URL. Le système de liaison de modèle MVC ASP.NET mappe automatiquement les paramètres nommés de la chaîne de requête dans la barre d’adresses aux paramètres de votre méthode.
Dans l’exemple ci-dessus, le segment d’URL (Parameters) n’est pas utilisé, et les paramètres name et numTimes sont passés en tant que chaînes de requête. Le point d’interrogation, ?, (Le point d’interrogation) dans l’URL ci-dessus est un séparateur, et il est suivi par les chaînes de requête. Le caractère & sépare les chaînes de requête.
Remplacez la méthode Welcome par le code suivant :
public string Welcome(string name, int ID = 1)
{
return HttpUtility.HtmlEncode("Hello " + name + ", ID: " + ID);
}
Exécutez l’application et entrez l’URL suivante : http://localhost:xxx/HelloWorld/Welcome/1?name=Scott
Cette fois que le troisième segment d’URL correspond au paramètre ID. de routage, la Welcome méthode d’action contient un paramètre (ID) qui correspond à la spécification d’URL dans la RegisterRoutes méthode.
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
Dans ASP.NET applications MVC, il est plus courant de passer des paramètres en tant que données de routage (comme nous l’avons fait avec l’ID ci-dessus) que de les transmettre en tant que chaînes de requête. Vous pouvez également ajouter un itinéraire pour passer à la fois name et numtimes en paramètres comme données de l’itinéraire dans l’URL. Dans le fichier App_Start\RouteConfig.cs , ajoutez l’itinéraire « Hello » :
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
routes.MapRoute(
name: "Hello",
url: "{controller}/{action}/{name}/{id}"
);
}
}
Exécutez l’application et accédez à /localhost:XXX/HelloWorld/Welcome/Scott/3.
Pour de nombreuses applications MVC, l’itinéraire par défaut fonctionne correctement. Vous allez apprendre plus loin dans ce tutoriel pour transmettre des données à l’aide du classeur de modèles, et vous n’aurez pas à modifier l’itinéraire par défaut pour cela.
Dans ces exemples, le contrôleur a effectué la partie « VC » de MVC, c’est-à-dire la vue et le travail du contrôleur. Le contrôleur retourne directement du HTML. En règle générale, vous ne souhaitez pas que les contrôleurs retournent directement du code HTML, car cela devient très fastidieux pour le code. Au lieu de cela, nous allons généralement utiliser un fichier de modèle d’affichage distinct pour vous aider à générer la réponse HTML. Examinons ensuite comment procéder.