Tutoriel 3.1–Intégration de traitements

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 »

image

  • 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 »

image

  • 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 »

image

  • 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

image

  • 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

image

  • 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 »

image

  • 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 »

image

  • 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 »

image

  • 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

image

  • 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>

 

image

  • 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

image

Pour télécharger le code source : cliquez ici

Comments (3) -

  • Bonjour,

    Je crois pourtant avoir tout bien fait, mais quand j'appuie sur F6 à la fin de l'étape 2, j'ai les erreurs suivantes.

    Erreur  1  Accessibilité incohérente : le type de retour 'Bibliotheque.Film' est moins accessible que la méthode 'Bibliotheque.IFilmService.GetFilm(int)'  f:\profils\pausanias\documents\visual studio 2012\Projects\ProgrammationWeb\Bibliotheque\IFilmService.cs  16  14  Bibliotheque
    Erreur  2  Accessibilité incohérente : le type de retour 'System.Collections.Generic.IEnumerable<Bibliotheque.Film>' est moins accessible que la méthode 'Bibliotheque.IFilmService.GetAll()'  f:\profils\pausanias\documents\visual studio 2012\Projects\ProgrammationWeb\Bibliotheque\IFilmService.cs  22  27  Bibliotheque
    Erreur  3  Accessibilité incohérente : le type de retour 'Bibliotheque.Film' est moins accessible que la méthode 'Bibliotheque.FilmService.GetFilm(int)'  f:\profils\pausanias\documents\visual studio 2012\Projects\ProgrammationWeb\Bibliotheque\FilmService.cs  28  21  Bibliotheque
    Erreur  4  Accessibilité incohérente : le type de retour 'System.Collections.Generic.IEnumerable<Bibliotheque.Film>' est moins accessible que la méthode 'Bibliotheque.FilmService.GetAll()'  f:\profils\pausanias\documents\visual studio 2012\Projects\ProgrammationWeb\Bibliotheque\FilmService.cs  33  34  Bibliotheque
  • Oups ! Milles excuses ! J'avais oublié de mettre "public" pour la class Film. Elle était donc "private" (par défaut).

    Plus d'erreurs maintenant
  • Bonjour,

    Très bons tutos.

    Lorsque  je demande le téléchargement du code source 3.1 je suis dirigé vers celui de
    ProgrammationWeb_1.zip

    De même je n'arrive pas à télécharger  le 2.1 , 2.2 .

    Merci pour votre aide.

    Salutations

Add comment

Loading