Cette fois nous allons entrer dans le vif du sujet avec la réalisation de notre 1^ère page.

Dans les parties précédentes vous trouverez :

1. La description du modèle MVC
2. La procédure pour installer les ASP.Net 3.5 extensions et créer la solution du "mini blog"
3. La réalisation de la couche d'accés au données avec Linq to SQL

Fonctionnement du framework Asp.Net MVC

L’Asp.Net MVC framework utilise un système de mapping entre les URL et les classes « Controller ». Le contrôleur est chargé de traiter la requête :

1. prend en compte les informations en entrée,
2. lance les actions appropriée et obtiens les données nécessaire depuis le model
3. demande l’affichage de la Vue.

C’est la vue qui génère le Html de la page web à afficher.

Création du contrôleur

Par défaut le framework Asp.Net MVC propose une classe abstraite dont peuvent hériter les contrôleurs.

Pour notre blog, nous allons créer un « MessageController » :

1. Allez dans le répertoire « Controler » de la solution
2. Faites Add new item
3. Choisissez MVC Controller Class
4. Entrez “MessagesController”

Vous obtenez le code suivant :

using System;
using System.Web;
using System.Web.Mvc;

namespace MiniBlog.Controllers
{
    public class MessagesController : Controller
    {

        [ControllerAction]
        public void Index()
        {
            //Add action logic here
        }
    }
}

Lorsque l’on appel la page « Index », nous voulons afficher la liste des messages. Pour cela, nous allons récupérer la liste des messages depuis la base de données en utilisant Linq to SQL et demander l’affichage de la vue.

[ControllerAction]
public void Index()
{
      MiniBlogDataContext ctx = new MiniBlogDataContext();
      var messages = from msg in ctx.Messages
                               orderby msg.Date ascending
                               select msg;
      RenderView("Index", messages);
}

Affichage de la vue

Les vues sont stockées dans le répertoire « Views » du projet.

Pour le controller « Messages », nous devons créer un sous répertoire « Message ».

Pour la vue « Index » nous devons créer une page « Index.aspx ».

Cette page hérite de la classe générique ViewPage. Afin d’afficher une liste de messages, nous allons hériter d’une « ViewPage de liste de message ».

Le code de « Index.aspx.cs » sera donc :

using System;
using System.Web;
using System.Web.Mvc;
using System.Collections.Generic;
using MiniBlog.Models;

namespace MiniBlog.Views.Messages
{
    public partial class Index : ViewPage<IEnumerable<Message>>
    {
    }
}

Ceci nous permet de travailler avec une liste fortement typée de message.

Nous allons ensuite modifier le code Html pour afficher notre page d’accueil, afin de rendre le résultat plus visuel, j’ai créé une master page avec un thème obtenu sur le site www.oswd.org

Le code de « Index.aspx » sera :

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MiniBlog.Views.Messages.Index" Title="Untitled Page" %>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
    <% foreach (var m in this.ViewData) { %>
            <h1><%= m.Titre %></h1>
            <div class="descr"><%= m.Date %> par <%= m.Auteur %></div>
            <p><%= m.Corps %></p>
    <% } %>
</asp:Content>

Remarquez que la variable "ViewData" est fortement typée ce qui nous permet de boucler et d'accéder facilement aux propriétés des messages ("m.Titre") 

Configuration du « routing »

Nous voulons que le « MessagesController » soit utilisé par défaut lors du traitement des requêtes.

Pour cela modifions le « global.asax.cs » de la manière suivante :

public class Global : System.Web.HttpApplication
{
    protected void Application_Start(object sender, EventArgs e)
    {
        RouteTable.Routes.Add(new Route
        {
            Url = "[controller]/[action]/[id]",
            Defaults = new { action = "Index", id = (string)null },
            RouteHandler = typeof(MvcRouteHandler)
        });
        RouteTable.Routes.Add(new Route
        {
           Url = "Default.aspx",
           Defaults = new { controller = "Messages", action = "Index", id = (string)null },
           RouteHandler = typeof(MvcRouteHandler)
        });
    }
}

Résultat

Il ne reste plus qu’à mettre « default.aspx » comme page par défaut du site et a lance le site web.

Si vous avez entré des données en base, vous devez obtenir une page de ce type :