Développement d`application web avec Visual Studio 2012 et ASP

Transcription

Développement d’application web avec Visual Studio
2012 et ASP.NET
Tutoriel 3.1 : Programmation Web
Etape 1 – Créer une application ASP.NET vide
L’objectif de cette étape est de montrer comment Visual Studio génère des fichiers et utilise le mécanisme des
classes partielles pour accéder aux éléments générés
1.
2.
3.
4.
5.
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
6. Dans la zone nom, entrez « Default »
7.
8.
9.
10.
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)
{
}
}
11. Dans l’explorateur de solutions, développer Default.aspx
12. Remarquez la présence des fichiers : « Default.aspx.cs » et « Defaut.aspx.designer.cs »
1
Copyright ©, Mostefai Mohammed Amine, ESI 2013
2012 et ASP.NET
13.
14.
15.
16.
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;
}
17. Supprimez le « label » qui vient d’être ajouté
2
2012 et ASP.NET
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.
1.
2.
3.
4.
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 »
5. Cliquez sur « OK »
6. La solution est maintenant composée de deux projets au lieu d’un seul
7. Remarquez la présence de la classe « Class1 » créée par défaut
3
2012 et ASP.NET
8. Depuis l’explorateur de solutions, supprimez le fichiers Class1
9. Dans l’explorateur de solutions, cliquez sur « Bibliotheque » avec le bouton droit puis cliquez « Ajout » 
« Classe »
10. Dans la zone « Nom » entrez « Film »
11. Cliquez sur OK
12. Dans le fichier Film.cs, remplacez la classe « Film » comme suit :
4
2012 et ASP.NET
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; }
}
13.
14.
15.
16.
17.
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 »
18. Cliquez sur « OK »
19. Remplacez le code de « IFilmService » comme suit :
5
2012 et ASP.NET
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();
}
20. Ajoutez une classe au projet « Bibliotheque » appelée « FilmService »
21. Modifiez cette classe de façon à ce qu’elle hérite de l’interface « IFilmService »
22. Remarquez le SmartTag bleu s’affichant en dessous de « IFilmService »
23. Cliquez sur le « SmartTag » puis sélectionnez « Implémenter IFilmService»
24. Modifiez la classe « FilmService » comme suit :
6
2012 et ASP.NET
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;
}
}
25. 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 »
1. Dans le projet « Bibliotheque », ajoutez une classe appelée « ServicesDonnees »
2. Modifiez la classe ServiceDonnees comme suit :
3. 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; }
}
4.
5.
6.
7.
7
Dans l’explorateur de solutions, cliquez sur le bouton droit sur le projet « ProgramationWeb »
Sélection Ajouter  Nouvel Elément
Choisiss=ez le modèle « Classe Globale d’Application »
Cliquez sur « OK »
2012 et ASP.NET
8. Dans l’explorateur de solutions, cliquez sur le bouton droit sur le noeau « Références » se trouvant dans le
projet « ProgrammationWeb »
9. Sélectiionnez « Ajouter une référence »
10. Dans le panneau à gauche, cliquez sur « Solution »
11. Cochez le projet « Bibliotheque »
12. Appuyez sur « OK »
13. Les classes de « Bibliotheque » sont désormais utilisables dans l’application web
8
2012 et ASP.NET
14.
15.
16.
17.
18.
19.
20.
21.
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)
{
}
9
2012 et ASP.NET
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.
1. Ouvrez Default.aspx en mode conception
2. 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>
10
2012 et ASP.NET
3. 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");
}
4. Ajoutez la méthode ShowMessage comme suit :
private void ShowMessage(string message)
{
lblMessage.Text = message;
lblMessage.Visible = true;
}
5. 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ènelments des contrôles orientés serveur.
11
2012 et ASP.NET
1. Ajouter un panneau à la fin de la forme « Default.aspx »
2. 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>
3. 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");
}
}
4. Doublez-cliquez sur le bouton « détails »
5. Dans l’évènement généré, entrez le code suivant :
protected void btnDetails_Click(object sender, EventArgs e)
{
PanelInfo.Visible = true;
}
6. Exécutez en appuyant sur F5
12
2012 et ASP.NET
13

Développement d`application web avec Visual Studio 2012 et ASP

Transcription

Documents pareils

Liste testeur de produit par ville

Label Ville ou Pays d`art et d`histoire : Ce réseau national, animé par

ASP.NET

Quels composants et applications sont supportés par l`hébergement

Découvre des carrières payantes en vente conseil, représentation et

Spécification fonctionnelle

ASP - Assistance scolaire personnalisée et gratuite

Subventions accordées par Emploi-Québec

ASP-Sites Web dynamiques et base de données

Quels composants ASP non standard ont été installés sur les