L’objectif de ce deuxième tutoriel du module 2 est de découvrir la structure d’une application ASP.NET à partir d’un modèle vide. Il s’agit aussi de voir la différence entre les contrôles ASP.NET serveur et les contrôles HTML serveur.
Etape 1 – Créer une application ASP.NET vide
L’objectif de cette étape est de découvrir la création d’applications avec un modèle vierge. Il s’agit aussi de découvrir les propriétés « Request » et « Response » permettant de lier la page aux requêtes et réponses http.
- Lancez VS 2012
- Choisir Fichier -> Nouveau -> Application ASP.NET vide
- Entrez « DeuxiemeApp » dans la zone « Nom »
- Cliquez sur OK
- Examinez le contenu du projet
- Dans l’explorateur de solution, cliquez sur le projet « DeuxiemeApp » avec le bouton droit puis sélectionnez « Ajouter un nouvel élément »
- Sélectionnez « Forme web » dans le modèle
- Entrez « Default.aspx » dans la zone nom
- Cliquez sur le bouton « Ajouter »
- Ouvrez « Default.aspx » en mode conception
- En utilisant la boîte à outils, Insérez une zone de texte dans la « div » inclue dans la page
- En utilisant la boîte à outils, insérez un bouton après la zone de texte
- Double-cliquez sur le bouton
- Insérez le code suivant dans l’évènement de clic :
protected void Button1_Click(object sender, EventArgs e)
{
TextBox1.Text = "Formation";
}
- Modifiez la méthode Page_Load comme suit :
protected void Page_Load(object sender, EventArgs e)
{
var url = Request.RawUrl;
if (IsPostBack)
Response.Write(url + " en mode postback");
else
Response.Write(url + " en mode normal");
}
Etape 2 : Comparaison entre les balises HTML et les contrôles serveur
L’objectif de cette étape est de comparer le code HTML généré avec les balises contenues dans la forme web.
- Relancez l’application
- Examinez le code source de la page
Etape 3 : Ajout de contrôles HTML Serveur
L’objectif de cette étape est de découvrir les contrôles HTML et d’y accéder à partir du code en changeant l’attribut « runat ».
- Fermez la fenêtre du navigateur
- Ouvrez « Default.aspx » en mode conception
- Faites glisser un contrôle de type « Input (Button) » juste après le bouton qui existe
- Changez la propriété « id » en « monBouton »
- Basculez en mode code
- Changer le code du nouveau bouton comme suit en mettant à jour son attribut « runat » :
<input id="monBouton" type="button" value="button" runat="server" />
- Basculez vers le code behind en appuyant sur F7
- Modifiez « Page_Load » comme suit :
protected void Page_Load(object sender, EventArgs e)
{
var url = Request.RawUrl;
monBouton.Value = "Test";
if (IsPostBack)
Response.Write(url + " en mode postback");
else
Response.Write(url + " en mode normal");
}
- Exécutez l’application en appuyant sur « F5 »
Pour télécharger le code :
Tutoriel 2.2.zip (28,72 kb)