Ajax Control Toolkit

Ajax Control Toolkit
Version 1.0
GERAUD Cdric BEDE Nicolas BASCANS Jrmy HEROGUEL Quentin
James RAVAILLE
http://blogs.dotnet-france.com/jamesr
Sommaire
Introduction ..................................................................................................................................... 4 1.1 1.2 1.3 Prsentation dAJAX ................................................................................................................ 4 Prsentation dAJAX Control Toolkit (ACT).............................................................................. 4 Installation des ACT ................................................................................................................. 5
2 3
Dcouvrez les contrles ACT ........................................................................................................... 9 Extenders ....................................................................................................................................... 12 3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8 3.9 3.10 3.11 3.12 3.13 3.14 3.15 3.16 3.17 3.18 3.19 3.20 3.21 3.22 3.23 3.24 3.25 AlwaysVisibleControl ............................................................................................................. 12 Animation .............................................................................................................................. 13 AutoComplete ....................................................................................................................... 14 Calendar ................................................................................................................................ 16 CascadingDropDown ............................................................................................................. 17 CollapsiblePanel .................................................................................................................... 22 ConfirmButton ....................................................................................................................... 24 DragPanel .............................................................................................................................. 25 DropDown ............................................................................................................................. 26 DropShadow .......................................................................................................................... 27 DynamicPopulate .................................................................................................................. 27 FilteredTextBox ..................................................................................................................... 29 ListSearchExtender ................................................................................................................ 31 MaskedEdit ............................................................................................................................ 32 ModalPopup .......................................................................................................................... 34 MultiHandleSlider.................................................................................................................. 36 MutuallyExclusiveCheckBox .................................................................................................. 37 NumericUpDown ................................................................................................................... 39 PagingBulletedList ................................................................................................................. 40 PasswordStrength ................................................................................................................. 41 PopupControl ........................................................................................................................ 43 ResizableControl .................................................................................................................... 45 RoundedCorners.................................................................................................................... 46 Slider ...................................................................................................................................... 47 SlideShow .............................................................................................................................. 48
Dotnet France Association / Cdric GERAUD, Nicolas BEDE, James RAVAILLE, BASCANS Jrmy, HEROGUEL Quentin
Ajax Control Toolkit 3.26 3.27 3.28 3.29 4 TextBoxWatermark ............................................................................................................... 51 ToggleButton ......................................................................................................................... 52 UpdatePanelAnimation ......................................................................................................... 55 ValidatorCallout ..................................................................................................................... 59
Les contrles autonomes .............................................................................................................. 61 4.1 4.2 4.3 4.4 4.5 Accordion............................................................................................................................... 61 NoBot..................................................................................................................................... 62 Rating..................................................................................................................................... 65 ReorderList ............................................................................................................................ 67 Tabs ....................................................................................................................................... 70
Conclusion ..................................................................................................................................... 74
1 Introduction
1.1 Prsentation dAJAX
AJAX signifie Asynchronous JavaScript and XML. Sur un plan macroscopique, AJAX est une technologie tendant la technologie ASP .NET, dont Microsoft nest pas propritaire. Comme beaucoup dditeurs de logiciels, Microsoft en propose une implmentation, connue sous le nom de Microsoft ASP .NET Ajax, pour dvelopper des applications Web : Plus riches sur le plan graphique. Plus interactives avec les utilisateurs.
Limplmentation propose par Microsoft, se dcompose en deux parties distinctes : Microsoft Ajax Library : constitu dun Framework Ajax ct serveur, ainsi que dun Framework Ajax ct client (ensemble de fichiers JavaScript). Cette partie est incluse dans le Framework .NET 3.5. Microsoft Ajax Toolkit : ensemble de contrles permettant damliorer lergonomie et les performances des applications Web.
AJAX nest pas un langage de programmation. Son principe de base est de permettre dexcuter, depuis du code JavaScript sexcutant dans un navigateur Web, des requtes HTTP de manire asynchrone. Alors que dans une application ASP .NET traditionnelle, les changes entre les clients et le serveur sont effectus de manire synchrone. Microsoft Ajax Library permet dexcuter des actions ct serveur, sans avoir , recharger intgralement la page, grce linteraction entre JavaScript ct client et le serveur au travers de Handlers HTTP. Pour de plus amples informations sur les bases fondamentales de Microsoft, nous vous invitons lire le cours suivant : http://www.dotnetfrance.com/Documents/Web/ASP_NET35/Les%20bases%20fondamentales%20de%20Microsoft%20 ASP.NET%20Ajax.pdf
1.2 Prsentation dAJAX Control Toolkit (ACT)

AJAX Control Toolkit (nomm ci-dessous ACT) est une extension de la plateforme ASP .NET, permettant dapporter cette dernire, de nouvelles fonctionnalits AJAX, au travers de contrles ASP .NET. Il a t conu de manire faire partie intgrante ASP .NET, et par consquent de sintgrer intgralement dans les applications ASP .NET 3.5 existantes. Cest aussi un projet Open Source, qui a t conu et dvelopp par des experts .NET Ajax indpendants, des personnes travaillant chez Microsoft, Pour pouvoir utiliser les contrles de lAJAX Control Toolkit dans une page ASP .NET, il est ncessaire de possder lors de lexcution de la page du contrle ScriptManager. En effet cest un contrle essentiel qui assure le bon fonctionnement des fonctionnalits AJAX dans votre application ASP .NET. Les contrles ACT se distinguent en deux catgories :
Ajax Control Toolkit Les extenders : contrles permettant dtendre les fonctionnalits dautres contrles ASP .NET prsents dans la page ASP .NET. Les contrles ASP .NET Ajax part entire : contrles autonomes (ex : le tableau donglets) permettant de proposer des fonctionnalits Ajax, sans tendre les contrles existants dans la page ASP .NET.
1.3 Installation des ACT

Cette partie va vous permettre de pouvoir implmenter puis utiliser les contrles Ajax Toolkit dans votre projet ASP.NET. Il va tout dabord falloir les tlcharger; pour cela vous devrez vous rendre sur le site www.codeplex.com. Ensuite vous devriez voir dans les plus tlchargs une partie AJAX Control Toolkit , sinon dans la barre de recherche tapez Ajax toolkit . Vous aurez alors la partie approprie en haut de la liste de recherche. Cliquez dessus. Vous arrivez donc sur la partie Ajax Control Toolkit o vous pouvez apercevoir droite une partie downloads sur laquelle vous cliquerez :
Une fois la page charge, rcuprez le fichier AjaxControlToolkit-Framework3.5SP1.zip :
Ensuite, il suffit den extraire le contenu. Une fois tout cela fait, vous pouvez ouvrir Visual Studio et crer un projet ASP.NET. Ouvrez ensuite la boite outils, faites click droit dedans et ajouter un onglet que vous pouvez appeler par exemple AjaxControlToolkit . Vous obtiendrez donc ceci :
Faites ensuite click droit sur votre onglet et Choisir les lments :
Une fentre va souvrir. Vous pourrez partir de la rcuprer une dll qui se trouve dans le dossier appel SampleWebSite , dans lequel se trouve un rpertoire appel Bin qui contient une dll appele AjaxControlToolkit.dll . Cest cela qui va permettre dajouter les contrles votre projet :
Une fois la dll ajoute, tous les contrles seront automatiquement ajouts dans votre bote outils :
Les contrles AJAX Toolkit sont dsormais disponibles et utilisable dans votre projet ASP.NET.
Ajax Control Toolkit Remarque : Vous pouvez aussi tlcharger le fichier AjaxControlToolkit-Framework3.5SP1DllOnly.zip . Ensuite d zipper le, dedans se trouve un rpertoire appel Bin qui contient une dll appele AjaxControlToolkit.dll . Il suffit de prendre cette dll et de la glisser en drag and drop dans votre onglet AjaxControlToolkit . Les contrles vont sajouter automatiquement.
2 Dcouvrez les contrles ACT

Dans un premier temps vous devez tlcharger le pack SP1 de LACT (Ajax Control Toolkit) via le lien suivant AjaxControlToolkit-Framework3.5SP1.zip Une fois le fichier tlcharger, dcompressez-le et ouvrez-le. Double-cliquez sur la solution AjaxControlToolkit.sln. Un avertissement de scurit peut safficher au cours de louverture de la solution, vous devez donc slectionnez loption approprie (qui dcrit le fait que vous faites confiance au projet que vous allez ouvrir). Vous obtiendrez ainsi sur une page vierge dans Visual Studio 2008 avec lexplorateur de solution ouvert contenant les 4 diffrents projets possible : AjaxControlToolkit, SampleWebSite, ToolkitTests et TemplateVSI.
AjaxControlToolkit est un projet qui contient tout simplement le code-source des contrles Ajax. Ainsi lorsque vous compilerez vous obtiendrez la dll contant tous les contrles disponibles. SampleWebSite est un projet-site vous permettant davoir une dmonstration des ACTs disponibles (ce que nous allons dcrire ci-dessous dans le but de vous appropriez chaque contrle que vous manipulerez pralablement). ToolkitTests est un projet permettant de tester les contrles ACT dans le cas o lon modifierait leur code-source. TemplateVSI est une extension de Visual Studio permettant dans un nouveau projet de crer vos propres extenders.
Remarque : Les extenders sont des contrles qui tendent dautres fonctionnalits de contrles.
Nous allons donc nous intresser au projet SampleWebSite, qui vous permettra daccder une dmonstration de chaque contrle ACT. Pour accder au site vous devrez dvelopper le projet SampleWebSite comme dans le screen-shot suivant :
10
Ensuite, slectionnez le ficher Default.aspx laide du clique-droit et choisissez loption Afficher dans le navigateur. Ainsi votre navigateur web souvre et vous accder ainsi la page suivante :
11
Ajax Control Toolkit Dans la partie gauche de votre page, nomme Sample, vous obtenez tous les contrles de lAjaxControlToolkit. Il vous suffit donc de slectionner un contrle et vous accderez la dmonstration de celui-ci comme dans lexemple ci-dessous (NumericUpDown)
12
3 Extenders
Un extender est un contrle qui va tendre les fonctionnalits dun autre contrle. Par exemple il existe un contrle, qui permet dajouter la possibilit dafficher un calendrier grce un bouton accol un contrle TextBox. Un autre permet de crer une zone de saisie, avec des boutons permettant daugmenter ou diminuer la valeur numrique quelle contient (un nombre contenu dans la TextBox). Par consquent il nest pas possible de les utiliser seul dans notre page : ils ont besoin dtre li un autre contrle (quils tendent). Dans cette partie du cours, nous allons les prsenter et les dtailler. Vous pouvez aussi tout tester par vous-mme via le site ASP.NET AJAX donn dans la partie prcdente.
3.1 AlwaysVisibleControl
Dfinition : Ce contrle permet un de vos contrles de rester par-dessus le reste de la page ( un endroit que lon aura dfini) et de suivre le dfilement de celle-ci. Proprits : Nom TargetControlId HorizontalOffset Description Obligatoire Prend comme valeur lID du contrle cibl. OUI Permet de dfinir une distance qui servira pour positionner le contrle cibl par rapport au bord haut de la page du NON navigateur (en px). Dfini le positionnement horizontal du contrle (Left, Top, NON Middle). Permet de dfinir une distance qui servira pour positionner le contrle cibl par rapport au bord gauche de la page du NON navigateur (en px). Dfini le positionnement vertical du contrle (Left, Top, NON Middle).
HorizontalSide VerticalOffset
VerticalSide
Si vous ne remplissez pas les proprits de placement du contrle, le contrle cibl sera plac en haut gauche de la page. Exemple dutilisation : Le contrle AlwaysVisibleControlExtender peut sappliquer nimporte quel contrle de type bloc du moment quil possde la proprit runat="server".
13
ASP.NET <body style="background-color: Silver;"> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <p runat="server" id="essai" style="background-color: Yellow; Width: 200px; height: 65px; text-align: center;"> test </p> <cc1:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server" TargetControlID="essai" HorizontalSide="Center" VerticalSide="Top" /> <%--On associe ce contrle avec la balise p et on dfini la position en haut au milieu--%> <p style="height: 1500px;"> Scrollez la page. Le bloc de texte reste en haut au milieu. </p> </div> </form> </body>
3.2 Animation
Dfinition : Il sagit un contrle qui permet la cration danimation sur votre page Web avec facilit. Ce contrle possde un Template assez consquent, par consquence nous ne dcrirons pas entirement ici par soucis de clart et de lisibilit. Lexemple vous donne cependant un aperu de ce quil est possible de faire avec ce contrle. Proprits du contrle : Nom TargetControlID Description Obligatoire Prend comme valeur lID du contrle cibl (sur lequel OUI sappliqueront les effets du contrle AJAX).
Exemple dutilisation : Voici une animation qui va dplacer le bloc tout en le redimensionnant.
Page .aspx <asp:Button ID="StartAnimation" runat="server" Text="Button" /> <div ID="AnimateDiv" runat="server" style="border: solid black 2px; background-color: #d3dfee;width: 200px;height: 65px;position: absolute;" />
14

<cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="StartAnimation"> <Animations> <%--Quand la souris survole l'lment. Il y a aussi OnMouseOut, OnMouseOver, OnLoad, OnHoverOut et OnHoverOver--%> <OnClick> <%--On crer une squence d'animation pour le div AnimateDiv--%> <Sequence AnimationTarget="AnimateDiv"> <%--Ce qui suit s'xecutera en mme temps--%> <Parallel Duration="2" Fps="30"> <%--Dplacer le bloc suivant les valeurs donnes--%> <Move Horizontal="500" Vertical="300" /> <%--Redimensionner le bloc--%> <Resize Width="400" Height="20" /> </Parallel> </Sequence> </OnClick> </Animations> </cc1:AnimationExtender>
3.3 AutoComplete
Dfinition : AutoComplete est un extender de TextBox qui fournira une auto-compltion de ce que qui est crit dans la TextBox. Il fonctionne grce un service web qui doit avoir pour signature :
C# public string[] RecupererListe(string Text, int count) { ... }
Remarquez que lon ne peut modifier que le nom de la mthode (RecupererListe) et son contenu. Proprits : Nom TargetControlID ServiceMethod ServicePath Description Obligatoire Prend comme valeur lID de la TextBox cible. OUI Correspond au nom de la mthode du WebService OUI appeler. Correspond au chemin daccs vers le fichier contenant le web service. Sil nest pas rempli, le web service doit NON correspondre une mthode de la page. Dfini le nombre minimum de caractres qui doivent tre entr dans la TextBox pour que le contrle sactive et appel NON le service web. Dfini le temps en millisecondes aprs la fin de lcriture NON pour que le contrle fasse sa requte au Web service. Active ou non le cache. NON Indique si la premire ligne de propositions retournes par NON le service web doit tre slectionne.
MinimumPrefixLength
CompletionInterval EnableCaching FirstRowSelected
15
Ajax Control Toolkit Exemple dutilisation : Voici un petit exemple qui, tel quel, ne vous sera pas dune grande utilit puisquil ne renvoi que le texte suivit dun chiffre. En revanche si vous changez le code du web service pour quil recherche dans une base de donnes, un fichier XML ou autres, cet exemple prend tout son sens. Cest par soucis de comprhension que nous avons simplifi le web service et il vous sera plus facile de tester lexemple sans base de donnes grer derrire. Cet exemple est compos dun web service (un fichier avec lextension asmx dont nous vous fournissons le code behind) et du code de la page en .aspx. Le dlai entre la fin de lcriture dans la TextBox et le dbut de la recherche est dune seconde.
C# du web service [System.Web.Script.Services.ScriptService] public class WebService1 : System.Web.Services.WebService { public WebService1() { } [WebMethod] public string[] RecupererListe(string prefixText, int count) { string[] tableau ={"", "", "", "", "", ""}; for(int i = 0; i < 5; i++) { tableau[i] = prefixText + i; } return tableau; } } VB.NET du web service
<System.Web.Script.Services.ScriptService()> _ Public Class WebService1 Inherits System.Web.Services.WebService Public Sub New() End Sub <WebMethod()> _ Public Function RecupererListe(ByVal prefixText As String, ByVal count As Integer) As String() Dim tableau As String() = {"", "", "", "", "", ""} Dim i As Integer = 0 While i < 5 tableau(i) = prefixText + i System.Math.Max(System.Threading.Interlocked.Increment(i), i 1) End While Return tableau Dotnet France Association / Cdric GERAUD, Nicolas BEDE, James RAVAILLE, BASCANS Jrmy, HEROGUEL Quentin
16

End Function End Class
ASP.NET
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="TextBox1" ServiceMethod="RecupererListe" ServicePath="WebService1.asmx" CompletionInterval="1000" MinimumPrefixLength="2" />
3.4 Calendar
Dfinition : Le contrle Calendar nest pas quun simple calendrier. En effet il sagit dun extender qui sapplique communment une TextBox. Ce contrle va afficher un calendrier partir duquel on pourra rcuprer le jour choisit par lutilisateur. Proprits : Nom TargetControlID Format PopupButtonID PopupPosition SelectedDate CssClass Description Obligatoire Prend comme valeur lID de la TextBox cible. OUI Dfini le format de la date (exemple : MMMM d, yyyy). NON Prend comme valeur lID du bouton qui servira afficher le NON calendrier. Dtermine la position du popup par rapport la TextBox. NON Dtermine la date qui sera slectionn par dfaut ( louverture NON de la popup contenant le calendrier). Dfini une classe css qui va permettre dappliquer un thme au NON calendrier.
17
Ajax Control Toolkit Exemple dutilisation :

ASP.NET
<div> <asp:TextBox ID="calendarTextbox" runat="server" /> <asp:Button ID="calendarButton" runat="server" Text="Calendrie CausesValidation="false" /> </div> <cc1:CalendarExtender runat="server" TargetControlID="calendarTextBox" Format="d MMMM yyyy" PopupButtonID="calendarButton" PopupPosition="BottomLeft" />
Vous pouvez voir sur cette image ce qui se passe lorsque lon a appuy sur le bouton. Remarquez que comme on a spcifi le PopupButtonID, il faut se servir du bouton pour ouvrir le calendrier. La TextBox ne servant plus qu afficher et recevoir la date choisit. Le format de la date dans la TextBox correspond bien ce que lon a demand dans la proprit Format, c'est-dire jour mois anne .
3.5 CascadingDropDown
Dfinition : Il permet de remplir (binder) un DropDownList suivant le choix de lutilisateur sur une autre DropDownList. Par exemple vous avez deux DropDownList : la premire correspond une fourchette de prix et le second un produit correspondant a cette fourchette. Quand lutilisateur change de fourchette, les produits disponibles sont mis jour. Il fonctionne grce un service web qui doit avoir pour signature :
C#
public CascadingDropDownNameValue[] RecupererContenu( string CategoryValues, string category) { ... }
Proprits : Nom TargetControlID Category PromptText PromptValue EmptyText EmptyValue Description Obligatoire Prend comme valeur lID de la DropDownList remplir. OUI Permet de dfinir le nom de la catgorie utilise (correspond, OUI sur le XML, un nom de tag). Message qui sera affich tant que lutilisateur naura pas fait un NON choix dans la DropDownList parente. Valeur allant avec PromptText. NON Texte afficher quand la DropDownList na aucun contenu OUI afficher. Valeur correspondant laffichage dEmptyText. NON
18
LoadingText ServiceMethod ServicePath
ParentControlID SelectedValue
Message qui sera affich pendant le chargement de la DropDownList. Correspond au nom du WebService appeler. Correspond au chemin daccs vers le fichier contenant le web service. Sil nest pas rempli, le web service doit correspondre une mthode de la page. Prend comme valeur lID de la DropDownList parente. Dfini la valeur slectionn par dfaut.
OUI OUI NON OUI NON
Exemple dutilisation : Dans cet exemple nous donnerons la possibilit de choisir instrument de musique dans plusieurs DropDownList en fonction de son type, de son modle et de sa couleur. Voici le fichier XML qui nous permettra de rcuprer toutes les slections possibles dans nos DropDownList :
XML <?xml version="1.0" encoding="utf-8" ?> <InstrumentService> <type name="Cuivre"> <model name="Flute Traversire"> <color name="Bleu"/> <color name="Blanc"/> <color name="Noir"/> </model> <model name="Trompette"> <color name="Dor"/> <color name="Argent"/> <color name="Cuivre"/> </model> <model name="Saxophone"> <color name="Dor"/> <color name="Argent"/> <color name="Cuivre"/> </model> </type> <type name="Corde"> <model name="Guitare"> <color name="Bois"/> <color name="Noir"/> <color name="Fantaisie"/> </model> <model name="Piano"> <color name="Blanc"/> <color name="Noir"/> <color name="Bleu"/> </model> <model name="Violon"> <color name="Bois"/> <color name="Noir"/> <color name="Fantaisie"/> </model> </type> </InstrumentService>
19
Ajax Control Toolkit Voici le code source du WebService avec lequel interagit le contrle AjaxToolkit :
C# du webservice [System.Web.Script.Services.ScriptService] public class InstrumentService : System.Web.Services.WebService { private static XmlDocument _document; private static object _lock = new object(); public static XmlDocument Document { get { lock (_lock) // Permet d'viter des accs simultans { if (_document == null) { // Rcupre le fichier XML _document = new XmlDocument(); _document.Load(HttpContext.Current.Server.MapPath("~/InstrumentS ervice.xml")); } } return _document; } } public static string[] Hierarchy { get { // Permet de dfinir les catgory utilis pour le traitement return new string[] { "type", "model" }; } } public InstrumentService() // Contructeur par dfaut { } [WebMethod] public AjaxControlToolkit.CascadingDropDownNameValue[] GetDropDownContents(string knownCategoryValues, string category) { // On cre un dictionnaire de valeur qui rcupre aussi bien le nom des catgories que les valeurs associes StringDictionary knownCategoryValuesDictionary = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownC ategoryValues); // Requte effectuer pour retourner les valeurs attendus par le controle Ajaxtoolkit. return AjaxControlToolkit.CascadingDropDown.QuerySimpleCascadingDropDownDocument( Document, Hierarchy, knownCategoryValuesDictionary, category); } }
20

VB.NET du webservice Public Class InstrumentService Inherits System.Web.Services.WebService Shared _Document As XmlDocument Shared _lock As New Object Public ReadOnly Property Document() As XmlDocument Get If (_Document Is Nothing) Then SyncLock _lock ' Permet d'viter des accs simultans _Document = New XmlDocument 'Rcupre le fichier XML _Document.Load(HttpContext.Current.Server.MapPath("~/InstrumentS ervice.xml")) End SyncLock End If Document = _Document Exit Property End Get End Property Public ReadOnly Property Hierarchy() As String() Get ' Permet de dfinir les catgory utilis pour le traitement Dim _Heirarchy As String() = {"type", "model"} Return _Heirarchy End Get End Property <WebMethod()> _ Public Function GetDropDownContents(ByVal knownCategoryValues As String, ByVal category As String) As AjaxControlToolkit.CascadingDropDownNameValue() ' On cre un dictionnaire de valeur qui rcupre aussi bien le nom des catgories que les valeurs associes Dim knownCategoryValuesDictionary As New StringDictionary knownCategoryValuesDictionary = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(know nCategoryValues) ' Requte effectuer pour retourner les valeurs attendus par le controle Ajaxtoolkit. Return AjaxControlToolkit.CascadingDropDown.QuerySimpleCascadingDropDownDocumen t(Document, Hierarchy, knownCategoryValuesDictionary, category) End Function End Class
21
Ajax Control Toolkit Voici le code source ASP.NET de la page par dfaut :
ASP.NET <%-- Ne pas oublier dans la directive Page de mettre la proprit EnableEventValidation false--%> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <table> <tr> <td> Type de l'instrument </td> <td> <asp:DropDownList ID="DropDownList1" runat="server" Width="170" /> </td> </tr> <tr> <td> Modle de l'instrument </td> <td> <asp:DropDownList ID="DropDownList2" runat="server" Width="170" /> </td> </tr> <tr> <td> Couleur </td> <td> <asp:DropDownList ID="DropDownList3" runat="server" Width="170" AutoPostBack="true" OnSelectedIndexChanged="DropDownList3_SelectedIndexChanged" /> </td> </tr> </table> <br /> <ajaxtoolkit:CascadingDropDown ID="CascadingDropDown1" runat="server" TargetControlID="DropDownList1" Category="type" PromptText="Choisissez un type" LoadingText="[Rcupration des types...]" ServicePath="InstrumentService.asmx" ServiceMethod="GetDropDownContents" /> <ajaxtoolkit:CascadingDropDown ID="CascadingDropDown2" runat="server" TargetControlID="DropDownList2" Category="model" PromptText="Choisissez un modle" LoadingText="[Rcupration des modles...]" ServicePath="InstrumentService.asmx" ServiceMethod="GetDropDownContents" ParentControlID="DropDownList1" /> <ajaxtoolkit:CascadingDropDown ID="CascadingDropDown3" runat="server" TargetControlID="DropDownList3" Category="color" PromptText="Choisissez une couleur" LoadingText="[Rcupration des couleurs...]" ServicePath="InstrumentService.asmx" ServiceMethod="GetDropDownContents" ParentControlID="DropDownList2" /> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" RenderMode="inline"> <ContentTemplate> <asp:Label ID="Label1" runat="server" Text="[Aucune rponse donne ...]" />
22

</ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="DropDownList3" EventName="SelectedIndexChanged" /> </Triggers> </asp:UpdatePanel> </form>
Voici le code behind de cette page par dfaut :

