Comment construire

une web form (sans ajax)

efficacement

Tout ceci  n’est que le résultat de mon experience personnelle. Vous pouvez aménager tout ce que vous voyez à l’intérieur comme bon vous semble. Il m’a juste semblé plus pratique au fur et à mesure de mon utilisation des web form de pratiquer de la sorte.

Cet article n’a pas pour but d’être exhaustif ni de couvrir toutes les meilleures pratiques. Il est destiné à un public debutant afin de l’aider à mieux structurer ses pages web.

La Page ASPX

Nommage des controles dans la page

Il est intéréssant de pouvoir retrouver ses controles rapidement quand on utilise visual Studio en code behind, pour cela, le nomenclature des ID des controles suit les régles suivantes:

Controle	Id	Exemple
Boutton	C_Btn_xxxx	C_Btn_Save
TextBox	C_TB_xxxx	C_TB_Name
DropdownList	C_DLL_xxx	C_DDL_Festival
Place Holder	C_PH_xxx	C_PH_Festivals

Proceder ainsi, permet de

1)      Permet de retrouver les controles dans la liste de l’intellisense tres rapidement. Ils commencent tous avec C_xxxx et sont facilement differenciable des autres objets auquels on peut acceder via l’intellisense

2)      réaliser un premiere difference entre la variable festival qui contient l’objet,  le controle C_DDL_Festival qui heberge notre variable, C_PH_Festival le place holder qui contiendra notre “region ASPX” propre au festival dans notre page, tout en gardant la notion qui les anime.

Creation de controle avec function

Un controle auquel on associerais une function, typiquement un bouton. Celui ci conformément au nommages de controles aura un nom en rapport avec l’action qu’il permettra de réaliser. Cette action sera le nom de la function directement :

<asp:Button ID=”C_Btn_Save”

runat=”server”

Text=”Sauver”

CssClass=”default”

OnClick=”Save”>

</asp:Button>

Du coté code behind, avant même d’écrire le code de la fonction on peut donner l’interface de cette fonction, ce qui nous permettra de pouvoir faire un build de notre page sans encombre.

#region Click Functions

protected void Save(object sender, EventArgs e)

{

throw new NotImplementedException();

}
#endregion

Le partitionnement de notre page ASPX

Afin de pouvoir réaliser des actions d’ensemble sur notre page, mais sans forcément atteindre la page entiere, nous allons partitionner notre page en plusieurs bouts. Pour ce faire, j’utilise des place holder :

<asp:PlaceHolder ruant=server ID=C_PH_Festival>

<table>

<tr>

<tdMsoNormal” style=”margin: 0cm 0cm 0.0001pt 35.4pt; line-height: normal;”>                festivals

</td>

</tr>

<tr>

<td align=”right”>

Name:

</td>

<td valign=”Top”>

<asp:TextBox

ID=”C_TB_Name”

runat=”server”

Text=”<%# festival.Name %>”>

</asp:TextBox>

</td>

</tr>
</table>

</asp:PlaceHolder>

Celui ci me permettra d’acceder à cette partie du code indépendemment des autres lors du prerender de ma page par exemple.

LecodeBehind

La mise en page du code behind

IL y aplusieurs grandes parties dans le code behind d’une page web.

1)      Declaration des proprietés

1. private
2. protected
3. public

2)      Declaration des acesseurs

3)      Declarations des fonctions privées

4)      Declaration des fonctions abonnées au cycle de vie de la page

1. OnInit
2. PageLoad
3. focntions basées sur des evenements
   1. i.      Liés au databinding
   2. ii.      Lies a un click ou à une action spécifique de l’utilisateur
4. Onprerender
5. OnUnload

Ce cadre devrait vous couvrir 90% de vos pages webs. Il permet de se retrouver rapidement au sein d’un code behind de page aspx. Par ailleurs, prenez l’habitude d’ecrire vos declarations de maniére alphabétique pour la meme raison.

public partial class FestivalEdit : FestivalBasePage

