Dans cette 5ème partie, nous allons modifier notre page d'accueil afin d’utiliser les contrôles serveur.
Réaliser un site avec le framework Asp.Net MVC ne changera pas vos habitudes de développement, tous les contrôles Asp.Net pourront être utilisés de manière classique.
Dans les parties précédentes vous avez trouverez :
- La description du modèle MVC
- La procédure pour installer les ASP.Net 3.5 extensions et créer la solution du "mini blog"
- La réalisation de la couche d'accés au données avec Linq to SQL
- Créer la page d'accueil qui affiche la liste des messages
Permettre le code Behind
Par défaut, le template de page fourni avec le framework MVC comporte une erreur. Pour utiliser les contrôles serveur, commencez par suivre le WorkAround décrit dans ce message :
Création/modification de la page "Index.aspx"
Nous partons de la page Index.aspx crée dans la partie 4 en supprimant le code C# écrit dans la page. Vous obtenez le code suivant :
<%@ 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">
</asp:Content>
Déposons un contrôle "Repeater" ce qui donne le code suivant :
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="True" CodeBehind="Index.aspx.cs" Inherits="MiniBlog.Views.Messages.Index" Title="Untitled Page" %>
<%@ Register assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI.WebControls" tagprefix="asp" %>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
<form id="form1" runat="server">
<asp:Repeater ID="Repeater1" runat="server">
</asp:Repeater>
</form>
</asp:Content>
Remarquez que Visual Studio a automatiquement ajouté des balises "Form" dans le contentplaceholder.
Code Behind
L'ajout du composant "Repeater" a automatiquement crée du code dans le fichier "Index.aspx.design.cs" :
namespace MiniBlog.Views.Messages {
public partial class Index {
protected global::System.Web.UI.HtmlControls.HtmlForm form1;
protected global::System.Web.UI.WebControls.Repeater Repeater1;
}
}
Un composant "Repeater" est déclaré, cela nous permettra d'accéder a ce contrôle depuis le code C#.
DataBinding
Afin d'afficher la liste de messages comme fait précédemment, nous devons effectuer un "binding" de la propriété ViewData de note "ViewPage" vers le "DataSource" du control "Repeater". Ceci sera effectué lors du chargement de la page.
Le code du fichier "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>>
{
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
Repeater1.DataSource = ViewData;
Repeater1.DataBind();
}
}
}
Affichage
Commençons par un petit rappel. Pour afficher une valeur dans un "Repeater" nous devons utiliser la fonction "DataBinder.Eval" sur l'objet "Container.DataItem". Voici un exemple pour le cas de la propriété "Titre".
<%# DataBinder.Eval(Container.DataItem, "Titre")%>
En reprenant le charte graphique de notre miniBlog, nous obtenons le code suivant pour la page "Index.aspx" :
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="True" CodeBehind="Index.aspx.cs" Inherits="MiniBlog.Views.Messages.Index" Title="Untitled Page" %>
<%@ Register assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI.WebControls" tagprefix="asp" %>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
<form id="form1" runat="server">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<h1><%# DataBinder.Eval(Container.DataItem, "Titre")%></h1>
<div class="descr"><%# DataBinder.Eval(Container.DataItem, "Date")%> par <%# DataBinder.Eval(Container.DataItem, "Auteur")%></div>
<p><%# DataBinder.Eval(Container.DataItem, "Corps")%></p>
</ItemTemplate>
</asp:Repeater>
</form>
</asp:Content>
Résultat
Le résultat final sera identique a celui obtenu suite a ce message. Mais cette fois-ci nous avons utilisé un contrôle serveur avec toute les facilités et la flexibilité que cela nous apporte.
Accueil
Archive
Contact
Souscrire