C# de default.aspx.cs
protected void DropDownList3_SelectedIndexChanged(object sender, EventArgs e) { Label1.Text = "Vous avez choisie un(e) " + DropDownList2.Text.ToLower() + " " + DropDownList3.Text.ToLower() + " qui est un instrument " + DropDownList1.Text.ToLower() + "."; }
VB.NET de default.aspx.cs Protected Sub DropDownList3_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Label1.Text = "Vous avez choisie un(e) " + DropDownList2.Text.ToLower() + " " + DropDownList3.Text.ToLower() + " qui est un instrument " + DropDownList1.Text.ToLower() + "." End Sub
Voici un aperu de cet exemple :
3.6 CollapsiblePanel
Dfinition : Cest un extender pour les Panel qui permet dafficher/cacher son contenu. Il ny a pas grandchose dire dessus, les proprits et lexemple vous feront mieux comprendre ce contrle.
Proprits du contrle : Nom TargetControlID CollapsedSize ExpandedSize Collapsed Description Obligatoire Prend comme valeur lID du Panel. OUI Taille du Panel quand il est en mode ferm . NON Taille du Panel quand il est en mode tendu . NON Elle permet de dfinir si lors de laffichage de la page, le NON
23
AutoCollapse AutoExpand ScrollContents CollapseControlID ExpandControlID TextLabelID
CollapsedText ExpandedText ImageControlID CollapsedImage ExpandedImage ExpandDirection
contrle doit tre ferm ou tendu. Si elle est mise True, le Panel passera en mode ferm quand la souris nest plus sur le Panel. Si elle est mise True, le Panel passera en mode tendu quand la souris se trouvera sur le Panel. Permet dajouter une Scrollbar si le contenu dpasse du Panel (si True). Indique quel contrle va dclencher le passage en mode coll. Indique quel contrle va dclencher le passage en mode ferm. Prend comme valeur lID du Label qui va servir pour afficher un texte personnalis suivant que le Panel soit ferm ou ouvert (respectivement Collapsed et Expanded). Texte qui sera affich dans le Label quand le panel est ferm. Texte qui sera affich dans le Label quand le Panel est ouvert. Prend lID du contrle Image qui va servir afficher une image personnalis suivant que le Panel soit ferm ou ouvert. Image affich quand le Panel est ferm. Image affich quand le Panel est ouvert. Indique le sens douverture du Panel (Verticale ou Horizontale).
NON NON NON OUI OUI NON NON NON NON NON NON NON
Exemple dutilisation :
ASP.NET <p id="Head" style="border: outset 2px black"> Cliquez ici pour tendre ou fermer <asp:Label ID="ShowText" runat="server" Text="" /> </p> <div> <asp:Panel ID="TargetPanel" runat="server"> LAJAX Control Toolkit est une extension de la plateforme ASP .NET qui permet dapporter cette dernire les fonctionnalits AJAX aux applications ASP .NET. AJAX Control Toolkit a t conu de manire faire partie intgrante de lASP .NET et par consquent de sintgrer correctement avec les plateformes et modle dapplication existant. </asp:Panel> </div> <cc1:CollapsiblePanelExtender runat="server" CollapseControlID="Head" TargetControlID="TargetPanel" ExpandControlID="Head" TextLabelID="ShowText" CollapsedText="(Ouvrir ...)" ExpandedText="(Fermer ...)" />
Cet exemple est assez simple puisquil nutilise pas de css pour son style et quil ne montre pas toutes les proprits du contrle.
24
3.7 ConfirmButton
Dfinition : Il sagit dun extender de bouton qui permet douvrir une fentre de confirmation lors dun clic sur le bouton en question (Button ou LinkButton). Si le bouton ok est choisit, le bouton agit normalement. Si lutilisateur annule, le bouton nexcute pas son action (il est possible dexcuter un script lors de lannulation). Proprits du contrle : Nom TargetControlID ConfirmText Description Obligatoire Prend comme valeur lID du contrle tendre. OUI Texte affich lors de la demande de confirmation (il nest pas ncessaire pour le fonctionnement du contrle mais sans lui OUI il ny aura aucun texte affich). OnClientCancel Permet dexcuter un script client (javascript) lors de NON lannulation de la confirmation. ConfirmOnFormSubmit Spcifie que la demande de confirmation doit attendre que le formulaire soit valide (contrle de validation ASP.NET ou NON autre script).
ASP.NET <div> <asp:Label runat="server" Text="Label" /> <asp:TextBox runat="server" /> <asp:Button ID="ConfirmButton" runat="server" Text="Button" /> </div> <cc1:ConfirmButtonExtender runat="server" TargetControlID="ConfirmButton" ConfirmText="Etes vous sur de vouloir valider le formulaire ?" />
25
Ajax Control Toolkit On a donc bien li notre ConfirmButton avec le bouton. Voici le rsultat lorsque lon clic sur le bouton :
3.8 DragPanel
Dfinition : Le DragPanel est un extender de Panel qui permet dajouter trs facilement la possibilit de dplacer le Panel cibl sur la page. Proprits du contrle : Nom TargetControlID DragHandleID Description Obligatoire Prend comme valeur lID du Panel rendre dplaable. OUI Prend comme valeur lID de llment dans le Panel qui va OUI permettre son dplacement.
ASP.NET <asp:Panel ID="DragPanel" runat="server" style="position: absolute;border: solid 2px black;width: 250px;height : 200px"> <div id="DragElement" style="display: block;border-bottom: solid 1px black"> Cliquez ici pour dplacer le Panel</div> <div style="text-align: center">Contenu du Panel.</div> </asp:Panel> <cc1:DragPanelExtender runat="server" TargetControlID="DragPanel" DragHandleID="DragElement" />
Voici ce que lon obtient avec ce code :
26
3.9 DropDown
Dfinition : Il permet de transformer un Label en DropDownList partir dun Panel. Trs simple utiliser, avec seulement deux proprits vous pouvez ajouter un Label la possibilit dafficher le contenu dun Panel. Proprits du contrle : Nom TargetControlID DropDownControlID Description Obligatoire Prend comme valeur lID du Label cibl. OUI Prend comme valeur lID du Panel qui sera utilis en tant que OUI DropDownPanel.
Il y a dautres mthodes qui peuvent vous tre utile comme celle permettant de changer limage de la flche mais nous nen parlons pas ici par soucis de lisibilit. Exemple dutilisation : Dans lexemple que lon va faire, on va permettre le choix dune version du Framework. Quand lutilisateur clic sur un des LinkButton du Panel on va effectuer une action. Dans notre cas on va juste changer le texte du Label pour afficher quel version a t slectionn. On aurait aussi pu afficher les caractristiques, le Changelog de la version choisit ou tout autres choses partir du choix qui a t effectu.
ASP.NET <asp:Label ID="Selection" runat="server" Text="Faites un choix pour la version du Framework" /> <asp:Panel ID="PanelChoix" runat="server"> <asp:LinkButton ID="Possibilite1" runat="server" OnClick="ChangerLabel">2.0</asp:LinkButton><br /> <asp:LinkButton ID="Possibilite2" runat="server" OnClick="ChangerLabel">3.0</asp:LinkButton><br /> <asp:LinkButton ID="Possibilite3" runat="server" OnClick="ChangerLabel">3.5</asp:LinkButton> </asp:Panel> <cc1:DropDownExtender runat="server" TargetControlID="Selection" DropDownControlID="PanelChoix" />
27
3.10 DropShadow
Dfinition : Ce contrle est un extender qui permet dajouter une ombre et/ou des bouts arrondis un Panel. Proprits du contrle : Nom TargetControlID Width Opacity Description Obligatoire Prend comme valeur lID du Panel quil cible. OUI Dfinit la taille de la DropShadow (par dfaut elle est dfinie NON 5). Dfinit lopacit de la DropShadow. Elle prend des valeurs entre 0 (compltement transparent) et 1 (opaque). La valeur NON par dfaut est 0.5. Dfinit si le contrle DropShadow. NON Dfinit si le contrle cibl aura des bouts arrondis ou non. NON Dfinit la taille de larrondi. NON
TrackPosition Rounded Radius
ASP.NET <asp:Panel ID="Panel1" runat="server" style="background: #A8C1DF; width: 250px;height:175px;" /> <cc1:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="Panel1" Rounded="true" Radius="10" />
Comme vous pouvez le constater sur limage ci-contre, le Panel affich est vide mais quand mme visible puisque lon a dfini une hauteur et une largeur. Il y a bien lombre sur le Panel et les bouts du Panel sont arrondis.
3.11 DynamicPopulate
Dfinition : DynamicPopulate est un extender qui permet de remplacer le contenu dun contrle par le rsultat dun web service ou dune mthode de la page. Le rsultat sera insr dans le contrle cible en tant quenfant. Il est donc possible de renvoyer directement du HTML et de linsrer dans un contrle.
Signature du web service string DynamicPopulateService(string contextKey) { ... }
28
Ajax Control Toolkit Proprits du contrle : Nom TargetControlID Description Obligatoire Prend comme valeur lID du contrle remplir OUI dynamiquement (un Panel). ClearContentsDuringUpdate Permet de supprimer le contenu HTML de la cible NON durant la mise jour de celui-ci. ServiceMethod Correspond au nom de la mthode appeler (qui se trouve sur le WebService spcifi avec ServicePath sil OUI nest pas dans la page ASPX). ServicePath Correspond au chemin daccs vers le fichier contenant le web service. Sil nest pas rempli, le web service doit NON correspondre une mthode de la page. PopulateTriggerControlID Correspond lID du contrle qui, lorsquil est cliqu NON servira mettre jour le contrle cibl. CacheDynamicResult Permet de mettre en cache les rsultats. NON
Exemple dutilisation : Pour cet exemple on a un contrle qui va permettre deux choix : afficher le texte test ou afficher lheure. Sur lvnement Onclick de ces items, on va excuter une fonction JavaScript qui va rcuprer le contrle DynamicPopulate par son ID et ensuite appeler la mthode populate en lui passant une valeur. Le WebService va tre appel et retourner ce quil faut suivant loption choisi. Le rsultat est envoy au navigateur qui laffiche dans le Panel. Remarquez que seul le Panel est recharg et non toute la page.
Code de la page ASP.NET <script type="text/javascript"> function dynamicPopulateJS(val) { var ControlDynamicPopulate = $find("DynPop"); if(ControlDynamicPopulate) ControlDynamicPopulate.populate(val); } </script> <select> <option onclick="dynamicPopulateJS(this.value);" value="0">Renvoi le string "test"</option> <option onclick="dynamicPopulateJS(this.value);" value="1">Renvoi l'heure actuelle</option> </select> <asp:Panel ID="Panel1" runat="server" /> <cc1:DynamicPopulateExtender ID="DynPop" runat="server" TargetControlID="Panel1" ServiceMethod="DynamicPopulateService" ServicePath="MonService.asmx" />
29

Code C# du WebService [System.Web.Script.Services.ScriptService] public class MonService : System.Web.Services.WebService { public MonService() { } [WebMethod] public string DynamicPopulateService(string contextKey) { string valeur = ""; //On regarde quel valeur a t choisit pour renvoyer le bon texte if (contextKey == "0") valeur = "test"; else if (contextKey == "1") valeur = DateTime.Now.ToString(); //On concatne le texte qui doit tre renvoy avec du HTML return String.Format("<div>Rsultat : {0}</div>", valeur); } }
Code VB.NET du WebService <System.Web.Script.Services.ScriptService()> _ Public Class MonService Inherits System.Web.Services.WebService Public Sub New() End Sub <WebMethod()> _ Public Function DynamicPopulateService(ByVal contextKey As String) As String Dim valeur As String = "" 'On regarde quel valeur a t choisit pour renvoyer le bon texte If contextKey = "0" Then valeur = "test" ElseIf contextKey = "1" Then valeur = DateTime.Now.ToString() End If 'On concatne le texte qui doit tre renvoy avec du HTML Return [String].Format("<div>Rsultat : {0}</div>", valeur) End Function End Class
3.12 FilteredTextBox
Dfinition : Ce contrle permet de filtrer les caractres que lutilisateur entre dans une zone de texte. Par exemple on pourra empcher quil entre des nombres : sil essaye, aucun nombre ne sera crit dans la zone de texte.
30

