ASP.NET 2.0 : Démarrage rapide
De nouveaux concepts et plein de nouveaux contrôles apparaissent en ASP.NET 2.0 Petit tour d'horizon des nouvelles fonctionnalités apparues dans la version 2 d'ASP.NET.
|
|
Vu
18607
fois
|
Le Master Page
Le Master Page permet d’avoir une présentation hétérogène sur l’ensemble du site ou différents modules du site. Par exemple ici, on fixe un en-tête, un pied de page et un menu commun à toutes les pages qui utilisent ce même master page.
Ajouter le fichier par la boîte de dialogue nouvel élément

Organiser votre design comme bon vous semble, ici, un en-tête avec le titre, un pied de page avec la signature et un menu pour lister les exemples. Vous pouvez remarquer qu’à l’endroit ou l’on désire insérer du contenu (partie « variable » de notre site), il faut ajouter un container nommé ContentPlaceholder (on peut en placer plusieurs dans le Master Page).
Pour utiliser le Master page depuis une page du site, il faut référencer dans la directive @Page l’attribut MasterPageFile. Ensuite, il faut ajouter un contrôle content qui est branché sur le ContentPlaceHolder du Master Page grâce à l’attribut contentplaceholderId.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" MasterPageFile="MasterPage.master" %>
<asp:content id="Content1" contentplaceholderid="ContentPlaceHolder1" runat="server">
Content 1 dans ContentPlaceHolder1
</asp:content> |
Toutes les propriétés et méthodes publiques contenues dans le Master Page sont accessibles depuis la page directement avec l’objet Master.
Le Callback
Le Callback utilise le protocole XML-HTML (dispo depuis la version 5.0 de Internet Explorer). Il permet d’appeler d’envoyer des requêtes au serveur sans poster la page web ce qui change la manière de récupérer les données.
On crée une page CallBack.aspx, qui implémente l’interface ICallbackEventHandler.
public partial class CallBack : Page, ICallbackEventHandler |
On re-définit les deux méthodes de cet interface, GetCallBackResult avec laquelle on envoie la réponse au client et la méthode RaiseCallBackEvent avec laquelle on reçoit la demande.
string ICallbackEventHandler.GetCallbackResult() { return DateTime.Now.ToString(); }
void ICallbackEventHandler.RaiseCallbackEvent(string eventArgument) { // throw new Exception("The method or operation is not implemented."); }
|
Dans l’évènement Load de notre page on récupère le script JavaScript permettant d’invoquer l’appel au serveur, celui-ci sera inséré côté client. Pour cela on déclare une variable publique de type String et on appelle la méthode ClientScript.GetCallbackEventReference.
public string sCallBackFunctionInvocation;
protected void Page_Load(object sender, EventArgs e) {
// On récupère le script qui sera lancé côté client pour notre exemple:
// _doCallback (´__Page´,message,ShowServerTime,context,OnError)
sCallBackFunctionInvocation = ClientScript.GetCallbackEventReference(this, "message", "ShowServerTime", "context", "OnError", true); } |
Coté HTML, on écrit le code JavaScript suivant :
<script language="javascript" type="text/javascript">
// Fonction appellée lors du clik sur le bouton
function GetServerTime() {
var message = ´´; var context = ´´;
// On injecte le code javascript généré côté serveur
<%=sCallBackFunctionInvocation%>
}
// Fonction qui récupère la réponse du serveur function ShowServerTime(timeMessage, context) { alert(´L´heure sur le serveur est: ´ + timeMessage); }
// Fonction appellée si une erreur est renvoyée par le serveur function OnError(message, context) { alert(´Une erreur inattendue est survenue:´ + message); }
</script> |
On injecte le JavaScript qui invoque le Callback avec <%=sCallBackFunctionInvocation%> qui est la variable publique dans notre classe Callback.
On place un bouton qui appelle notre fonction javascript
<input type="button" value="Récupérer la date et l´heure du serveur" onclick="GetServerTime();" /> |
Appliquer un style, un thème ou un skin
Les Styles
On peut maintenant accéder à la propriété MonControle.Style de la manière suivante :
Pour un contrôle HtmlInputText contrôle serveur
<input type="text" id="myText"/> |
On accède aux styles de la manière suivante :
myText.Style["width"] = "90px"; |
On peut aussi affecter un style aux contrôles serveurs, par exemple une textbox :
<ASP:TextBox id="myTextBox" runat="server" /> |
On lui applique le style comme cela :
Style style = new Style(); style.BorderColor = Color.Black; style.BorderStyle = BorderStyle.Dashed; style.BorderWidth = 1; myTextBox.ApplyStyle(style); |
Les thèmes et les skins
Avec ASP.NET 2.0 apparaît la notion de thème, vous pouvez voir dans Visual Studio 2005 que quand vous créez un nouveau site web, un répertoire App_Themes est créé
Un thème est en fait un sous répertoire dans le répertoire App_Thèmes. Il contient une collection d’un ou plusieurs fichiers skins (avec l’extension .skin). Un thème peut aussi contenir une feuille de styles et/ou des sous répertoires contenant des fichiers statiques comme par exemple des images.
Un thème s’utilise de trois manières différentes,
Appliqué globalement, à toutes les applications, dans ce cas, le thème réside dans le répertoire Themes situés dans le répertoire d’installation du framework :
%WINDIR%\Microsoft.NET\Framework\<version>\Themes |
Vous pouvez aussi appliquer un Thème sur une page, dans ce cas, il faut rajouter dans la directive @Page de votre fichier aspx l’attribut Theme :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Theme.aspx.cs" Theme="Default" Inherits="Theme" MasterPageFile="MasterPage.master"%> |
Enfin, vous pouvez appliquer un theme à tout votre site en modifiant la section <Pages> de votre web.config.
Exemples de skin :
<asp:Label Font-Bold="true" ForeColor="orange" runat="server" />
<asp:Calendar BackColor="White" BorderColor="Black" BorderStyle="Solid" CellSpacing="1" Font-Names="Verdana" Font-Size="9pt" ForeColor="Black" Height="250px" PrevFormat="ShortMonth" Width="330px" runat="server">
<SelectedDayStyle BackColor="#333399" ForeColor="White" />
<OtherMonthDayStyle ForeColor="#999999" />
<TodayDayStyle BackColor="#999999" ForeColor="White" />
<DayStyle BackColor="#CCCCCC" />
<NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="White" />
<DayHeaderStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" Height="8pt" />
<TitleStyle BackColor="#333399" BorderStyle="Solid" Font-Bold="True" Font-Size="12pt" ForeColor="White" Height="12pt" />
</asp:Calendar> |
La page aspx à laquelle il est associé :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Theme.aspx.cs" Theme="Default" Inherits="Theme" MasterPageFile="MasterPage.master"%>
<asp:content id="Content1" contentplaceholderid="ContentPlaceHolder1" runat="server">
<table>
<tr><td style="width: 384px"><asp:Calendar ID="Calendar1" runat="server"/></td><td style="width: 179px"><asp:Label ID="Label1" runat="server" Text="Hello 1" /></td></tr>
<tr><td style="width: 384px"></td><td style="width: 179px"><asp:Label ID="Label2" runat="server" Text="Hello 2" /><br /></td></tr>
<tr><td style="width: 384px"></td><td style="width: 179px"><asp:Label ID="Label3" runat="server" Text="Hello 3" /><br /></td></tr>
</table>
</asp:content> |
Le résultat :
Vous pouvez aussi, au niveau d’un contrôle, désactiver la possibilité d’utiliser le thème avec la propriété :
Vous pouvez aussi utiliser la propriété SkinID dans le fichier skin pour définir plusieurs styles pour le même type de contrôles
<asp:Label Font-Bold="true" ForeColor="orange" runat="server" />
<asp:Calendar BackColor="White" BorderColor="Black" BorderStyle="Solid" CellSpacing="1"
Font-Names="Verdana" Font-Size="9pt" ForeColor="Black" Height="250px" NextPrevFormat="ShortMonth" Width="330px" runat="server">
<SelectedDayStyle BackColor="#333399" ForeColor="White" />
<OtherMonthDayStyle ForeColor="#999999" />
<TodayDayStyle BackColor="#999999" ForeColor="White" />
<DayStyle BackColor="#CCCCCC" />
<NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="White" />
<DayHeaderStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" Height="8pt" />
<TitleStyle BackColor="#333399" BorderStyle="Solid" Font-Bold="True" Font-Size="12pt" ForeColor="White" Height="12pt" />
</asp:Calendar> |
Vous pouvez aussi utiliser plusieurs definition de style dans un skin, par exemple definer plusieurs styles pour les labels et plusieurs styles pour les calendriers. Il suffit de les différencier avec l’attribut SkinId si cet attribut n’est pas spécifié, le style par défaut sera pris. Cet attribut se spécifie dans la définition d’un style et aussi dans les attributs du contrôle cible. Le fichier skin :
<asp:label runat="server" font-bold="true" forecolor="orange" />
<asp:label runat="server" SkinID="Blue" font-bold="true" forecolor="blue" />
<asp:Calendar runat="server" BackColor="#FFFFCC" BorderColor="#FFCC66" BorderWidth="1px" DayNameFormat="FirstLetter" Font-Names="Verdana" Font-Size="8pt" ForeColor="#663399" Height="200px" ShowGridLines="True" Width="220px"> <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" /> <SelectorStyle BackColor="#FFCC66" /> <OtherMonthDayStyle ForeColor="#CC9966" /> <TodayDayStyle BackColor="#FFCC66" ForeColor="White" /> <NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" /> <DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" /> <TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt" ForeColor="#FFFFCC" /> </asp:Calendar>
<asp:Calendar SkinID="Simple" runat="server" BackColor="White" BorderColor="#999999" CellPadding="4" DayNameFormat="FirstLetter" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" Height="180px" Width="200px">
<SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" /> <SelectorStyle BackColor="#CCCCCC" /> <WeekendDayStyle BackColor="#FFFFCC" /> <OtherMonthDayStyle ForeColor="#808080" /> <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" /> <NextPrevStyle VerticalAlign="Bottom" /> <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" /> <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" /> </asp:Calendar> |
La page aspx :
<%@ Page Language="C#" AutoEventWireup="true" Theme="Default" CodeFile="Theme2.aspx.cs" Inherits="Theme2" MasterPageFile="MasterPage.master"%>
<asp:content id="Content1" contentplaceholderid="ContentPlaceHolder1" runat="server">
<div> <asp:Label ID="Label1" runat="server" Text="Hello 1" /><br /> <asp:Label ID="Label2" runat="server" Text="Hello 2" SkinID="Blue" /><br /> <asp:Label ID="Label3" runat="server" Text="Hello 3" /><br /> <br /> <asp:Calendar ID="Calendar1" runat="server"/> <br /> <asp:Calendar ID="Calendar2" SkinID="Simple" runat="server"/>
</div> </asp:content> |
Ce qui nous donne :
Vous pouvez organiser vos skins comme bon vous semble,
WebSite1 App_Themes MyTheme Default.skin Red.skin Blue.skin | Ici chaque fichier skin pourrait contenir les définitions pour les mêmes contrôles mais avec des SkinId différents
WebSite1 App_Themes MyTheme GridView.skin Calendar.skin Label.skin | Ici, chaque fichier contient plusieurs définitions pour un seul contrôle, ceci permet de trouver facilement les définitions pour un contrôle, toutes les définitions doivent avoir un SkinId différent, si une n’en a pas c’est le style par défaut qui sera appliqué au contrôle.
WebSite1 App_Themes
MyTheme
Homepage.skin DataReport.skin Forums.skin |
Enfin, ici on sépare les skins par « zones » ou « modules » ce qui permet aussi une maintenance plus souple.
Vous pouvez aussi changer le thème courant de la page directement en code de cette manière :
this.Theme = "Blue_Theme" ou Page.Theme = "Blue_Theme" |
Validation de formulaire
Nous ne reviendrons pas sur les contrôles de validation déjà connu dans la version 1.1 du Framework.
Nous estimons que les contrôles suivants sont déjà connus :
- RequiredFieldValidator
- CompareValidator
- RangeValidator
- RegularExpressionValidator
- CustomValidator
- ValidationSummary
Nous nous intéressons aux nouveautés qui sont :
ValidateEmptyText : c’est une propriété ajoutée au contrôle CustomValidator, elle fixe un problème qu’avait ce contrôle qui quand le champ qu’il vérifiait était une chaîne de caractère vide, il ne causait pas la validation, cette propriété permet de valider quand même, même si la valeur est une chaîne vide.
ValidationGroup : c’est une propriété ajoutée à tous les contrôles de validation, on nomme explicitement à quel groupe de validation le contrôle appartient, il faut aussi spécifier le groupe pour le bouton qui poste le formulaire, c’est très intéressant lorsque vous avez des gridview ou différentes zones de saisis qui peuvent poster le formulaire. La propriété Page.IsValid vérifie tous les contrôles qui sont associés au contrôle qui a posté le formulaire.
SetFocusOnError : c’est une propriété ajoutée à tous les contrôles de validation, si elle vaut true, lorsque la validation ne se fait pas, le contrôle concerné par le validator prendra le focus. Si plusieurs contrôles ont cette propriété à True, c’est la premier qui a causé une erreur de validation qui prendra le Focus.
La sécurité en ASP.NET 2.0
En ASP.NET 2.0, on a à disposition un ensemble d’objets, contrôles, scripts qui nous permettent de gérer :
- la sécurité (authentification …)
- la gestion des informations de l’utilisateur (qu’il soit authentifié ou non)
- la gestion des utilisateurs, rôles, providers …
Pour gérer tout cela, ASP.NET 2.0 met à notre disposition la possibilité de gérer la sécurité au niveau de notre serveur. Nous avons à notre disposition un site d’administration des utilisateurs, rôles, providers pour toutes les applications de notre serveur web. Pour cela, il existe une base de données nommée ASPNETDB (qui doit être créée au moyen de l’utilitaire aspnet_regsql.exe situé dans le répertoire du Framework).
Note : Pour en savoir plus sur la gestion de l’administration et de la sécurité Labo-Dotnet
Une fois vos utilisateurs, rôles, providers configurés, vous avez la possibilité de les exploiter facilement dans vos applications grâce à des objets et contrôles directement liés à cette base de données.
L’objet Profile
Vous pouvez, afin de conserver les préférences et informations liées à votre utilisateur utiliser un objet Profile qui sera généré à partir des informations que vous allez rentrer dans le web.config Après avoir défini une chaîne de connexion comme suit :
le mode d’identification :
<authentication mode="Forms" /> |
Autoriser l’identification anonyme
<anonymousIdentification enabled="true"/> |
Note : si vous utilisez l’authentification anonyme, les informations seront stockées en base avec une clé générée pour identifier la personne, cette clé est ensuite stockée sous forme de cookie chez le client. C’est la manière dont sont gérées les préférences et informations des utilisateurs anonymes.
Vous allez ensuite pouvoir placer une balise <profile> dans la section <system.web> dans laquelle on peut définir :
- un provider
- des propriétés ainsi que des groupes de propriétés
Le provider se définit en renseignant les attributs suivants :
- name : le nom du provider
- type : type de provider
- connectionStringName ; la chaîne de connexion définie plus haut dans le web.config
- ApplicationName : le nom de l’application qui utilise ce ProfileProvider
Les propriétés se définissent en renseignant les attributs suivants :
- name : le nom de la propriété
- type : le type choisi (par défaut si non renseigné, string)
- allowAnonymous : indique si elle est utilisable avec un profil anonyme
- serializeAs : la méthode de sérialisation
<profile enabled="true" defaultProvider="QuickStartProfileSqlProvider" >
<providers>
<add name="QuickStartProfileSqlProvider"
type="System.Web.Profile.SqlProfileProvider, System.Web, Version=2.0.3600.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"
connectionStringName="LocalSqlServer" applicationName="ASP.Net 2.0 Overview"/>
</providers>
<properties>
<add name="Nom"/>
<add name="Prenom"/>
<add name="AdresseIp"/>
<group name="ColorPreference">
<add name="PageBackground" type="System.Drawing.Color"
allowAnonymous="true" serializeAs="Binary"/>
<add name="Police" type="System.Drawing.Color"
allowAnonymous="true" serializeAs="Binary"/>
</group>
</properties>
</profile>
|
Une fois ce travail effectué, aussitôt ces propriétés et groupe de propriétés apparaissent avec votre objet Profile sur n’importe quel formulaire de votre application :
Vous pouvez donc récupérer et affecter toutes ces propriétés, pour les sauvegarder il suffit d’utiliser la méthode Profile.Save(), le provider et ASP.NET 2.0 font le reste.
Les Login controls
Vous avez à votre disposition 7 contrôles qui vous permettent de gérer vos utilisateurs.
Ces contrôles sont très instinctifs, leurs propriétés sont claires et très complètes.
Le Login :
Il permet à votre utilisateur de s’authentifier, des options sont disponibles telles que le cookie qui permet de ne plus s’authentifier, la validation du login et du mot de passe comme vous le désirez (nombre de caractères alphanumériques, ou non-alphanumériques, nombre de chiffres ou caractères accentués …), les liens qui envoient vers les pages contenant les contrôles CreateUserWizard ou PasswordRecovery.
Le CreateUserWizard :
Il permet de renseigner les informations d’authentification nécessaires pour gérer le compte de l’utilisateur. Là aussi, vous pouvez customiser la validation des champs, en rendre certains obligatoires ou non …
Le PassWordRecovery :
Il permet à l’utilisateur de retrouver son mot de passe.
Note : Attention, ce contrôle nécessite que la passerelle SMTP de votre serveur soit active car le mot de passe est renvoyé par E-Mail à l’utilisateur.
Le ChangePassword :
Comme son nom l’indique, il permet à l’utilisateur logué de changer son mot de passe.
Le LoginName :
Ce contrôle affiche le nom d’utilisateur quand il est logué.
Le LoginStatus :
Ce contrôle est très utile, il a deux états, quand l’utilisateur est logué ou non.
Quand l’utilisateur est logué, un lien s’affiche avec le texte que vous avez choisi comme texte de déconnexion, une propriété permet de définir la page de redirection lorsque vous cliquez sur déloguer.
Quand l’utilisateur n’est pas logué, un lien s’affiche avec le texte que vous avez défini pour l’authentification, une propriété permet de définir la page de redirection lorsque l’authentification est correcte ou erronée.
Le LoginView :
Ce contrôle permet d’afficher l’utilisateur logué avec le ou les rôles qui lui sont associés.
Des template peuvent être définis pour un comportement différent en fonction du ou des rôles.
Les contrôles WebParts
Voici un article sur le site Dotnet-Tech qui traite de se sujet : Les webparts
 |
|
Publié le
19/06/2006
|
|
Auteur:
SYL#
|
|
|