03 Fév2016
Affichage d'une phrase avec une taille de police incrémentale
Objectifs:
- Créer un page web ASP.net
- Manipuler un contrôle web en Code-Behind
Enoncé:
- Créer une page aspx permettant d’afficher 10 fois la phrase « Page dynamique en ASP.NET »
- Modifier la page précédente de telle façon que la taille de la police d’une phrase s’incrémente de 1 par rapport à la phrase précédente.
![tp1-ex1-phrase-dynamique](/images/articles/asp/tp1-ex1-phrase-dynamique.png)
Phrase dynamique
Question 1:
Code Web Form : boucle.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Boucle.aspx.cs" Inherits="TP1.Boucle" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:Literal ID="Literal1" runat="server"></asp:Literal> </div> </form> </body> </html>
Code Behind : Boucle.aspx.cs
using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace tp1_exelib { public partial class Boucle : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { for(int i=0; i<10; i++) { Literal1.Text += "<div>Page dynamique en ASP.NET</div>"; } } } }
Note
Dans cet exercice on a utilisé le contrôle Literal au lieu du contrôle Label puisqu'on ne veut pas appliquer une mise en forme en niveau de Visual Studio et que le contrôle Literaln'ajoute pas d'éléments HTML au texte.
Question 2:
Pour pouvoir incrémenter la taille il suffit d'ajouter un attribut style avec la propriété font-size et d'utiliser le compteur de la boucle pour augmenter la taille après chaque itération.
Code Behind : Boucle.aspx.cs
public partial class Boucle : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { for(int i=15; i<25; i++) { Literal1.Text += "<div style='font-size: "+ i + "px'>Page dynamique en ASP.NET</div>"; } } }
Remarque :
Le compteur de la boucle for commencera par la valeur 15 pour que la 1ère phrase soit lisible (avec la taille 15px).