Attention : Comme toutes les autres vrifications et filtres qui agissent sur le navigateur du client, ce systme peut tre contourn (en dsactivant le JavaScript par exemple). Il faut donc toujours vrifier les donnes envoy par lutilisateur sur le serveur pour sassurer quelles correspondent ce que nous attendons.
Proprits : Nom TargetControlID FilterType Description Obligatoire Prend lID du contrle TextBox cible. OUI Correspond aux types que lon acceptera dans la TextBox. On peut en mettre plusieurs spar par une virgule (peut prendre OUI comme valeur : Number, LowercaseLetters, UppercaseLetters et Custom). Par dfaut il est sur Custom. Spcifie le mode de filtrage si FilterType est sur Custom. Il prend NON comme valeur ValidChars et InvalidChars. Spcifie les caractres valides qui peuvent donc tre mis dans la NON TextBox. Ne fonctionne que si FilterType est mis Custom. Spcifie les caractres valides qui ne peuvent pas tre mis dans la NON TextBox. Ne fonctionne que si FilterType est mis Custom. Spcifie un intervalle de temps (en milliseconde) qui correspond NON lattente quil y a avant de filtrer la TextBox.
FilterMode ValidChars InvalidChars FilterInterval
ASP.NET <div> <asp:Label runat="server" Text="Label" /> <asp:TextBox id="TextBoxCible" runat="server" /> </div> <cc1:FilteredTextBoxExtender runat="server" TargetControlID="TextBoxCible" FilterType="Numbers,UppercaseLetters" ValidChars="&" />
Vous pouvez voir sur limage ci-contre le type de caractres accept par la TextBox. Remarquez que comme on na pas mis FilterType sur Custom, les caractres du ValidChars ne sont pas pris en compte. Pour faire fonctionner InvalidChars il aurait fallu mettre FilterType sur Custom et FilterMode sur InvalidChars. Ainsi les caractres de la proprit InvalidChars sont pris en compte.
31
3.13 ListSearchExtender
Dfinition : Ce contrle permet dtendre les fonctionnalits des ListBox et des DropDownList en rajoutant la possibilit deffectuer une recherche dans ceux-ci en tapant au clavier ce que nous cherchons. Cest un contrle trs utile quand il y a beaucoup de donnes. Proprits du contrle : Nom PromptText Description Obligatoire Message afficher quand le contrle a le focus. Le message sera ensuite remplac par la recherche de lutilisateur (par NON dfaut le message est "Type to search"). Prend comme valeur lID du contrle tendre. OUI Dfinit le nom de la classe CSS qui sera appliqu au message NON du prompt. Dfinit la position du prompt par rapport eu contrle. Il peut se trouver au dessus, en dessous, gauche ou droite. Par NON dfaut il se trouve au dessus. Indique la faon dont la recherche doit tre effectue. Par dfaut il recherche ce que lon a entr au dbut des mots NON (StartsWith). On peut aussi lui dire de recherche les entres qui contiennent la recherche (Contains). Dfini partir de combien de temps (en millisecondes) le navigateur va attendre avant de redmarrer une recherche NON (reset) si aucune correspondance nest trouv. Par dfaut zro, il ne reset pas la recherche.
TargetControlID PromptCssClass PromptPosition
QueryPattern
QueryTimeout
Exemple dutilisation : Dans cette exemple on propose de choisir une couleur parmis celles contenues dans la DropDownList. Pour lutilisation de ce contrle, il faut faire attention ce qui se trouve au dessus de la DropDownList. Ici nous avons mis deux br pour que le prompt ne soit pas sur le texte qui se trouve avant.
ASP.NET Choisissez une couleur : <br /><br /> <asp:DropDownList ID="DropDownList1" runat="server" style="width: 200px"> <asp:ListItem>Bleu</asp:ListItem> <asp:ListItem>Vert</asp:ListItem> <asp:ListItem>Jaune</asp:ListItem> <asp:ListItem>Rouge</asp:ListItem> <asp:ListItem>Violet</asp:ListItem> <asp:ListItem>Rose</asp:ListItem> <asp:ListItem>Orange</asp:ListItem> </asp:DropDownList> <cc1:ListSearchExtender runat="server" TargetControlID="DropDownList1" PromptText="Tappez votre recherche :" QueryPattern="Contains" QueryTimeout="3000" />
32
3.14 MaskedEdit
Dfinition : Ce contrle est un extender de TextBox qui permet dempcher la saisie de caractre non voulu. Il vrifie que ce que rentre lutilisateur correspond bien ce que nous avons spcifi dans le code (une lettre suivit de deux chiffres par exemple). On peut aussi effectuer un formatage de la TextBox. On aura ainsi le format de ce que lon attend de lutilisateur dj prsent. Par exemple on peut demander une date lutilisateur. Dans ce cas on peut afficher - - / - - / - - dans la TextBox au moment de la saisie de lutilisateur. En outre il na pas besoin des contrles de validation puisquil vrifie dj lui-mme que les caractres entr sont correct et quil possde dj un contrle de validation spcifique : MaskedEditValidator. Proprits du contrle MaskedEditExtender : Nom MaskType Description Obligatoire Dfinit le type de validation qui sera effectue. None : pas de validation Number : Validation dun nombre NON Date : Validation dune date Time : Validation dun horaire DateTime : Validation dune date et dun horaire Permet daccepter les nombres ngatifs : Left : Afficher le signe gauche de la TextBox NON Right : Afficher le signe - droite de la TextBox Dfinit si on vide la TextBox quand cette dernire perd le NON focus. Dfinit si on vide la TextBox quand ce qui a t saisie nest NON pas valide. Permet daccepter ou de refuser la saisie de donnes depuis NON le presse papier. Spcifie la manire dont le symbole montaire est affich. NON Sutilise comme AcceptNegative. Permet dafficher un message lors du survol de la TextBox si NON elle est invalide. Permet de spcifier les caractres autoriss dans la TextBox NON avec un masque de type C (voir Mask). Dfinit la direction dans laquelle sera ajout ce que lon crit dans la TextBox. De gauche droite (LeftToRight) ou de NON droite gauche (RightToLeft). Prend comme valeur lID de la TextBox tendre. OUI Prend comme valeur une chane de caractre qui sera le masque appliquer cette TextBox. On crait un Template qui dfini ce que lon est autoris entrer dans le zone de texte. Voici la correspondance des caractres que lon peut mettre dans cette proprit et leurs actions dans le masque : ? -> Tous les caractres L -> Une lettre $ -> Une lettre ou un espace 9 -> Un chiffre
AcceptNegative
ClearMaskOnLostFocus ClearTextOnInvalid ClipboardEnable DisplayMoney ErrorTooltipEnabled Filtered InputDirection
TargetControlID Mask
OUI
33
C -> Seuls les caractres spcifis dans la proprit Filtered sont accepts A -> Une lettre ou les caractres personnaliss (C) N -> Un chiffre ou les caractres personnaliss (C) Il existe aussi des sparateurs pour les masques comme lheure et la date : / -> Sparateur pour la date : -> Sparateur pour lheure . -> Sparateur de dcimale
Le caractre \ est le caractre dchappement pour les caractres spciaux que lon vient de voir.
Proprits du contrle MaskedEditValidator : Nom ControlToValidate ControlExtender InitialValue IsValidEmpty MaximumValue MinimumValue ValidationExpression Description Obligatoire Prend comme valeur lID de la TextBox valider. OUI Prend comme valeur lID du MaskedEditExtender. OUI Dfinit la valeur initiale de la TextBox. NON Dfinit si la Textbox est valide lorsquelle est vide. NON Dfinit le nombre maximum que peut prendre la NON TextBox. Dfinit le nombre minimum que peut prendre la NON TextBox. Dfinit une expression rgulire qui sera utilis pour OUI la validation.
Exemple dutilisation : On va crer une TextBox dans lequel on ne rentrera que des nombres entre 1000 et 9000 et qui, lorsquil sera slectionn, affichera des underscores _ aux emplacements o il manque un nombre.
Page ASPX <asp:TextBox ID="MaskedEditTextBox" runat="server"></asp:TextBox> <cc1:MaskedEditExtender ID="Extender" runat="server" TargetControlID="MaskedEditTextBox" Mask="9999" MaskType="Number" AutoComplete="true" ClearMaskOnLostFocus="true" MessageValidatorTip="true" InputDirection="LeftToRight" /> <cc1:MaskedEditValidator ID="Validator" runat="server" ControlExtender="Extender" ControlToValidate="MaskedEditTextBox" EmptyValueMessage="Le nombre est vide" IsValidEmpty="false" TooltipMessage="Entrer un nombre entre 1000 et 9000" MinimumValue="1000"
34

