L’objectif de ce tutoriel du module 3 est de voir comment intégrer les traitements dans les applications ASP.NET.
Etape 1 – Créer une application ASP.NET vide
- Lancez VS 2012
- Choisir Fichier -> Nouveau -> Application ASP.NET vide
- Entrez « ProgrammationWeb » 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 »
- Cliquez sur OK
- La forme web est affichée en mode source
- Appuyez sur « F7 » pour accéder au code behind
- Constatez le code généré comme suit :
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
- Dans l’explorateur de solutions, développer Default.aspx
- Remarquez la présence des fichiers : « Default.aspx.cs » et « Defaut.aspx.designer.cs »
- Ouvrez « Default.aspx.designer.cs » et examinez son contenu
- Revenez sur « Default.aspx » et ajoutez un « Label »
- Re-Vérifiez le contenu du fichier « Default.aspx.designer.cs »
- Remarquez que la classe « Default » est partielle et qu’elle est étalée sur deux fichier (code behind et designer).
public partial class Default {
/// <summary>
/// form1 control.
/// </summary>
/// <remarks>
/// Auto-generated field.
/// To modify move field declaration from designer file to code-behind file.
/// </remarks>
protected global::System.Web.UI.HtmlControls.HtmlForm form1;
/// <summary>
/// Label1 control.
/// </summary>
/// <remarks>
/// Auto-generated field.
/// To modify move field declaration from designer file to code-behind file.
/// </remarks>
protected global::System.Web.UI.WebControls.Label Label1;
}
- Supprimez le « label » qui vient d’être ajouté
Etape 2 : Ajout d’une bibliothèque de classes
L’objectif de cette étape est de créer une bibliothèque de classe contenant plusieurs classes métier dont « Film » et « FilmService ». En utilisant « FilmService », l’utilisateur pourra accéder et chercher des films.
- Dans l’explorateur de solutions, cliquez sur la solution (pas le projet) avec le bouton droit
- Sélectionnez Ajout –> Nouveau Projet
- Dans le modèle, choisissez « Bibliothèque de classes »
- Dans la zone « Nom » entrez « Bibliotheque »
- Cliquez sur « OK »
- La solution est maintenant composée de deux projets au lieu d’un seul
- Remarquez la présence de la classe « Class1 » créée par défaut
- Depuis l’explorateur de solutions, supprimez le fichiers Class1
- Dans l’explorateur de solutions, cliquez sur « Bibliotheque » avec le bouton droit puis cliquez « Ajout » à « Classe »
- Dans la zone « Nom » entrez « Film »
- Cliquez sur OK
- Dans le fichier Film.cs, remplacez la classe « Film » comme suit :
public class Film
{
public Film()
{
}
public Film(int numero, string titre, int annee)
{
this.Numero = numero;
this.Annee = annee;
this.Titre = titre;
}
public int Numero { get; set; }
public int Annee { get; set; }
public string Titre { get; set; }
}
- Compilez en appuyant sur « F6 », vérifiez qu’il n’y a pas d’erreurs
- Dans l’explorateur de solutions, cliquez sur le bouton droite sur « Bibliotheque »
- Cliquez sur « Ajouter »à « Nouvel Elément »
- Choisissez le modèle « Interface »
- Dans la zone « Nom », entrez « IFilmService »
- Cliquez sur « OK »
- Remplacez le code de « IFilmService » comme suit :
public interface IFilmService
{
/// <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();
}
- Ajoutez une classe au projet « Bibliotheque » appelée « FilmService »
- Modifiez cette classe de façon à ce qu’elle hérite de l’interface « IFilmService »
- Remarquez le SmartTag bleu s’affichant en dessous de « IFilmService »
- Cliquez sur le « SmartTag » puis sélectionnez « Implémenter IFilmService»
- Modifiez la classe « FilmService » 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;
}
}
- Vérifiez que le code compile en appuyant sur le bouton « F6 ».
Etape 3 : Ajout du « Global.asax » et utilisation de la bibliothèque de classes
L’objectif de cette étape est de configurer le service de films dans l’initialisation de l’application en utilisant « Global.asax ».
- Dans le projet « Bibliotheque », ajoutez une classe appelée « ServicesDonnees »
- Modifiez la classe ServiceDonnees comme suit :
- Vérifiez que le code compile en appuyant sur « F6 »
public static class ServicesDonnees
{
public static void SetFilmService(IFilmService instance)
{
FilmService = instance;
}
public static IFilmService FilmService { get; private set; }
}
- Dans l’explorateur de solutions, cliquez sur le bouton droit sur le projet « ProgramationWeb »
- Sélection Ajouter à Nouvel Elément
- Choisissez le modèle « Classe Globale d’Application »
- Cliquez sur « OK »
- Dans l’explorateur de solutions, cliquez sur le bouton droit sur le noeau « Références » se trouvant dans le projet « ProgrammationWeb »
- Sélectionnez « Ajouter une référence »
- Dans le panneau à gauche, cliquez sur « Solution »
- Cochez le projet « Bibliotheque »
- Appuyez sur « OK »
- Les classes de « Bibliotheque » sont désormais utilisables dans l’application web
- Dans l’explorateur, double-cliquez sur « Global.asax »
- Placez le curseur dans la méthode « Application_Start »
- Tapez « ServicesDonnees »
- Remarquez le SmartTag qui apparaît, cliquez sur le SmartTag
- Sélectionnez « using Bibliotheque »
- Remarquez que « Bibliotheque » a été ajouté à la liste des « using » au début du fichier
- Modifiez le fichier comme suit :
- Vérifiez que le code compile en appuyant sur « F6 »
public class Global : System.Web.HttpApplication
{
protected void Application_Start(object sender, EventArgs e)
{
ServicesDonnees.SetFilmService(new FilmService());
}
protected void Session_Start(object sender, EventArgs e)
{
}
protected void Application_BeginRequest(object sender, EventArgs e)
{
}
protected void Application_AuthenticateRequest(object sender, EventArgs e)
{
}
protected void Application_Error(object sender, EventArgs e)
{
}
protected void Session_End(object sender, EventArgs e)
{
}
protected void Application_End(object sender, EventArgs e)
{
}
}
Etape 4 : Cycle de vie d’une page
L’objectif de cette étape est d’utiliser l’évènement « Page_Load » dans les deux situations : en mode normal pour initialiser la page et en mode « Postback » pour chercher le numéro entré dans la zone de texte.
- Ouvrez Default.aspx en mode conception
- Faites glisser une zone de texte, un bouton, un label et un autre bouton et arrangez-les comme suit :
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="Numéro :"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="btnChercher" runat="server" Text="Chercher" />
<br />
<asp:Label ID="lblMessage" runat="server" ForeColor="Red" Text="LabelMessage"></asp:Label>
<br />
<asp:Button ID="btnDetails" runat="server" OnClick="btnDetails_Click" Text="Détails" UseSubmitBehavior="False" Visible="False" />
<br />
</div>
</form>
- Modifiez Page_Load comme suit :
lblMessage.Visible = false;
btnDetails.Visible = false;
if (IsPostBack)
{
int numero;
if (int.TryParse(TextBox1.Text, out numero))
{
var film = ServicesDonnees.FilmService.GetFilm(numero);
if (film != null)
{
btnDetails.Text = "Détails sur le film " + numero.ToString();
btnDetails.Visible = true;
}
else
ShowMessage("film non trouvé");
}
else
ShowMessage("Veuillez entrer une valeur numérique correcte");
}
- Ajoutez la méthode ShowMessage comme suit :
private void ShowMessage(string message)
{
lblMessage.Text = message;
lblMessage.Visible = true;
}
- Exécutez en appuyant sur « F5 »
Etape 5 : Contrôles Orientés Serveur
L’objectif de cette étape est de gérer les actions des utilisateurs de l’application en implémentant des évènements des contrôles orientés serveur.
- Ajouter un panneau à la fin de la forme « Default.aspx »
- Ajoutez des labels de la façon suivante :
<asp:Panel ID="PanelInfo" runat="server">
<asp:Label ID="Label3" runat="server" Text="Numéro : "></asp:Label>
<asp:Label ID="lblNumero" runat="server" Text="Label"></asp:Label>
<br />
<asp:Label ID="Label4" runat="server" Text="Titre : "></asp:Label>
<asp:Label ID="lblTitre" runat="server" Text="Label"></asp:Label>
<br />
Année :
<asp:Label ID="lblAnnee" runat="server" Text="Label"></asp:Label>
</asp:Panel>
- Changez la méthode Page_Load comme suit :
protected void Page_Load(object sender, EventArgs e)
{
lblMessage.Visible = false;
btnDetails.Visible = false;
PanelInfo.Visible = false;
if (IsPostBack)
{
int numero;
if (int.TryParse(TextBox1.Text, out numero))
{
var film = ServicesDonnees.FilmService.GetFilm(numero);
if (film != null)
{
btnDetails.Text = "Détails sur le film " + numero.ToString();
btnDetails.Visible = true;
lblNumero.Text = numero.ToString();
lblAnnee.Text = film.Annee.ToString();
lblTitre.Text = film.Titre.ToString();
}
else
ShowMessage("film non trouvé");
}
else
ShowMessage("Veuillez entrer une valeur numérique correcte");
}
}
- Doublez-cliquez sur le bouton « détails »
- Dans l’évènement généré, entrez le code suivant :
protected void btnDetails_Click(object sender, EventArgs e)
{
PanelInfo.Visible = true;
}
- Exécutez en appuyant sur F5
Pour télécharger le code source : cliquez ici