Tutoriel 2.2 : Création d’une application ASP.NET vide

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)

Adjust control widths using CSS

One of the most important issues when designing websites is to adjust the width of the different controls and especially text boxes and drop down lists. When using CSS rules that integrate a fixed width, there’s still a small width difference between text controls and drop down lists. The key is that selects and inputs use by default different box sizing mechanisms. Fortunately, CSS3 comes with the box-sizing rule that allows to apply the same box sizing mechanism to controls. And this property is handled correctly by most of the popular browsers. Here is the code snippet : input, select, textarea { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

Centrer verticalement un div dans une fenêtre en utilisant CSS uniquement

Souvent dans les sites web, nous avons la problématique de centrer une boite (div) verticalement et horizontalement dans l’écran. Dans ce tutoriel, je vais montrer comment utiliser une technique très simple qui utilise le CSS uniquement pour accomplir ceci. Toutefois, une condition est requise, est que la div à centrer soit d'’une taille connue à l’avance (en pixels ou en pourcentages). Ce genre de centrage est idéal pour centrer des formulaires comme la boîte de’authentification (login) par exemple. Dans le tutoriel, nous allons centrer un div jaune dont la taille est 500x200 dans le navigateur. D’abord, appliquons le css pour obtenir une page noire : 1: body{ 2: background-color:black; 3: } La technique est simple, utiliser deux div, une conteneur et une div centrée. La div conteneur doit prendre toute la largeur et être positionné verticalement à 50%. En d’autres mots, son Y démarre à partir de la moitié du ViewPort du navigateur. 1: div#conteneur { 2: position: absolute; 3: top: 50%; 4: left: 0px; 5: width: 100%; 6: } La div à centrer est dans la div conteneur. Elle a une largeur fixe (500px) et une hauteur fixe (200px). Pour la centrer horizontalement, on affecte 50% à left. Toutefois ce n’est pas suffisant car la div n’est pas tout à fit au milieu. Elle commence par le milieu. Pour réellement la centrer, il faut la décaler à gauche de la moitié, en d’autres mots, utiliser une marge gauche qui est égale négativement à la moitié de la largeur : 1: div#centree { 2: width: 500px; 3: height: 200px; 4: margin-left: -250px; /* moitié de la largeur */ 5: position: absolute; 6: top: -100px; /* moitié de la hauteur */ 7: left: 50%; 8: background-color:Yellow; 9: } Le même principe est appliqué à height et margin-top. Et le tour est joué, vous pouvez voir le résultat ici.