MaximumValue="9000" MinimumValueMessage="Le nombre est plus petit que 1000" MaximumValueMessage="Le nombre est plus grand que 9000" />
Voici une liste de ce qui va se passer dans cet exemple suivant ce que vous faites : Si vous slectionnez la TextBox :
Si vous le laissez vide et le dslectionnez :
Si vous mettez un nombre plus petit que 1000 :
Si vous mettez un nombre plus grand que 9000 :
Et si vous rentrez un nombre valide vous aurez ceci :
3.15 ModalPopup
Dfinition : La ModalPopup permet dafficher un message dans un bloc qui sera affich au dessus du reste du site. Ce contrle est trs pratique pour afficher un complment dinformations lors du clic sur llment que lon a dfini, mais il permet aussi dexcuter du code Javascript sur le client lorsque celui-ci appuie sur le bouton de validation ou dannulation. Ces deux boutons correspondent des contrles que nous avons placs nous mme dans la ModalPopup et dfinis dans les proprits du contrles. Il est prendre en considration que lorsque la ModalPopup est affiche, il est impossible dinteragir avec le reste de la page. Proprits : Nom TargetControlID PopupControlID BackgroundCssClass DropShadow OkControlID Description Obligatoire Prend comme valeur lID du contrle tendre pour OUI activer la ModalPopup. Prend comme valeur lID de llment afficher comme OUI une ModalPopup. Dfinit le nom de la classe CSS appliquer au fond de la NON ModalPopup. Dfinit si la ModalPopup aura une ombre ( true) ou NON non. Prend comme valeur lID du contrle qui correspond au OUI bouton Ok.
35
OnOkScript
Script excuter sur le client (javascript) lorsque celui-ci appuie sur le contrle de validation. CancelControlID Prend comme valeur lID du contrle qui correspond au bouton cancel. OnCancelScript Script excuter sur le client (javascript) lorsque celui-ci appuie sur le contrle dannulation. PopupDragHandleControlID Prend comme valeur lID de llment qui sera utilis pour dplacer la ModalPopup. X Indique la coordonn X pour positionner la ModalPopup (par rapport au ct gauche de la page du navigateur). Elle sera centre par dfaut. Y Indique la coordonn Y pour positionner la ModalPopup (par rapport au haut de la page du navigateur). Elle sera centre par dfaut. RepositionMode Permet de dfinir si la ModalPopup doit tre redimensionne dans le cas o la fentre sera redimensionne ou scrolle.
NON NON NON NON NON
NON
NON
ASP.NET <asp:LinkButton ID="OuvrirModalPopup" runat="server">ModalPopupExtender</asp:LinkButton> <asp:Panel ID="ModalPopup" runat="server" style="border: solid 2px black;backgroundcolor: #A8C1DF;width: 300px"> Vous avez cliqu sur le LinkButton.<br /> Ici se trouve le contenu du ModalPopup.<br /> <div style="text-align: right"> <asp:LinkButton ID="ValidButton" runat="server">Continuer</asp:LinkButton> </div> </asp:Panel> <cc1:ModalPopupExtender runat="server" TargetControlID="OuvrirModalPopup" PopupControlID="ModalPopup" OkControlID="ValidButton" DropShadow="True" />
36
3.16 MultiHandleSlider
Dfinition : Ce contrle est un extender de TextBox qui permet davoir plusieurs Handle (ou le pointeur). Il permet de choisir plusieurs valeurs sur le Slider (la barre sur laquelle (lesquelles) se trouve(nt) le(s) curseur(s)). Le reste ressemble lextender Slider qui lui ne possde quun Handle. Proprits : Nom TargetControlID Description Obligatoire Prend comme valeur lID du TextBox qui sera OUI remplac par un Slider. Minimum Valeur minimum du Slider. NON Maximum Valeur maximum du Slider. NON Length Taille du Slider en pixel (correspond au Width). NON Decimals Nombre de dcimale pour la valeur du Slider. NON Steps Nombre de valeurs possibles dans le Slider (exemple : a 5 il y aura 5 valeurs possibles dans le Slider : Le NON minimum, a 1 quart, le milieu (2 quart), a 3 quart et le maximum). Orientation Dfinit le sens du Slider : Horizontal ou Vertical. NON EnableHandleAnimation NON EnableRailClick Au clic sur le rail, dplace le Handle le plus proche NON jusqu cette valeur. EnableInnerRangeDrag Permet de dplacer deux Handles simultanment NON lorsque lon clic sur le rail et quon dplace la souris. EnableKeyboard Permet le changement des valeurs partir du clavier. NON EnableMouseWheel Permet le changement des valeurs avec la roulette de NON la souris. ReadOnly Dfinit si le Slider est en ReadOnly ou non. Si oui les NON valeurs ne pourront pas tre modifies. Increment Dtermine de combien la valeur sera modifie si on NON utilise le clavier ou la roulette de la souris. HandleAnimationDuration Dfinit en secondes le temps de lanimation. NON RaiseChangeOnlyOnMouseUp Dfinit un vnement du contrle doit tre lev NON lorsque le Handle est modifi. TooltipText Texte afficher lorsque le Handle est survol : largument {0} sera remplac par la valeur courante NON du Handle en question. MultiHandleSliderTargets Dfinit une description pour chaque Handle sur le NON Slider.
Exemple dutilisation : Dans cet exemple vous allez voir comment utiliser ce contrle avec deux Handler. Nous y avons activ lutilisation de la molette et le clic sur le rail pour dplacer le HandleSlider le plus proche.
Page ASPX <asp:TextBox ID="Handle1" runat="server" /><br /> <asp:TextBox ID="Handle2" runat="server" /> <asp:TextBox ID="Slider" runat="server" />
37
<cc1:MultiHandleSliderExtender runat="server" TargetControlID="Slider" Minimum="-200" Maximum="200" Steps="5" Length="100" EnableMouseWheel="true" EnableRailClick="true"> <%--C'est ici que ce trouveront vos HandleSlider. Leur ControlID pointe vers une TextBox qui contiendra dynamiquement la valeur du HandleSlider--%> <MultiHandleSliderTargets> <cc1:MultiHandleSliderTarget ControlID="Handle1" /> <cc1:MultiHandleSliderTarget ControlID="Handle2" /> </MultiHandleSliderTargets> </cc1:MultiHandleSliderExtender>
3.17 MutuallyExclusiveCheckBox
Dfinition : Le MutuallyExclusiveCheckBox permet de transformer vos CheckBox en RadioButton, tout en conservant laspect graphique dune CheckBox. Ce contrle permet de conserver une homognit de votre site, par exemple lorsque vous proposez un formulaire choix multiple et que vous dsirez empcher des slections incohrentes. Proprits du contrle : Nom TargetControlID Key Description Obligatoire Permet de lier la MutuallyExclusiveCheckBox une CheckBox qui OUI bnficiera des fonctionnalits de ce contrle. En ditant cette proprit, vous crez un identifiant unique qui permettra aux autres MutuallyExclusiveCheckBox de communiquer OUI entre eux.
Exemple dutilisation : Dans cet exemple, nous allons crer plusieurs CheckBox, donnant la possibilit lutilisateur de choisir son sexe. Pour cela nous mettrons nos CheckBox dans un tableau HTML. Lutilisateur aura la possibilit de choisir entre homme, femme, anonyme. Voici le code correspondant :
38
ASP.NET <table style="width: 40%;"> <tr> <td> <span lang="fr">Vous tes un homme</span> </td> <td> <span lang="fr">Vous tes une femme</span> </td> <td> <span lang="fr">Vous ne voulez pas le dire</span> </td> </tr> <tr> <td> <asp:CheckBox ID="Male" runat="server" Text="Je suis un homme" /> <ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="MaleEx" TargetControlID="Male" Key="Sexe" runat="server"> </ajaxToolkit:MutuallyExclusiveCheckBoxExtender> </td> <td> <asp:CheckBox ID="Female" runat="server" Text="Je suis une femme" /> <ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="FemaleEx" TargetControlID="Female" Key="Sexe" runat="server"> </ajaxToolkit:MutuallyExclusiveCheckBoxExtender> </td> <td> <asp:CheckBox ID="Anonyme" runat="server" Text="Je reste anonyme" /> <ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="AnonymeEx" TargetControlID="Anonyme" Key="Sexe" runat="server"> </ajaxToolkit:MutuallyExclusiveCheckBoxExtender> </td> </tr> </table>
Comme vous pouvez le constater, chaque MutuallyExclusiveCheckBox est li la CheckBox du dessus grce la proprit TargetControlID qui prend en paramtre lID dune CheckBox. Vous remarquerez que chaque proprit Key possde la mme valeur. Voici un aperu de cet exemple :
Nous pouvons souligner que vous ne pouvez pas slectionner plusieurs CheckBox en mme temps.
39
3.18 NumericUpDown
Dfinition : Ce contrle est une alternative la DropDownList, la diffrence prs que ce contrle ne donne pas la possibilit choisir parmi une liste de valeur mais plutt dincrmenter ou dcrmenter la valeur visualise en fonction des paramtres que vous avez dfinis. Proprit : Nom TargetControlID Description Permet de lier la NumericUpDown une TextBox qui bnficiera des fonctionnalits de ce contrle. Width Combine la taille de la TextBox associe avec la taille des boutons que ce contrle rajoute. RefValues Permet de dfinir une liste exhaustive dans laquelle les valeurs vont osciller. Step Permet de dfinir le pas dincrmentation (1 par dfaut). Minimum Permet de dfinir une valeur maximum/minimum que va Maximum pouvoir prendre notre contrle. TargetButtonDownID Permet de dfinir une image pour un affichage personnalis TargetButtonUpID du bouton dincrmentation ou de dcrmentation. ServiceDownPath Permet de dfinir lemplacement dun Web Service qui ServiceUpPath comportera des mthodes destines un traitement personnalis de votre incrmentation/dcrmentation ServiceDownMethod Permet de spcifier la mthode utiliser contenue dans ServiceUpMethod votre Web Service pour traiter lincrmentation/dcrmentation. Obligatoire OUI OUI NON NON NON NON NON
NON
Exemple dutilisation : Pour cet exemple nous allons crer deux contrles NumericUpDown. Le premier nous permettra dafficher des nombres allant de 1 31, le second contiendra les mois de lanne. Voici le code correspondant :
ASP.NET <asp:TextBox runat="server" ID="TxtDay" Text="1"></asp:TextBox> <ajaxToolkit:NumericUpDownExtender runat="server" ID="NUDDay" TargetControlID="TxtDay" Width="100" Minimum="1" Maximum="31"> </ajaxToolkit:NumericUpDownExtender> <asp:TextBox runat="server" ID="TxtMonth" Text="Janvier"></asp:TextBox> <ajaxToolkit:NumericUpDownExtender runat="server" ID="NUDMonth" TargetControlID="TxtMonth" Width="100" RefValues="Janvier;Fvrier;Mars;Avril;Mai;Juin;Juillet;Aout;Septembre;Octobre;No vembre;Decembre"> </ajaxToolkit:NumericUpDownExtender>
Comme vous pouvez le constater nous avons li nos deux contrle Ajax nos contrles standards. Pour la proprit RefValues, notez que nous avons ajout les mois de lanne par ordre croissant, lincrmentation par dfaut respectera cet ordre. Voici un aperu de cet exemple :
40
Bug rpertori : La proprit Minimum ne peut pas prendre une valeur suprieure 100, au-del de cette valeur, le contrle ne rpond plus.
3.19 PagingBulletedList
Dfinition : Le PagingBulletedList nest ni plus ni moins quune extension du BulletedList. En effet ce contrle Ajax permet de paginer les lments contenus dans votre BulletedList. Il y a deux manire de paginer : par index et par lments maximum par page. Proprits : Nom TargetControlID Description Permet de lier le PagingBulletedList une BulletedList qui bnficiera des fonctionnalits de ce contrle. ClientSort Prend un boolen en paramtre et permet de trier les lments de notre liste par ordre alphanumrique ( false par dfaut). IndexSize Permet de dterminer la taille de lindex ( 1 par dfaut). MaxItemPerPage Dtermine le nombre dlments maximum afficher sur la page (dsactiv par dfaut). Cette proprit dsactive automatiquement lIndexSize. Separator Dfinis le caractre de sparation entre les diffrents index ( - par dfaut). SelectIndexCssClass Permet de choisir un style dans votre CSS pour les index UnselectIndexCssClass slectionns ou non. Obligatoire OUI NON NON NON NON NON
Exemple dutilisation : Nous allons crer une liste dlments dans une BulletedList puis nous lierons notre contrle standard notre contrle Ajax.
41
ASP.NET <asp:BulletedList ID="BulletedList1" runat="server"> <asp:ListItem>Pistach </asp:ListItem> <asp:ListItem>Akregator </asp:ListItem> <asp:ListItem>AOL Explorer </asp:ListItem> <asp:ListItem>Blam! </asp:ListItem> <asp:ListItem>Camino </asp:ListItem> <asp:ListItem>Epiphany </asp:ListItem> <asp:ListItem>FeedBeast </asp:ListItem> <asp:ListItem>Gnus </asp:ListItem> <asp:ListItem>Hubdog </asp:ListItem> <asp:ListItem>IBM Lotus Notes </asp:ListItem> <asp:ListItem>iCab </asp:ListItem> <asp:ListItem>K-Meleon </asp:ListItem> <asp:ListItem>Liferea </asp:ListItem> <asp:ListItem>Mail </asp:ListItem> <asp:ListItem>NetNewsWire </asp:ListItem> <asp:ListItem>Omea </asp:ListItem> <asp:ListItem>Pegasus Mail </asp:ListItem> <asp:ListItem>RSS Bandit </asp:ListItem> <asp:ListItem>Safari </asp:ListItem> <asp:ListItem>Tencent Traveler </asp:ListItem> <asp:ListItem>Vienna </asp:ListItem> <asp:ListItem>Windows Live Mail </asp:ListItem> <asp:ListItem>Zimbra </asp:ListItem> </asp:BulletedList> <ajaxToolkit:PagingBulletedListExtender ID="PagingBulletedListExtender1" runat="server" TargetControlID="BulletedList1"> </ajaxToolkit:PagingBulletedListExtender>
Comme vous pouvez le constater nous avons gr le minimum de proprit possible. Voici un aperu de cet exemple :
Nous navons pas mis True la proprit ClientSort ce qui explique que notre index nest pas tri.
3.20 PasswordStrength
Dfinition : Le PasswordStrength est une extension aux contrles standards de type TextBox. Il permet de signifier lutilisateur si son mot de passe est assez scuris ou non, selon votre politique de scurit : un mot de passe de minimum 10 caractre comprenant 3 symboles et 2 chiffres peut reprsenter un mot de passe scuris selon votre politique.
Proprits : Nom TargetControlID Description Permet de lier le PasswordStrength une TextBox qui bnficiera des fonctionnalits de ce contrle. Obligatoire OUI
42
DisplayPosition
StrengthIndicatorType PreferredPasswordLength PrefixText
TextCssClass MinimumNumericCharacters MinimumSymbolCharacters RequiresUpperAndLowerCaseC haracters MinimumLowerCaseCharacters MinimumUpperCaseCharacters TextStrengthDescriptions
CalculationWeightings
BarBorderCssClass BarIndicatorCssClass StrengthStyles
HelpStatusLabelID
HelpHandleCssClass
Permet de dterminer la position de lindicateur de scurit du mot de passe par rapport la TextBox auquel le PasswordStrength est li. Dtermine le type dindicateur de scurit (BarIndicator ou Text). Permet de dfinir la taille de votre mot de passe que vous considrez comme scuris. Permet de dfinir un texte qui apparaitra juste avant lindicateur de scurit (uniquement pour le type Text). Permet dappliquer un style sur les indicateurs de type Text. Permet de dfinir un nombre minimum de symboles/nombres entrer pour avoir un mot de passe scuris. Permet de dfinir si on prend en compte la gestion des lettres majuscules ou minuscules pour avoir un mot de passe scuris (a false par dfaut). Permet de dfinir un nombre minimum de caractre majuscule/minuscule pour avoir un mot de passe scuris. Permet de personnaliser le texte affich en fonction de lentre utilisateur pour un indicateur de type Text. Peut prendre 2 10 indications diffrentes par ordre de scurit croissante. Chacune delle doit tre spare par un point virgule. Permet de dfinir nous mme le niveau dimportance pour un type de vrification. Par dfaut ce sont les valeurs suivantes qui sont prises : 50 ;15 ;15 ;20. La somme de ces valeurs doit imprativement tre gal 100 et chacune une signification : - La premire valeur est lindice dimportance pour la taille du mot de passe ; - La seconde est lindice dimportance pour le nombre de caractre numrique ; - La troisime est lindice dimportance pour la casse (majuscule et minuscule) ; - La dernire valeur est lindice dimportance pour les symboles. Permet dappliquer un style la bordure de lindicateur de type BarIndicator. Permet dappliquer un style lindicateur de type BarIndicator. Permet dappliquer plusieurs styles diffrents en fonction du niveau de scurit du mot de passe. Il faut sparer chacun des styles par un point virgule. Permet de lier notre un Label daide do il pourra indiquer les caractres manquant pour avoir un mot de passe le plus scuris. Permet dappliquer un style llment HelpHandlePosition. Obligatoire si vous utilisez
NON NON NON NON NON NON
NON
NON
NON
NON
NON NON NON
NON NON
43
HelpHandlePosition
HelpHandlePosition. Permet dafficher et de choisir la position dun mini bouton qui lors dun clic affichera une boite de dialogue informant des caractres manquant pour avoir une scurit maximum pour le mot de passe. A lier imprativement avec HelpHandleCssClass.
NON
Exemple dutilisation : Nous allons crer une TextBox de type Password qui sera lie notre contrle Ajax.
ASP.NET <asp:TextBox ID="TxtPassword" runat="server" TextMode="Password"></asp:TextBox> <ajaxToolkit:PasswordStrength ID="PasswordStrength1" runat="server" TargetControlID="TxtPassword"> </ajaxToolkit:PasswordStrength>
Une fois encore nous avons choisi dffectuer un exemple minimaliste. Voici un aperu de cet exemple :
Vous remarquerez quen fonction de notre entr utilisateur, le texte sur la droite se modifie au fur et mesure.
3.21 PopupControl
Dfinition : Le PopupControl est un contrle Ajax qui permet la slection dune TextBox dafficher un contrle permettant de remplir automatiquement la TextBox. Tous les contrles disposant dune mthode OnSelectedIndexChanged peuvent tre utiliss pour cette slection (Ex : RadioButtonList, Calendar). La gestion de ce contrle seffectue en partie en code behind. Les contrles utiliss pour la slection doivent tre imbriqus dans un Panel puis dans un UpdatePanel.
Proprits : Nom TargetControlID PopupControlID Position CommitProperty Description Permet de lier le PopupControl une TextBox qui bnficiera des fonctionnalits de ce contrle. Permet de lier un Panel avec le contrle Ajax, qui bnficiera des fonctionnalits du contrle Ajax. Permet de dterminer le lieu daffichage de notre Panel. Permet de dfinir la variable qui sera prise en compte pour afficher votre slection. Obligatoire OUI OUI NON OUI
44
CommitScript
OffsetX/OffsetY
Permet de modifier laffichage aprs la slection (ajouter du texte avant ou aprs llment slectionn dans la TextBox). Permet dajouter un dcalage en pixel du Panel par rapport la TextBox lie ( 0 par dfaut pour les deux proprits).
NON
NON
Exemple dutilisation : Dans cet exemple nous donner la possibilit de choisir diffrents OS la slection de la TextBox.
ASP.NET Sous quelle OS tournez vous ? <asp:TextBox ID="TxtBxOS" runat="server" Width="350px"></asp:TextBox> <br /> <asp:Panel ID="PnlOS" runat="server" CssClass="popupControl"> <asp:UpdatePanel ID="UpdtPnlOS" runat="server"> <ContentTemplate> <asp:RadioButtonList ID="RdBtnLstOS" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RdBtnLstOS_SelectedIndexChanged" Width="150px"> <asp:ListItem Text="XP Home"></asp:ListItem> <asp:ListItem Text="XP Pro"></asp:ListItem> <asp:ListItem Text="Vista Home"></asp:ListItem> <asp:ListItem Text="Vista Business"></asp:ListItem> <asp:ListItem Text="Vista Ultimate"></asp:ListItem> </asp:RadioButtonList> </ContentTemplate> </asp:UpdatePanel> </asp:Panel> <br /> <ajaxtoolkit:PopupControlExtender ID="PCExOS" runat="server" TargetControlID="TxtBxOS" PopupControlID="PnlOS" CommitProperty="value" CommitScript="e.value += ' est votre systme d\'exploitation !';" Position="Bottom" OffsetX="10" OffsetY="10"> </ajaxtoolkit:PopupControlExtender>
Code Behind : Vous devez imprativement ajouter lespace de nomage AjaxControlToolkit.