{

//declaration des variables

private int festivalId;

private Festival _Festival;

//declaration des accesseurs

public Festival Festival

{

get

{

return _Festival;

}

set

{

_Festival = value;

}

}

//debut du cycle de vie de la page

protected override void OnInit(EventArgs e)

{

//Code d’initialisation de la page

base.OnInit(e);

}

protected void Page_Load(object sender, EventArgs e)

{

}

#region Click Functions

protected void Save(object sender, EventArgs e)

{

throw new NotImplementedException();

}

protected void Back(object sender, EventArgs e)

{

throw new NotImplementedException();

}

#endregion

#region Databinding Functions

protected string GetImageURL(object sender, EventArgs e)

{

//exemple de fonction qui pourrait etre utilsé lors d’un databinding

throw new NotImplementedException();

}

#endregion

protected override void OnPreRender(EventArgs e)

{

//databinding des elements de notre page

base.OnPreRender(e);

}

}

La gestion du cycle de vie de la page

L’evenement Oninit

Il permet à la page de s’initialiser. C’est aussi l’endroit où récuperer les données qui proviendrait de la navigation. Par exemple :

protected Festival festival;

protected override void OnInit(EventArgs e)

{

string festivalId;

int outInt;

festivalid = Request.QueryString["festivalId"] ;

if (!string.IsNullOrEmpty(festivalid))

{

if (int.TryParse(festivalid, out outint))

{

festival = ServiceFestTown.GetFestival(outint);

}

else

{

throw new Exception(”No correct festival identifier were found”);

}

}

base.OnInit(e);

}

Ici la page recoit en query l‘identifiant d’un festival. On stocke la valeur en variable privée et ensuite on la teste pour savoir si elle correspond a ce que l’on en attend.

Dans un tel cas, on delegue la creation d’un objet festival à un service.
Il est important de se débarasser trés tot dans la page des valeurs passés en querystring et form. Travailler ainsi permet de mieux cerner les interactions de navigations entre différentes pages.

Les evenements utilisateurs

Cas d’un click sur un boutton

Lors d’un postback suite à un clic sur un bouton, la page va se recharger et passer par la function associée à l’evenement. Il conviendra alors de récuperer les valeurs soit du bouton soit d’un formulaire present sur la page.

La fonction va se decomposer de la manière suivante :

1)      declaration des variables utilisées à l’interieur de la function

2)      recuperation des variables depuis les controles de la page, normalisation et tests si nécessaire.

3)      On attribue les valeurs à notre objet

4)      Un service réalise l’action

5)      On gére les exceptions

protected void Save(object sender, EventArgs e)

{

Button btn;

string name=string.Empty;

//retrieve the data from the page and make the test if needed

if (!string.IsNullOrEmpty(C_TB_Name.Text))

name = C_TB_Name.Text;

if (name.Contains(“festival”)

{

//Assign the data to the values of the object

festival.Name = name;

try

{

ServiceFestTown.SaveFestival(festival);

}

catch (System.Data.SqlClient.SqlException except)

{

//Sqlexception

Information = ” The update or the insert has failed”;

IsError = true;

}

}

}

Les informations venant des controles de la page sont ici, des informations exterieures. On pourrait penser par exemple, que lors du design de notre page, on change plusieurs fois de conteneur pour notre variable (textbox -> DropDownlist ->radiobouton ->finalement Checkbox). Si on intercept pas tres tot, la valeur contenue dans notre conteneur, seule chose qui nous intéresse réellement, il faudra  alors modifier la meme valeur plusieurs fois dans le code behind. Agir comme montré plus haut permet d’éviter ce genre de désagrément.

Dans le meme ordre d’idée, il faut différencier l’objet festival declare en variable globale de notre page et l’information partielle venant des controle de notre page

L’evenement OnPreRender

Toutes les actions de la page ont été faites. On dispose donc désormais dans nos variable de page des bonnes valeurs . On va donc enfin pouvoir cmmencer à réaliser le rendu de notre page. Pour ce faire, nous allons appeler l’evenement databind des conteneurs qui nous intéressent.

Important : Toute opération qui vise à un résultat esthétique doit se faire dans cet evenement.

L’heritage de page

Fonctionnement Basique

L’interet d’avoir une page de base pour notre site web, est que l’on va pouvoir ainsi factoriser certains traitements comme :

1. L’acces à la base de données
2. Obtenir une cohesion d’acesseurs envers nos objets les plus généraux
3. Etablir un module de sécurité
4. … etc…

Pour ce faire, c’est tres simple, l’heritage de la page fonctionnera de la meme maniere que n’importe quel héritage de classe.