Guillaume Lacasa
Les bases d’ASP.NET MVC
Découvrez avec ASP.NET MVC une nouvelle façon de créer des sites webs de manière structurée suivant le pattern Modèle-Vue-Contrôleur.
Par Guillaume Lacasa publié le 14/10/2009 à 21:48, lu 1355 fois, 7 pages
commentaire(s) 0 commentaire(s) tag(s)Tags: ASP.NET MVC
 5 | Les vues
Les vues
Les vues sont des fichiers aspx qui contiennent le code HTML à renvoyer au navigateur, qui permettent d’afficher les données passées par le contrôleur. Tout comme en WebForm, on peut définir des MasterPage, et afficher dans nos vues des vues partielles, équivalent MVC des UserControl.
Le dossier « Views » de notre projet contient plusieurs dossiers, un par contrôleur, ainsi qu’un dossier « Shared » pour les vues partagées par plusieurs contrôleurs.
 
/content/f6fd7fc0-dc00-4ed7-a5e7-5c45644b4521/image5.png
 
Le contrôleur peut spécifier le nom de la vue à appeler. Lorsque le contrôleur appelle une vue sans spécifier le nom, la vue cherchée est le nom de l’action. Lorsqu’une vue est appelée, MVC va chercher un fichier aspx ou ascx dans le dossier des vues du contrôleur, et s’il ne trouve pas, va chercher dans le dossier « Shared ».
Création d’une vue depuis le contrôleur
L’éditeur MVC intégré à Visual Studio permets de créer facilement une vue associée à une action, en affichant le menu contextuel dans l’action :
 
/content/f6fd7fc0-dc00-4ed7-a5e7-5c45644b4521/image6.png
 
 
/content/f6fd7fc0-dc00-4ed7-a5e7-5c45644b4521/image7.png
 
L’interface permets de personnaliser sa vue :
  • View name : le nom de la vue. Par défaut le nom est le même que celui de l’action.
  • Partial view : crée une vue partielle, au lieu d’une page complète
  • Strongly-typed view : crée une vue fortement typée, afin de définir le type des données qui sont passées à la vue. Si on choisit cette option, on peux choisir de créer la vue avec un template prédéfini pour l’affichage, la création ou la modification des données.
  • Master page : tout comme en WebForm, on peut utiliser une MasterPage sur notre site.
Passage de données du contrôleur à la vue
Afin de faire passer les données du contrôleur à la vue, on a deux façons de faire :
  • Le ViewDataDictionary : le contrôleur tout comme la vue ont accès à une variable ViewData, qui est en fait un dictionnaire clé/valeur, dans lequel on peut stoquer toutes les données pour que la vue les affiche directement.
  • Le Model (fortement typé ou non) : le contrôleur peut faire passer une variable à l’appel de la vue. Si on a défini une vue fortement typée, la variable passée doit être du type de la vue. La page aspx a ainsi accès à cette variable en connaissant son type.
Exemple :

public ActionResult Details(int id)

{

    Element elmt = Context.GetElementById(id);

 

    if (elmt == null)

        return View("ElementNotFound");

 

    ViewData["PageTitle"] = elmt.Name;

    return View("Details", elmt);

}

Ici, on récupère un élément à partir de son identifiant. Si l’élément n’est pas trouvé, on charge une vue « ElementNotFound », à laquelle aucune donnée n’est passée.
Si l’élément est trouvé, on va appeler la vue « Details » (la vue étant la vue par défaut de notre action, on n’est pas obligé de mettre son nom à l’appel de la vue, on aurait pu se contenter d’écrire return View(e);), à laquelle on a fait passer plusieurs données : le titre, par l’intermédiaire du dictionnaire ViewData, ainsi que l’élément « elmt » à l’appel de la vue.
Pour afficher nos données, on récupèrera ces variables directement dans notre page aspx :

< asp : Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

    Details for the element : <%= ViewData["PageTitle"] %>

</ asp : Content >

 

< asp : Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Details</h2>

    <fieldset>

        <legend>Fields</legend>

        <p>

            Name:

            <%= Html.Encode(Model.Name) %>

        </p>

        <p>

            Value1:

            <%= Html.Encode(Model.Value1) %>

        </p>

        <p>

            Value2:

            <%= Html.Encode(Model.Value2) %>

        </p>

    </fieldset>

</ asp : Content >

Création de liens
Pour faire des liens vers d’autres actions dans nos pages, on a un Html helper qui va nous permettre de créer automatiquement nos liens en fonction d’un nom de contrôleur et d’action. Il suffit d’appeler la méthode Html.ActionLink :
 
/content/f6fd7fc0-dc00-4ed7-a5e7-5c45644b4521/image8.png
 
Les paramètres à passer sont les suivants :
  • linkText : le texte du lien
  • actionName : le nom de l’action à appeler
  • controllerName : le nom du contrôleur à appeler. S’il n’est pas défini, l’action va être cherchée dans le contrôleur de la page courante.
  • routeValues : les paramètres à passer à l’action, défini dans un type anonyme. Les paramètres sont récupérés par réflexion et passés à l’action du contrôleur.
  • htmlAttributes : une liste d’attributs Html à ajouter au lien.
 
» Démarrer une discussion