C# protected void RdBtnLstOS_SelectedIndexChanged(object sender, EventArgs e) { if ((String.IsNullOrEmpty(RdBtnLstOS.SelectedValue)) == false) { PopupControlExtender.GetProxyForCurrentPopup(this.Page).Commit(RdBtnLstOS. SelectedValue); } RdBtnLstOS.ClearSelection(); }
45
VB.NET Protected Sub RdBtnLstOS _SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles RdBtnLstOS.SelectedIndexChanged If Not (String.IsNullOrEmpty(RdBtnLstOS.SelectedValue)) Then PopupControlExtender.GetProxyForCurrentPopup(Me.Page).Commit(RdBtnLstOS.Se lectedValue) End If RdBtnLstOS.ClearSelection() End Sub
Vous remarquerez quune fois votre OS slectionn, le Panel disparait.
3.22 ResizableControl
Dfinition : Le ResizableControlExtender va nous permettre de redimensionner nimporte quel contrle contenue dans un Panel. Proprits : Nom TargetControlID MinimumHeight MinimumWidth MaximumHeight MaximumWidth ResizableCssClass HandleCssClass HandleOffsetX HandleOffsetY Description Permet de lier le ResizableControlExtender un Panel qui bnficiera des fonctionnalits de ce contrle. Ces proprits permettent de dfinir la valeur minimum de la hauteur et de la largeur. Ces proprits permettent de dfinir la valeur maximum de la hauteur et de la largeur. Permet de lier le panel une classe CSS, utilise lorsquon est sur le bouton pour redimensionner le contrle. Permet de lier le panel une classe CSS qui sera applique sur le bouton de redimensionnement. Permet de dfinir le dcalage du bouton de redimensionnement par rapport au coin infrieur droit du panel. Obligatoire OUI OUI OUI NON NON NON
46
Ajax Control Toolkit Dans cet exemple nous afficherons une image qui pourra tre redimensionne.
ASP.NET
<form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div> <asp:Panel ID="PanelImage" runat="server" CssClass="frameImage"> <asp:Image ID="Image1" runat="server" ImageUrl="~/images/Dotnet.png" AlternateText="Dotnet-France" Style="width: 100%; height: 100%;" /> </asp:Panel> <ajaxtoolkit:ResizableControlExtender ID="ResizableControlExtender1" runat="server" HandleCssClass="handleImage" TargetControlID="PanelImage" ResizableCssClass="resizingImage" MinimumWidth="50" MinimumHeight="50" MaximumWidth="250" MaximumHeight="250" HandleOffsetX="3" HandleOffsetY="3"/> </div> </form>
3.23 RoundedCorners
Dfinition :
47
Ajax Control Toolkit Ce contrle permet deffectuer un effet arrondi sur les coins des Panel. Proprits : Nom TargetControlID Radius Corners Description Permet de lier le RoundedCorners un Panel qui bnficiera des fonctionnalits de ce contrle. Permet de dterminer sur combien de pixel vous effectuez un arrondissement du coin ( 5 par dfaut). Permet de choisir quels coins vous voulez arrondir (tous par dfaut). Obligatoire OUI NON NON
ASP.NET <asp:Panel ID="Panel1" runat="server" Style="background-color: Gray;" Width="314px" Height="125px"> <div style="padding-top: 10px; padding-left: 10px"> <asp:Image ID="Image1" runat="server" ImageUrl="~/images/DotNet.png" /> </div> </asp:Panel> <ajaxtoolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="Panel1"> </ajaxtoolkit:RoundedCornersExtender>
3.24 Slider
Dfinition :
48
Ajax Control Toolkit Cest un extender pour les TextBox qui va les transformer en slider. Il possde des proprits permettant de configurer le Slider comme les valeurs minimum et maximum, le pas, la valeur par dfaut ect. Proprits : Nom Minimum Maximum Decimals Steps Description Obligatoire Valeur minimum du slider. Par dfaut 0. NON Valeur maximum du slider. Par dfaut 100. NON Nombre de chiffres dcimaux aprs la virgule. NON Dfini en combien de valeur va tre coup le Slider. Par exemple de -200 200 si on met 5, il y aura les valeurs : -200, NON 100, 0, 100 et 200, donc 5 valeurs. Dfinit la classe CSS utilis pour le rail du Slider. NON Image qui sera utilise pour le slider. NON Dfinit la taille du Slider (Width/Height). NON Prend comme valeur lID du Label ou de la TextBox qui NON prendra automatiquement la valeur du Slider. Prend comme valeur lID de la TextBox qui va servir de Slider. OUI Dfinit le sens daffichage du slider : Horizontal, Vertical. Par NON dfaut il est Horizontal.
RailCssClass HandleImageURL Length BoundControlID TargetControlID Orientation
ASP.NET <asp:TextBox ID="Slider" runat="server" /> <asp:Label ID="LabelSlider" runat="server" Text="Texte non affich" /> <cc1:SliderExtender runat="server" TargetControlID="Slider" BoundControlID="LabelSlider" Minimum="-200" Maximum="200" Steps="5" Decimals="2" Orientation="Vertical" />
Cet exemple vous montre simplement comment faire un Slider partir dune TextBox. Vous pouvez vrifier quil y a bien 5 pas sur le Slider.
3.25 SlideShow
Dfinition :
49
Ajax Control Toolkit Le SliderShow va permettre de crer un diaporama dimages via un WebService. Pour mieux comprendre allez voir lexemple. Proprit : Nom TargetControlID SlideShowServicePath SlideShowServiceMethod NextButtonID PreviousButtonID PlayButtonID PlayInterval Loop AutoPlay ImageTitleLabelID ImageDescritpionLabelID Description Permet de lier le SliderShow une Image qui bnficiera des fonctionnalits de ce contrle. Permet de spcifier le chemin de notre WebService. Permet de spcifier le nom de la mthode appeler dans le WebService. Permet de spcifier lID du Button qui servira pour passer limage suivante. Permet de spcifier lID du Button qui servira pour passer limage prcdente. Permet de spcifier lID du Button qui servira dmarrer/stopper le diaporama. Permet de dfinir lintervalle de temps entre chaque image. Permet de dfinir si le diaporama doit tourner un boucle ou non. Permet de dfinir si le diaporama se lance au chargement de la page ou non. Permet de spcifier le Label cible pour afficher le titre de limage. Permet de spcifier le Label cible pour afficher la description de limage. Obligatoire OUI OUI OUI OUI OUI OUI NON NON NON NON NON
Exemple dutilisation : Dans cet exemple, nous allons crer un diaporama via un WebService qui rcuprera nos images de manire prdfinie. Il est bien entendu possible de faire cela via une base de donnes. Code source de SlideShowService.asmx :
C# public class SlideShowService : System.Web.Services.WebService { [System.Web.Services.WebMethod] [System.Web.Script.Services.ScriptMethod] public AjaxControlToolkit.Slide[] GetSlide() { AjaxControlToolkit.Slide[] MySlide = new AjaxControlToolkit.Slide[4]; MySlide[0] = new AjaxControlToolkit.Slide("images/Freedom.jpg", "Freedom", "Let's be free !"); MySlide[1] = new AjaxControlToolkit.Slide("images/Lemon.jpg", "Lemon", "Wanna have some fruits ?"); MySlide[2] = new AjaxControlToolkit.Slide("images/Load.jpg", "Load", "You still wait a moment please"); MySlide[3] = new AjaxControlToolkit.Slide("images/Love.jpg", "Love", "You've seen my heart ?"); return MySlide; } }
VB.NET ' A insrer avant la dlaration de la classe
50

<System.Web.Script.Services.ScriptService()> _ ' [...] Public Function GetSlides() As AjaxControlToolkit.Slide() Dim MySlides(4) As AjaxControlToolkit.Slide MySlides(0) = New AjaxControlToolkit.Slide("images/Freedom.jpg", "Freedom", "Let's be free !") MySlides(1) = New AjaxControlToolkit.Slide("images/Lemon.jpg", "Lemon", "Wanna have some fruits ?") MySlides(2) = New AjaxControlToolkit.Slide("images/Load.jpg", "Load", "You still wait a moment please") MySlides(3) = New AjaxControlToolkit.Slide("images/Love.jpg", "Love", "You've seen my heart ?") Return MySlides End Function
Code Source de la page par dfaut :

ASP.NET <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div style="border:solid 1px black;text-align:center"> <asp:Image ID="ImageSlideShow" runat="server" Style="width:auto; padding-top:20px;" Height="400" /> <br /> <asp:Label ID="LabelTitle" runat="server" Font-Bold="true" FontSize="Larger"></asp:Label> <br /> <asp:Label ID="LabelDescription" runat="server" Font-Italic="true"></asp:Label> </div> <br /><br /> <div style="text-align:center";> <asp:Button ID="ButtonPrevious" runat="server" Text="<<" /> <asp:Button ID="ButtonPlay" runat="server" Text="Lecture" /> <asp:Button ID="ButtonNext" runat="server" Text=">>" /> <ajaxtoolkit:SlideShowExtender ID="SlideShowExtender1" runat="server" TargetControlID="ImageSlideShow" SlideShowServicePath="SlideShowService.asmx" SlideShowServiceMethod="GetSlide" ImageTitleLabelID="LabelTitle" ImageDescriptionLabelID="LabelDescription" PreviousButtonID="ButtonPrevious" NextButtonID="ButtonNext" PlayButtonID="ButtonPlay" PlayButtonText="Lecture" StopButtonText="Pause" Loop="true" AutoPlay="true"/> </div> </form>
Voici un aperu de cet exemple dutilisation :
51
3.26 TextBoxWatermark
Dfinition : Le contrle TextBoxWatermark va vous permettre dafficher un texte par dfaut dans une TextBox qui disparaitra la slection de celle-ci. Proprit : Nom TargetControlID WatermarkText WatermarkCssClass Description Permet de lier le TextBoxWatermark une TextBox qui bnficiera des fonctionnalits de ce contrle. Permet de dfinir le texte affich par dfaut. Permet dappliquer un style la TextBox quand le texte par dfaut est affich. Obligatoire OUI OUI NON
52
ASP.NET <table> <tr> <td>Nom : </td> <td> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <ajaxtoolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" TargetControlID="TextBox1" WatermarkText="Entrez votre nom ici" WatermarkCssClass="watermarked"> </ajaxtoolkit:TextBoxWatermarkExtender> </td> </tr> <tr> <td>Prnom : </td> <td> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> <ajaxtoolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender2" runat="server" TargetControlID="TextBox2" WatermarkText="Entrez votre prnom ici" WatermarkCssClass="watermarked"> </ajaxtoolkit:TextBoxWatermarkExtender> </td> </tr> </table>
Le texte sefface quand vous slectionnez une TextBox puis rapparait si vous la laissez vide.
3.27 ToggleButton
Dfinition : Le contrle ToggleButton va nous permettre dappliquer un style pour nos CheckBox avec des images personnalises sans perturber le fonctionnement et lutilisation des CheckBox. Proprits : Nom TargetControlID Description Permet de lier le ToggleButton une CheckBox qui bnficiera des fonctionnalits de ce contrle. Permet de dfinir la hauteur/largeur, de nos images qui safficheront. Permet de dfinir lURL de limage associe la CheckBox lorsquelle est coch/dcoch. Permet de dfinir lURL de limage associe la CheckBox lorsque celle-ci est dsactive et coche/dcoche. Permet de dfinir lURL de limage associe Obligatoire OUI OUI OUI NON NON
ImageHeight ImageWidth CheckedImageUrl UncheckedImageUrl DisabledCheckedImageUrl DisabledUncheckedImageUrl CheckedImageOverUrl
53
UncheckedImageOverUrl CheckedImageAlternateText UncheckedImageAlternateText CheckedImageOverAlternateText UncheckedImageOverAlternateText
la CheckBox au survol de la souris. Permet de dfinir un texte alternatif la CheckBox quant celle-ci est coche/dcoche. Permet de dfinir le texte alternatif au survol de la sourie de la CheckBox.
NON NON
Exemple dutilisation : Dans cet exemple nous allons crer deux TextBox et les lier notre contrle Ajax. Puis nous rcuprerons les informations entres par lutilisateur.
ASP.NET <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:CheckBox ID="CheckBox1" Checked="true" Text="J'aime utiliser Visual Studio" runat="server" /> <br /> <asp:CheckBox ID="CheckBox2" Checked="true" Text="J'aime les documents fournis par DotNet-France" runat="server" /> <br /> <br /> <asp:Button ID="Button1" runat="server" Text="Envoyer" OnClick="Button1_Click" /> <br /> <br /> <asp:Label ID="Label1" runat="server"></asp:Label> <ajaxtoolkit:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server" TargetControlID="CheckBox1" ImageWidth="19" ImageHeight="19" UncheckedImageUrl="images/Toggle_refuse.png" CheckedImageUrl="images/Toggle_valide.png" CheckedImageAlternateText="Coch" UncheckedImageAlternateText="Dcoch"> </ajaxtoolkit:ToggleButtonExtender> <ajaxtoolkit:ToggleButtonExtender ID="ToggleButtonExtender2" runat="server" TargetControlID="CheckBox2" ImageWidth="19" ImageHeight="19" UncheckedImageUrl="images/Toggle_refuse.png" CheckedImageUrl="images/Toggle_valide.png" CheckedImageAlternateText="Coch" UncheckedImageAlternateText="Dcoch"> </ajaxtoolkit:ToggleButtonExtender> </ContentTemplate> </asp:UpdatePanel>
54
C# protected void Button1_Click(object sender, EventArgs e) { string clientSelection = ""; if (CheckBox1.Checked) { clientSelection = "Vous aimez Visual Studio "; } else { clientSelection = "Vous n'aimez pas Visual Studio "; } if (CheckBox2.Checked) { clientSelection += "et vous apprciez les documents de DotNet-France"; } else { clientSelection += "et vous n'apprciez guerre les documents de DotNetFrance"; } Label1.Text = clientSelection; }
VB.NET Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Dim clientSelection As String = "" If (CheckBox1.Checked) Then clientSelection = "Vous aimez Visual Studio " Else clientSelection = "Vous n'aimez pas Visual Studio " End If If (CheckBox2.Checked) Then clientSelection += "et vous apprciez les documents de DotNet-France" Else clientSelection += "et vous n'apprciez guerre les documents de DotNetFrance" End If Label1.Text = clientSelection End Sub
Aperu de cet exemple :
Comme vous pouvez le constater, la CheckBox habituelle a t remplace par nos images.
55
3.28 UpdatePanelAnimation
Dfinition : LUpdatePanelAnimation est un extender de lUpdatePanel. Ce contrle va nous permettre de crer une animation lors dune modification dun UpdatePanel. Il est possible dappliquer trois effets diffrents. Voici les utilisations les plus courantes : Rduction dopacit : il est possible de diminuer lopacit de lUpdatePanel pendant le chargement et de lui faire reprendre sa valeur initiale une fois le chargement termin. Animation daffaissement : lUpdatePanel se rduit puis retrouve sa taille initiale. Changement de la couleur de larrire plan : la couleur de larrire plan change de manire fluide puis retrouve sa couleur de dpart.
Toutes ces animations sont cumulables et compltement personnalisables, par exemple, on peut mettre larrive une couleur diffrente de celle de dpart pour larrire plan et coupler cette animation avec celle de laffaissement. Les proprits sont peu nombreuses en revanche la mise en place des effets est plus longue. Proprits : Nom TargetControlID BehaviorID Description Permet de lier lAnimationUpdatePanel un UpdatePanel qui bnficiera des fonctionnalits de ce contrle. Permet de crer un identifiant pour lUpdatePanel auquel lUpdatePanelAnimation est li afin pouvoir rcuprer ses proprits dans le JavaScript. Obligatoire OUI NON
Balises : Nom Animation Description Permet dindiquer que lon va crer des effets danimation. Elle est contenue dans UpdatePanelAnimation et contient les balises OnUpdating et OnUpdated. Cest dans cette balise que lon cre les effets danimation pendant le chargement. Cest dans cette balise que lon cre les effets danimation aprs le chargement. Obligatoire Recommand Recommand Recommand
OnUpdating OnUpdated
Exemple dutilisation : Dans cet exemple nous allons crer un UpdatePanel contenant une Textbox et un Label. Nous allons donner la possibilit lutilisateur de choisir lanimation quil veut voir.
ASP.NET <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div class="firstDiv"> <div class="secondDiv">
56

