L’objectif de ce tutoriel, premier du module 4, est de voir les différents mécanismes permettant de naviguer entre des pages et de passer des informations entre ces pages. Les différents mécanismes serviront à afficher une liste de film, à modifier des films, à mettre à jour et à supprimer des films.
Etape 1 – Créer une application ASP.NET vide et faire un lien entre deux pages
L’objectif de cette étape est de montrer comment naviguer entre deux pages en utilisant le composant « HyperLink ».
- Lancez VS 2012
- Choisir Fichier -> Nouveau -> Application ASP.NET vide
- Entrez « Navigation » dans la zone « Nom »
- Cliquez sur OK
- Dans l’explorateur de solutions, cliquez sur le bouton droit sur le projet puis sélectionnez : Ajout à Forme Web
- Dans la zone nom, entrez « Default »
- Ajoutez une autre forme appelée « Liste »
- Ouvrez « Default.aspx » en mode conception
- Ajoutez un contrôle « HyperLink » dans la page
- Dans la propriété « Text » entrez « Liste »
- Cliquez sur la propriété « NavigateUrl » puis sur le bouton « Parcourir »
- Sélectionnez la page « List.aspx »
- Cliquez sur « OK »
- Exécutez l’application
- Examinez comment le lien permet de rediriger vers une autre page
Etape 2 : Ajout de traitements de modification et de suppression dans le service de films
L’ancienne version de la bibliothèque ne disposait pas de fonctions d’ajout ou de suppression de films. L’objectif de cette étape est d’intégrer ces fonctions.
- Dans l’explorateur de solutions, cliquez sur le bouton droit sur la solution (pas le projet)
- Cliquez avec le bouton droit puis sélectionnez, « Ajouter un Projet Existant »
- Parcourir afin de trouver le projet « Bibliotheque » utilisé précédemment
- Cliquez sur le projet « Navigation » puis ajouter une classe globale d’application « Global.asax »
- Dans le projet « Navigation », ajoutez une référence vers le projet « Bibliotheque »
- Modifiez « Global.asax » comme suit :
protected void Application_Start(object sender, EventArgs e)
{
ServicesDonnees.SetFilmService(new FilmService());
}
- Ouvrez le fichier « IFilmService.cs » dans le projet « Bibliotheque » et modifiez le comme suit :
public interface IFilmService
{
/// <summary>
/// ajoute un film
/// </summary>
/// <param name="f"></param>
void Add(Film f);
/// <summary>
/// supprimer un film
/// </summary>
/// <param name="f"></param>
void Delete(Film f);
/// <summary>
/// renvoie un film à partir de son numéro
/// </summary>
/// <param name="numero"></param>
/// <returns></returns>
Film GetFilm(int numero);
/// <summary>
/// renvoie tous les films
/// </summary>
/// <returns></returns>
IEnumerable<Film> GetAll();
}
- Ouvrez la classe « FilmService » et modifiez-la comme suit :
public class FilmService : IFilmService
{
private List<Film> _liste = new List<Film>();
public FilmService()
{
// ajout d'exemple
AjouterFilm(1, "Avatar", 2011);
AjouterFilm(2, "Salt", 2011);
AjouterFilm(3, "The Dark Knight Rises", 2012);
AjouterFilm(4, "Alien", 1979);
}
private void AjouterFilm(int numero, string titre, int annee)
{
var film = new Film(numero, titre, annee);
_liste.Add(film);
}
public Film GetFilm(int numero)
{
return _liste.FirstOrDefault(e => e.Numero == numero);
}
public IEnumerable<Film> GetAll()
{
return _liste;
}
public void Add(Film f)
{
_liste.Add(f);
}
public void Delete(Film f)
{
_liste.Remove(f);
}
}
- Appuyez sur « F6 » pour vérifier que le code compile correctement.
Etape 3 : Affichage de la liste des films
L’objectif de cette étape est d’afficher la liste des films existants sous forme de tableau. Ça permettra entre autre de manipuler le composant « Table ».
- Ouvrez la forme « List.aspx » en mode conception et ajoutez un label avec l’id « lblMessage » et une table comme suit :
<form id="form1" runat="server">
<asp:Label ID="lblMessage" runat="server" Text="Label"></asp:Label>
<asp:Table ID="Table1" runat="server">
</asp:Table>
</form>
- Modifiez l’évènement « PageLoad » de la page « List » comme suit :
- Appuyez ensuite sur « F5 » pour vérifier que ça exécute correctement
protected void Page_Load(object sender, EventArgs e)
{
lblMessage.Visible = false;
var row = new TableRow();
var cell = new TableCell();
cell.Text = "Num";
row.Cells.Add(cell);
cell = new TableCell();
cell.Text = "Titre";
row.Cells.Add(cell);
cell = new TableCell();
cell.Text = "Année";
row.Cells.Add(cell);
cell = new TableCell();
row.Cells.Add(cell);
cell.Text = "Détails";
Table1.Rows.Add(row);
foreach (Film f in ServicesDonnees.FilmService.GetAll())
{
row = new TableRow();
cell = new TableCell();
cell.Text = f.Numero.ToString();
row.Cells.Add(cell);
cell = new TableCell();
cell.Text = f.Titre;
row.Cells.Add(cell);
cell = new TableCell();
cell.Text = f.Annee.ToString();
row.Cells.Add(cell);
cell = new TableCell();
var link = string.Format("Edit.aspx?mode=edit&numero={0}", f.Numero);
cell.Text = string.Format("<a href=\"{0}\">Modifier", link);
row.Cells.Add(cell);
Table1.Rows.Add(row);
}
}
Etape 4 : Création de la page d’édition de films
L’objectif de cette étape est de créer une page permettant de modifier ou d’ajouter des films. Pour connaître le mode en cours (insertion ou modification), on utilise la variable « mode » qui est transmise sous forme de chaine de requête avec l’URL. En mode modification, le film à modifier est connu en utilisant la chaîne de requête « numero ». Les différents messages seront transmis à la page d’accueil en utilisant les variables de session.
- Dans le projet « Navigation » ajoutez une page qui s’appelle « Edit.aspx »
- Insérez des contrôles dans Edit.aspx de façon à pouvoir ajouter ou modifier un film comme suit :
<form id="form1" runat="server">
<div>
<asp:Label ID="lblMessage" runat="server" Text="Label" ForeColor="#FF3300"></asp:Label><br />
<asp:Label ID="Label1" runat="server" Text="Numéro :"></asp:Label>
<asp:TextBox ID="txtNumero" runat="server"></asp:TextBox>
<br />
<asp:Label ID="Label2" runat="server" Text="Titre : "></asp:Label>
<asp:TextBox ID="txtTitre" runat="server"></asp:TextBox>
<br />
<asp:Label ID="Label3" runat="server" Text="Annee :"></asp:Label>
<asp:TextBox ID="txtAnnee" runat="server"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" Text="Enregistrer" />
</div>
</form>
- Modifiez l’évènement « Page_Load » de la page « Edit.aspx » comme suit :
protected void Page_Load(object sender, EventArgs e)
{
lblMessage.Visible = false;
var editMode = Request.QueryString["mode"];
Session["message"] = null;
Film film = null;
if (editMode == "edit")
{
var numero = int.Parse(Request.QueryString["numero"]);
film = ServicesDonnees.FilmService.GetFilm(numero);
}
if (!IsPostBack)
{
if (editMode == "edit")
{
// afficher le fim
txtNumero.Text = film.Numero.ToString();
txtTitre.Text = film.Titre;
txtAnnee.Text = film.Annee.ToString();
}
}
else
{
try
{
if (editMode == "add")
film = new Film();
film.Numero = int.Parse(txtNumero.Text);
film.Titre = txtTitre.Text;
film.Annee = int.Parse(txtAnnee.Text);
if (editMode == "add")
{
ServicesDonnees.FilmService.Add(film);
Session["message"] = "Film ajoute avec succes";
}
else
Session["message"] = "Film modifié avec succes";
Response.Redirect("List.aspx");
}
catch
{
lblMessage.Text = "Veuillez vérifiez vos données";
lblMessage.Visible = true;
}
}
- La page vérifie qu’elle est en mode édition ou ajout en examinant la variable de requête « mode »
- Si elle est en mode « modification », elle récupère l’id du film à modifiez en examinant la chaîne de requête « numero » puis affiche les informations de ce film
- En mode postback, selon on est en mode ajout ou modification, la page ajoute ou modifie la film puis redirige vers la page « List »
- Si l’opération s’est bien déroulée, la page « Edit » communique un message vers la page « List » en utilisant la propriété « Session »
- Appuyez sur « F6 » pour vérifier que le code compile
- Ouvrez la page « List.aspx » comme suit :
<form id="form1" runat="server">
<asp:Label ID="lblMessage" runat="server" Text="Label"></asp:Label>
<asp:Table ID="Table1" runat="server">
</asp:Table>
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Edit.aspx?mode=add">Ajout</asp:HyperLink>
<br />
<asp:TextBox ID="txtEdit" runat="server"></asp:TextBox>
<asp:Button ID="btnSupprimer" runat="server" PostBackUrl="~/Delete.aspx" Text="Supprimer" />
</form>
- Ouvrez le fichier code behind « List.aspx.cs »
- Insérez le code suivant juste après la première instruction de la méthode
if (Session["message"] != null)
{
lblMessage.Text = Session["message"].ToString();
lblMessage.Visible = true;
Session["message"] = null;
}
- Exécutez l’application en appuyant sur F5 et vérifiez que l’application peut ajouter et supprimer des films et que les messages de succès s’affichent correctement.
Etape 5 : Communication entre pages en utilisant « PostbackUrl »
L’objectif de cette étape est d’implémenter la suppression qui est gérée par une autre page. On utilise la propriété « PostbackUrl » et « PreviousPage » pour passer à la page de suppression les informations concernant le film à supprimer.
- Ouvrez la page « List.aspx » en mode source
- Vérifiez la propriété « PostBackUrl » du bouton « supprimer »
<asp:Button ID="btnSupprimer" runat="server" PostBackUrl="~/Delete.aspx" Text="Supprimer" />
- Dans le projet « Navigation », ajoutez une forme web appelée « Delete.aspx »
- Changez l’évènement Page_Load de cette page comme suit :
protected void Page_Load(object sender, EventArgs e)
{
var page = PreviousPage as List;
if (page == null)
{
Session["message"] = "erreur";
Response.Redirect("List.aspx");
return;
}
var textBox = page.FindControl("txtEdit") as TextBox;
int numero;
if (!int.TryParse(textBox.Text, out numero))
{
Session["message"] = "entrez une valeur numérique";
Response.Redirect("List.aspx");
}
else
{
var film = ServicesDonnees.FilmService.GetFilm(numero);
if (film == null)
{
Session["message"] = "Film non trouvé";
Response.Redirect("List.aspx");
}
else
{
ServicesDonnees.FilmService.Delete(film);
Session["message"] = "Film supprimé avec succès";
Response.Redirect("List.aspx");
}
}
}
- Vérifiez l’utilisation de la propriété « PreviousPage »
- La valeur du numéro du film est récupérée en utilisant la méthode « FindControl »
- Exécutez l’application en appuyant sur « F5 »
- Vérifiez que la suppression d’un film se déroule bien et qu’un message apparait.
Etape 6 : Intégration des contrôles utilisateur
L’objectif de cette étape est de réutiliser un contrôle utilisateur dans le but d’éviter la redondance du code. Comme exemple, chacune des pages du site contiendra un contrôle permettant à l’utilisateur d’ajouter un commentaire.
- Dans l’explorateur de solutions, ajoutez un nouvel élément
- Dans le modèle, choisissez « Contrôle Utilisateur Web »
- Dans la zone « Nom », entrez « CommentsControl »
- Ouvrez le contrôle en mode source
- Vérifiez qu’il y a une directive « Control » à la place de la directive « Page »
- Ajoutez un label et une zone de texte multiligne dans le contrôle comme suit :
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CommentControl.ascx.cs" Inherits="Navigation.CommentControl" %>
<asp:Label ID="Label1" runat="server" Text="Votre commentaire :"></asp:Label>
<br />
<asp:TextBox ID="TextBox1" runat="server" Rows="4" TextMode="MultiLine" Width="338px"></asp:TextBox>
- Ouvrez « List.aspx » en mode conception
- Par un glisser déposer, glissez « CommentsControl » à la fin de la page
- Vérifiez que Visual Studio a ajouté la directive « Register » au début du fichier, en dessous de la directive « Control »
<%@ Register src="CommentControl.ascx" tagname="CommentControl" tagprefix="uc1" %>
- Vérifiez dans le code, qu’un composant CommentsControl a été ajouté comme suit :
<uc1:CommentControl ID="CommentControl1" runat="server" />
- Vérifiez que la page « List.aspx » ressemble à ceci :
- De la même façon, ajoutez un contrôle « CommentsControl » dans la page « Edit.aspx »
- Vérifiez l’exécution et l’intégration du contrôle en cliquant sur « F5 »
Pour télécharger le source, cliquez ici