<div id="up_container" class="thirdDiv"> <%-- Panel touch par l'animation --%> <asp:UpdatePanel ID="update" runat="server"> <ContentTemplate> <div id="background" class="divInContentTemplate"> Votre nom : <asp:TextBox ID="txtbxUpdate" runat="server"></asp:TextBox> <br /> <asp:Label ID="lblUpdate" runat="server" CssClass="labelInContentTemplate"> Nous ne connaissons pas votre nom. </asp:Label> </div> </ContentTemplate> <%-- Le controle AsyncPostTrigger va permettre d'effectuer une mise jour sans recharger la page entirement --%> <Triggers> <asp:AsyncPostBackTrigger ControlID="btnUpdate" EventName="Click" /> </Triggers> </asp:UpdatePanel> </div> </div> </div>  Choisissez les effets de l'animation et cliquez sur "Actualiser" :<br /> <input type="checkbox" id="effect_fade" checked="checked" /> <label for="effect_fade">Rduction d'opacit</label><br /> <input type="checkbox" id="effect_collapse" checked="checked" /> <label for="effect_collapse">Animation d'affaissement</label><br /> <input type="checkbox" id="effect_color" checked="checked" /> <label for="effect_color">Couleur de l'arrire plan</label><br /> <asp:Button ID="btnUpdate" runat="server" Text="Actualiser" OnClick="btnUpdate_Click" /> <ajaxtoolkit:UpdatePanelAnimationExtender ID="upae" BehaviorID="animation" runat="server" TargetControlID="update"> <Animations> <OnUpdating> <Sequence> <%-- On stocke les proprits de l'UpdatePanel que nous comptons utiliser --%> <ScriptAction Script="var b = $find('animation'); b._originalHeight = b._element.offsetHeight;" /> <%-- La balise Parallele permet de dfinir les actions raliser en mme temps --%> <%-- La proprit duration permet de spcifier en combien de temps l'action doit tre ralis --%> <Parallel duration="0"> <%-- On dsactive les controles pendant lactualisation --%> <EnableAction AnimationTarget="btnUpdate" Enabled="false" /> <EnableAction AnimationTarget="effect_color" Enabled="false" /> <EnableAction AnimationTarget="effect_collapse" Enabled="false" /> <EnableAction AnimationTarget="effect_fade" Enabled="false" /> </Parallel> <StyleAction Attribute="overflow" Value="hidden" /> <%-- Animation raliser pendant le chargement en fonction des effets choisis --%> <%-- La proprit FPS spcifie le nombre d'image par seconde afficher --%> <Parallel duration=".25" Fps="30"> <%-- L'animation se ralisera si la valeur de retour de ConditionScript est True --%> <Condition ConditionScript="$get('effect_fade').checked">
57

<FadeOut AnimationTarget="up_container" minimumOpacity=".2" /> </Condition> <Condition ConditionScript="$get('effect_collapse').checked"> <Resize Height="0" /> </Condition> <Condition ConditionScript="$get('effect_color').checked"> <Color AnimationTarget="up_container" PropertyKey="backgroundColor" EndValue="#FF0000" StartValue="#40669A" /> </Condition> </Parallel> </Sequence> </OnUpdating> <OnUpdated> <Sequence> <%-- Animation raliser aprs le chargement en fonction des effets choisis --%> <Parallel duration=".25" Fps="30"> <Condition ConditionScript="$get('effect_fade').checked"> <FadeIn AnimationTarget="up_container" minimumOpacity=".2" /> </Condition> <Condition ConditionScript="$get('effect_collapse').checked"> <%-- On rcupre les valeurs stockes dans les variables auparavant --%> <Resize HeightScript="$find('animation')._originalHeight" /> </Condition> <Condition ConditionScript="$get('effect_color').checked"> <Color AnimationTarget="up_container" PropertyKey="backgroundColor" StartValue="#FF0000" EndValue="#40669A" /> </Condition> </Parallel> <%-- On ractive les controles aprs lactualisation --%> <Parallel duration="0"> <EnableAction AnimationTarget="effect_fade" Enabled="true" /> <EnableAction AnimationTarget="effect_collapse" Enabled="true" /> <EnableAction AnimationTarget="effect_color" Enabled="true" /> <EnableAction AnimationTarget="btnUpdate" Enabled="true" /> </Parallel> </Sequence> </OnUpdated> </Animations> </ajaxtoolkit:UpdatePanelAnimationExtender> </form>
CSS Feuille de style lier .firstDiv { margin-bottom: 10px; } .secondDiv { border: dashed 1px #222222; } .thirdDiv { background-color: #40669A; } .divInContentTemplate
58
{
text-align: center; vertical-align: middle; line-height: 44px; padding: 12px; height: 80px; color: #FFFFFF; } .labelInContentTemplate { padding: 5px; font-size: 14px; font-weight: bold; }
C# protected void btnUpdate_Click(object sender, EventArgs e) { System.Threading.Thread.Sleep(300); lblUpdate.Text = "Vous vous appelez " + txtbxUpdate.Text; } VB.NET Protected Sub btnUpdate_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnUpdate.Click System.Threading.Thread.Sleep(300) lblUpdate.Text = DateTime.Now.ToString() End Sub
59
3.29 ValidatorCallout
Dfinition : Ce contrle permet dafficher une tiquette esthtique la place de du texte derreur classique affiche par les contrles de validation (Ex : RequireFieldValidator), ainsi que de surligner le champ ne remplissant pas les conditions de validation. Proprits : Nom TargetControlID Description Permet de lier le ValidatorCalloutExtender un contrle de validation qui bnficiera des fonctionnalits du contrle AjaxToolkit. Lie votre contrle une classe CSS o vous pourrez configurer la couleur du surlignement. Obligatoire OUI NON
HightlightCssClass
Exemple dutilisation : Dans cet exemple, nous afficherons deux Textbox ncessitant une validation.
ASP.NET <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <table> <tr> <td>Nom:</td> <td> <asp:TextBox runat="server" ID="TxtBxName" /> </td> </tr> <tr> <td>Age:</td> <td> <asp:TextBox runat="server" ID="TxtBxAge" /> </td> </tr> </table> <br /> <asp:RequiredFieldValidator runat="server" ID="RFVNameMissing" ControlToValidate="TxtBxName" Display="None" ErrorMessage="<b>Texte manquant</b><br />Veuillez entrer votre nom." /> <ajaxtoolkit:ValidatorCalloutExtender runat="Server" ID="VCENameMissing" TargetControlID="RFVNameMissing" HighlightCssClass="validatorCalloutHighlight" /> <asp:RequiredFieldValidator runat="server" ID="RFVAgeMissing" ControlToValidate="TxtBxAge" Display="None" ErrorMessage="<b>Texte manquant</b><br />Veuillez entrer votre age." /> <ajaxtoolkit:ValidatorCalloutExtender runat="Server" ID="VCEAgeMiss" TargetControlID="RFVAgeMissing" HighlightCssClass="validatorCalloutHighlight" Width="350px" /> <asp:RegularExpressionValidator runat="server" ID="REVAgeType" ControlToValidate="TxtBxAge" Display="None" ValidationExpression="^(\d{2})|(\d{1})" ErrorMessage="<b>Champ incorrect</b> <br />Veuiller entre un nombre entre 0 et 99" /> <ajaxtoolkit:ValidatorCalloutExtender runat="Server" ID="VCEAgeType" TargetControlID="REVAgeType" HighlightCssClass="validatorCalloutHighlight" />
60

<asp:Button ID="Button1" runat="server" Text="Envoyer" /><br /> <br /> </form>
61
4 Les contrles autonomes

Les contrles autonomes sont des contrles part entire, qui najoutent pas de fonctionnalits dautres contrles, mais qui sont en eux mme des contrles complets .
4.1 Accordion
Dfinition : Le contrle Accordion vous permet laffichage de plusieurs Panel sous la forme dun menu. Chaque Panel possde un titre. Lors dun clic sur celui-ci, soit on droule, soit on cache le contenu du Panel. Ce contrle contient une liste de contrles Panel, que lon place dans un contrle Panes de lAccordion. Un Panel est implment par des contrles AccordionPane contenant eux-mmes un titre (Header) et un contenu (Content). Cest AccordionPane se trouvent dans la collection de Panels nomm Panes. Pour mieux comprendre de quoi il retourne veuillez vous rfrer lexemple de ce contrle. Proprits : Nom AutoSize Description Obligatoire Dfini le mode de redimensionnement. Peut prendre NON comme valeur : None, Limit ou encore Fill. DataSourceId Prend en paramtre lID de lobjet qui reprsente la NON source de donnes. FadeTransitions Active ou non les effets de transition. A False, les effets NON standards sont utiliss. RequireOpenedPane Dtermine si on force louverture dun seul Panel. Lors de louverture dun nouveau Panel, celui qui tait dj ouvert NON se ferme. Sa valeur par dfaut est True. SelectedIndex Elle permet de dfinir quel sera le Panel ouvert au chargement de la page. Par dfaut elle possde la valeur 0 NON qui correspond au premier Panel. TransitionDuration Dure de la transition en millisecondes. NON SuppressHeaderPostbacks Supprime les ventuels Postback possible dans les en ttes. Pour laccessibilit on peut mettre un Hyperlink dans len tte. Grce cette proprit on peut dsactiver NON le lien (ce qui naura aucun effet sur laccessibilit puisque le lien restera prsent mais sera inactif). Panes Contient la collection dAccordionPane. Ce sont les panels OUI qui seront affich. DataSource Dfini la source de donne utiliser. Attention il faudra NON appeler la mthode DataBind pour remplir le contrle. DataMember Lorsque lon utilise DataSourceID, on a besoin de dfinir le NON nom du membre utiliser.
Exemple dutilisation : Dans cet exemple on va voir comment utiliser le contrle Accordion. Limage ci-contre montre le rsultat. Comme vous pouvez le constatez dans le code qui suit, le contrle Accordion contient une collection dAccrodionPane qui est stock dans Panes. Chaque AccordionPane possde un
62
Ajax Control Toolkit Header qui correspond son titre ou son en-tte et un contenu (Content).
ASP.NET <style type="text/css"> .HeadClass { border: solid black 1px; background-color: #e3ebf4; } .ThisClass { border: outset black 2px; } </style> <div> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <cc1:Accordion ID="Accordion1" runat="server" SelectedIndex="0" FadeTransitions="true" HeaderCssClass="HeadClass" ContentCssClass="ContentClass" CssClass="ThisClass" AutoSize="None" RequiredOpenedPane="true"> <Panes> <cc1:AccordionPane runat="server"> <Header>Mon Premier Accordion</Header> <Content>Le contenu des AccordionPane est mis en Autosize="None". Parcourez les diffrentes parties du contrle Accordion pour en dcouvrir plus.</Content> </cc1:AccordionPane> <cc1:AccordionPane runat="server"> <Header>Second AccordionPane</Header> <Content>On peut mettre du code dans l'Accordion. <asp:Label runat="server" Text="Ma TextBox"/><asp:TextBox runat="server"/></Content> </cc1:AccordionPane> <cc1:AccordionPane runat="server"> <Header>Fin</Header> <Content>Nous avons spcifi grce RequiredOpenedPane qu'il faut obligatoirement qu'un des AccordionPane soit ouvert.</Content> </cc1:AccordionPane> </Panes> </cc1:Accordion>
4.2 NoBot
Dfinition : NoBot est un contrle qui va vous permettre de savoir si la personne qui accde votre site est un bot de la mme faon quun Captcha pourrait le faire. Son avantage est quil ne demande aucune action de lutilisateur : il est bas sur diffrentes hypothses mises pour diffrencier un humain dun bot que nous allons voir. Lavantage de ce systme est quil est totalement invisible pour lutilisateur. En revanche il nest pas efficace 100%, et il est prfrable de ne lutiliser que pour des sites petit trafic comme des blog, des sites de petites entreprises Ce genre de systme est gnralement utilis pour viter quun bot ne puisse sinscrire un site, flooder/spammer le site en postant des commentaires/articles ou autres Donc pour empcher un bot de nuire au site.
63
Ajax Control Toolkit Pour cela, ce contrle ce base sur plusieurs techniques dont en voila quelques-unes : La rapidit dun humain remplir un formulaire et lenvoyer. En effet on peut configurer un temps correspondant au temps minimum que mettrait un humain remplir le formulaire en question. Ce temps est le temps entre la requte du formulaire faite au serveur et le demande de PostBack pour envoyer les donnes. Un bot mettra surement moins dune seconde pour remplir un formulaire sil nest pas programm pour faire des pauses . Le nombre de fois o le formulaire est envoy par minute. Un humain ne peut pas renvoyer le mme formulaire plus dun certain nombre de fois par minutes (par convention on prend 5).
Il permet aussi de vrifier si le code javascript est bien activ, pour viter par exemple que lon passe outre les vrifications faites en javascript sur le formulaire avant son envoi. Cependant nous tenons insister sur le fait que, comme tout ce qui se trouve sur le client, ce nest pas sur 100%. Il faut toujours vrifier les donnes reus (on peut quand mme passer outre le code javascript). Quand au contrle lui-mme, il nest pas non plus infaillible.
Proprits du contrle : Nom Description Obligatoire OnGenerateChallengeAndResponse Prend en valeur le nom de la mthode permettant de vrifier que le javascript est bien activ sur le client. Le challenge correspond NON quelque chose que le client va devoir calculer et la suite de cela il retournera le rsultat qui correspond Response. ResponseMinimumDelaySeconds Dlai entre la requte pour rcuprer le NON formulaire et le PostBack du formulaire. CutoffWindowSeconds Dfini un laps de temps durant lequel une NON adresse IP ne peut pas renvoyer le formulaire. CutoffMaximumInstances Dfini le nombre de fois maximum pour lenvoi NON du formulaire par rapport une adresse IP.
Exemple dutilisation : Cet exemple ne contient pas les valeurs que lon mettrait en ralit pour un formulaire. Il est au contraire configur pour que vous voyiez bien lutilit des proprits.
64
ASP.NET <fieldset style="width: 300px"> <legend>Remplissez le formulaire</legend> <br /> Entrez votre nom : <asp:TextBox ID="Name" runat="server" /> <br /> <asp:Button ID="Valider" runat="server" Text="Valider" OnClick="ButtonClic" /> <br /><br /> <asp:Label ID="errors" runat="server" Text="No error message" /> </fieldset> <cc1:NoBot ID="NoBot1" runat="server" ResponseMinimumDelaySeconds="10" CutoffMaximumInstances="4" CutoffWindowSeconds="5" />
C# protected void ButtonClic(object sender, EventArgs e) { NoBotState etat; if (!NoBot1.IsValid(out etat)) { errors.Text = "Message d'erreur : " + etat.ToString(); } else { errors.Text = "Aucune erreur"; } } VB.NET
Protected Sub ButtonClic(ByVal sender As Object, ByVal e As EventArgs) Dim etat As NoBotState If Not NoBot1.IsValid(etat) Then errors.Text = "Message d'erreur : " + etat.ToString() Else errors.Text = "Aucune erreur" End If End Sub
Vous pouvez voir que suivant le temps que vous mettez rpondre au formulaire, vous pourrez tre considr comme un bot ou non. Vous ne pouvez renvoyer ce formulaire que 4 fois, au del de quoi il vous traitera comme un bot. Il est prendre en considration quil va falloir vrifier vous-mme dans le code behind, si lutilisateur est ou non un bot.
65
4.3 Rating
Dfinition : Le Rating est un contrle Ajax qui va nous permettre de crer un systme de notation par toiles : . La valeur de notation peut-tre rcupre pour insertion dans une base de donnes par exemple. Proprits : Nom AutoPostBack CurrentRating MaxRating ReadOnly StarCssClass WaitingStarCssClass FilledStarCssClass EmptyStarCssClass RatingAlign RatingDirection OnChanged Tag Description Obligatoire Mettre true si vous voulez effectuer un PostBack chaque NON clic sur le contrle Rating. Permet dinitialiser une note par dfaut ou bien de rcuprer NON la notation dans du code behind. Permet de dfinir le nombre dtoiles afficher. NON Permet de mettre la notation en lecture seule. NON Permet dapplique un style pour laffichage des toiles. OUI Permet dapplique un style pour laffichage des toiles sur OUI lesquelles on a cliqu. Permet dapplique un style pour laffichage des toiles OUI remplies. Permet dapplique un style pour laffichage des toiles vides OUI Permet de dfinir comment les toiles vont saligner : Vertical NON ou Horizontal (Horizontal par dfaut). Permet de dfinir le sens de notation : de gauche droite (par NON dfaut), de droite gauche, de haut en bas ou de bas en haut. Permet de crer un vnement gr en code behind lorsque NON lon change son rating. Permet de dfinir un paramtre personnalis utilis lors dun NON CallBack.
5
Exemple dutilisation : Nous allons utiliser le contrle Rating pour noter la prfrence dutilisation de Visual Studio. Puis dans du code Behind nous rcuprerons la notation pour lassocier un texte de rponse.
66
ASP.NET <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <table> <tr> <td> A quel point aimez vous utiliser Visual Studio ? </td> <td> <ajaxtoolkit:Rating ID="Rating1" runat="server" StarCssClass="ratingStar" FilledStarCssClass="filledRatingStar" EmptyStarCssClass="emptyRatingStar" WaitingStarCssClass="savedRatingStar"> </ajaxtoolkit:Rating> </td> </tr> </table> <br /> <asp:Button ID="BtnSendRating" runat="server" Text="Valider" onclick="BtnSendRating_Click" /> <br /> <br /> <asp:Label ID="LblGetRating" runat="server" Text=""></asp:Label> </ContentTemplate> </asp:UpdatePanel>
C# protected void BtnSendRating_Click(object sender, EventArgs e) { string howMuch = " Je ne sais pas."; switch (Rating1.CurrentRating) { case 1: howMuch = " Pas du tout !"; break; case 2: howMuch = " Un peu."; break; case 3: howMuch = " Oui."; break; case 4: howMuch = " Oui beaucoup."; break; case 5: howMuch = " Je n'utilise que a."; break; } LblGetRating.Text = "Aimez-vous Visual Studio ?" + howMuch + "</b>"; }
67
VB.NET Protected Sub Submit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Dim howMuch As String = " Je ne sais pas." Select Case Rating1.CurrentRating Case 1 howMuch = " Pas du tout !" Case 2 howMuch = " Un peu." Case 3 howMuch = " Oui." Case 4 howMuch = " Oui beaucoup." Case 5 howMuch = " Je n'utilise que a." End Select LblGetRating.Text = "Aimez-vous Visual Studio ?<b>" + howMuch + "</b>" End Sub
Aprs validation, le texte change en fonction de votre notation.
4.4 ReorderList
Dfinition : Le ReorderList nous permet de crer une liste dlments que lon va pouvoir organiser selon notre prfrence. De plus, ce contrle cre notre liste partir dlments contenus dans une base de donnes.
Proprit : Nom DataSourceID DataKeyField ItemInsertLocation DragHandleAlignment AllowReorder ItemTemplate Description Permet de lier le ReorderList un SqlDataSource afin de remplir notre liste. Permet dindiquer le nom de la colonne en cl primaire Permet de dfinir o un nouvel va sinsrer (au dbut ou la fin. Permet de dfinir o se situera le bouton de dplacement dun lment de la liste. Permet dautoriser/interdire la rorganisation de la liste (prend true/false en paramtre). Permet de dfinir le modle daffichage des lments de la liste. Obligatoire OUI OUI NON NON NON OUI
68
EditItemTemplate ReorderTemplate InsertItemTemplate DragHandleTemplate EmptyListTemplate PostBackOnReorder
Permet de dfinir le modle daffichage des lments de la liste lors dune dition dun lment. Permet de dfinir le modle daffichage dun nouvel emplacement lors du dplacement dun lment de la liste. Permet de dfinir le modle daffichage des lments de la liste lors de lajout dun lment. Permet de dfinir le modle daffichage lors du dplacement dun lment de la liste. Permet de dfinir le modle daffichage pour une liste vide. Permet de dfinir si un PostBack doit tre effectu aprs une modification de liste (prend true/false en paramtre)
NON OUI NON OUI NON OUI
Exemple dutilisation : Dans cet exemple, nous allons crer une table contenant quelques plats cuisins, et donner la possibilit de rorganiser une liste dlments contenant nos plats, selon notre prfrence. Voici comment est dfinie notre table que nous appellerons FavoriteFood :
Remarque : LID est en auto-incrmentation. Voici les donnes contenu dans cette table :
Voici le code source de cet exemple :

ASP.NET <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div> <h2>Les plats que je prfre :</h2> <br /> <ajaxtoolkit:ReorderList ID="ReorderList1" runat="server" PostBackOnReorder="false" DragHandleAlignment="Left" ItemInsertLocation="End" DataKeyField="ID" SortOrderField="Preference" Width="500" DataSourceID="SqlDataSource1"> <ItemTemplate> <div style="border-style:solid; border-color:Gray">
69

<asp:Label ID="Label2" runat="server" Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Plat"))) %>' /> <asp:Label ID="Label1" runat="server" Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Description", " - {0}"))) %>' /> </div> </ItemTemplate> <ReorderTemplate> <asp:Panel runat="server" ID="Panel1" CssClass="reorderCue" /> </ReorderTemplate> <DragHandleTemplate> <div class="dragHandle"> </div> </DragHandleTemplate> <InsertItemTemplate> <table> <tr> <th>Nom du plat :</th> <th>Descprition :</th> <th></th> </tr> <tr> <td><asp:TextBox ID="TxtPlat" runat="server" Text='<%# Bind("Plat") %>' /></td> <td><asp:TextBox ID="TextDescription" runat="server" Text='<%# Bind("Description") %>' /></td> <td><asp:Button ID="Button1" runat="server" Text="Ajouter" CommandName="Insert" /></td> </tr> </table> </InsertItemTemplate> </ajaxtoolkit:ReorderList> </div> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConflictDetection="CompareAllValues" ConnectionString="<%$ ConnectionStrings:AjaxToolkitDBConnectionString %>" DeleteCommand="DELETE FROM [FavoriteFood] WHERE [ID] = @original_ID AND [Plat] = @original_Plat AND [Description] = @original_Description AND [Preference] = @original_Preference" InsertCommand="INSERT INTO [FavoriteFood] ([Plat], [Description], [Preference]) VALUES (@Plat, @Description, @Preference)" OldValuesParameterFormatString="original_{0}" SelectCommand="SELECT * FROM [FavoriteFood]" UpdateCommand="UPDATE [FavoriteFood] SET [Plat] = @Plat, [Description] = @Description, [Preference] = @Preference WHERE [ID] = @original_ID AND [Plat] = @original_Plat AND [Description] = @original_Description AND [Preference] = @original_Preference"> <DeleteParameters> <asp:Parameter Name="original_ID" Type="Int32" /> <asp:Parameter Name="original_Plat" Type="String" /> <asp:Parameter Name="original_Description" Type="String" /> <asp:Parameter Name="original_Preference" Type="Int32" /> </DeleteParameters> <UpdateParameters> <asp:Parameter Name="Plat" Type="String" /> <asp:Parameter Name="Description" Type="String" /> <asp:Parameter Name="Preference" Type="Int32" /> <asp:Parameter Name="original_ID" Type="Int32" /> <asp:Parameter Name="original_Plat" Type="String" /> <asp:Parameter Name="original_Description" Type="String" /> <asp:Parameter Name="original_Preference" Type="Int32" /> </UpdateParameters> <InsertParameters> <asp:Parameter Name="Plat" Type="String" /> <asp:Parameter Name="Description" Type="String" /> <asp:Parameter Name="Preference" Type="Int32" /> </InsertParameters> </asp:SqlDataSource> </form>
70
Ajax Control Toolkit Remarque : Le contrle SqlDataSource doit tre adapt la base de donnes. Il ne faut pas oublier que le contenu est gnr tout seul via la configuration de notre source de donnes en mode Design. Voici un aperu de cet exemple :
4.5 Tabs
Dfinition : Le contrle Ajax Tabs, va vous permettre dinsrer des lments de votre page dans plusieurs onglets cliquables.
Proprits : Pour le TabContainer (le conteneur donglet) : Nom ActiveTabChanged CssClass ActiveTabIndex Height/Width ScrollBars TabStripPlacement Description Obligatoire Mthode appel lors dun changement donglet aprs un NON PostBack. Permet dappliquer un style nos onglets. NON Permet de dfinir quel onglet on affiche en premier au NON chargement de la page. Permet de dfinir la hauteur/largeur maximum de notre NON conteneur par onglet. Permet de dfinir si on affiche la barre de dfilement ou non NON et de quelle manire. Permet de dfinir ou vont safficher les onglets : en haut, en NON bas ( TOP par dfaut).
Pour le TabPanel (longlet) : Nom Enabled HeaderText HeaderTemplate Description Permet dactiver ou non laffichage de longlet. Permet de dfinir le texte affich en titre donglet. Permet de dfinir le texte affich en titre donglet via ce Obligatoire NON OUI NON
71
ContentTemplate
contrle (Ex : <HeaderTemplate>Titre</HeaderTemplate>). La balise ContentTemplate permet dajouter du contenu votre onglet.
OUI
Exemple dutilisation : Dans cet exemple nous allons crer un mini-formulaire basique, et rcuprer les informations pour les afficher dans un contrle Label.
72
ASP.NET <ajaxtoolkit:TabContainer ID="TabContainer1" runat="server" Width="340px" ActiveTabIndex="2"> <ajaxtoolkit:TabPanel runat="server" ID="Tab1" HeaderText="Question 1"> <ContentTemplate> <table> <tr> <td> Nom : </td> <td> <asp:TextBox runat="server" ID="TxtNom" /> </td> </tr> <tr> <td> Prnom : </td> <td> <asp:TextBox runat="server" ID="TxtPrenom" /> </td> </tr> </table> </ContentTemplate> </ajaxtoolkit:TabPanel> <ajaxtoolkit:TabPanel runat="server" ID="Tab2" HeaderText="Question 2"> <ContentTemplate> <table> <tr> <td> Age : </td> <td> <asp:TextBox runat="server" ID="TxtAge" /> </td> </tr> <tr> <td> Ville : </td> <td> <asp:TextBox runat="server" ID="TxtVille" /> </td> </tr> </table> </ContentTemplate> </ajaxtoolkit:TabPanel> <ajaxtoolkit:TabPanel runat="server" ID="Tab3" HeaderText="rsultat"> <ContentTemplate> Cliquez pour terminer :<br /> <asp:Button ID="BtnSendInfo" runat="server" Text="Envoyer" onclick="BtnSendInfo_Click" /> </ContentTemplate> </ajaxtoolkit:TabPanel> </ajaxtoolkit:TabContainer> <br /> <asp:Label ID="LblGetInfo" runat="server"></asp:Label> C# protected void BtnSendInfo_Click(object sender, EventArgs e) { LblGetInfo.Text = "Vous vous appelez " + TxtNom.Text + " " + TxtPrenom.Text + ", vous avez " + TxtAge.Text + " ans et vous habitez " + TxtVille.Text + "."; }
73
VB.NET Protected Sub BtnSendInfo_Click(ByVal sender As Object, ByVal e As EventArgs) Handles BtnSendInfo.Click LblGetInfo.Text = "Vous vous appelez " + TxtNom.Text + " " + TxtPrenom.Text + ", vous avez " + TxtAge.Text + " ans et vous habitez " + TxtVille.Text + "." End Sub
Voici un aperu de cet exemple aprs validation du formulaire :
74
5 Conclusion
Au travers des diffrents exemples de contrles ACT prsents dans ce cours, vous avez pu observer, quavec un faible effort de dveloppement, il tait possible de crer interfaces graphiques conviviales dans vos applications Web. Aussi, en tant que projet Open Source, il est tout fait possible de rcuprer leurs codes sources, pour pouvoir les tudier davantage. Et en approfondissant vos connaissances dans Microsoft ASP .NET Ajax, il vous sera possible de crer vous-mme vos propres extendeurs en AJAX.

Ajax Control Toolkit

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ajax Control Toolkit

Uploaded by

Copyright:

Available Formats

Ajax Control Toolkit

GERAUD Cdric BEDE Nicolas BASCANS Jrmy HEROGUEL Quentin