AJAX signifie JavaScript et XML asynchrones. Il s'agit d'une technologie multiplateforme qui accélère les temps de réponse. Les contrôles du serveur AJAX ajoutent un script à la page, qui est exécuté et traité par le navigateur.
Cependant, comme les autres contrôles serveur ASP.NET, ces contrôles serveur AJAX peuvent être associés à des méthodes et à des gestionnaires d'événements, qui sont tous gérés côté serveur.
La boîte à outils de contrôle de Visual Studio IDE contient un ensemble de composants de contrôle appelé « AJAX ».
Le contrôle ScriptManager est le contrôle le plus important et doit être présent sur la page pour que les autres contrôles fonctionnent.
Il a une syntaxe de base :
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
Si vous créez un « site compatible Ajax » ou ajoutez un « formulaire Web AJAX » à partir de la boîte de dialogue « Ajouter un élément », la page Web se formera automatiquement et contiendra le contrôle du gestionnaire de script. Le contrôle ScriptManager prend en charge les scripts côté client pour tous les contrôles côté serveur.
Le contrôle UpdatePanel est un contrôle conteneur et est dérivé de la classe Control. Il fonctionne comme un conteneur pour les contrôles enfants qu'il contient et ne possède pas sa propre interface. Lorsqu'un de ses contrôles déclenche une soumission, le UpdatePanel intervient pour démarrer de manière asynchrone et mettre à jour une partie de la page.
Par exemple, si un contrôle de bouton se trouve dans un panneau de mise à jour et que vous cliquez dessus, seuls les contrôles du panneau de mise à jour seront affectés et les contrôles des autres parties de la page ne seront pas affectés. C’est ce qu’on appelle un retour de validation partielle ou un retour de validation asynchrone.
Ajoutez un formulaire Web AJAX à votre application. Il contient le contrôle du gestionnaire de script par défaut. Insérez un panneau de mise à jour. Placez un contrôle de bouton et une étiquette d’étiquette à l’intérieur du contrôle du panneau de mise à jour. Placez un autre ensemble de boutons et d'étiquettes à l'extérieur du panneau.
La vue de conception ressemble à ceci :
Le fichier de ressources ressemble à ceci :
<form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server" /> </div> <asp:UpdatePanel ID="UpdatePanel1" runat="server" > <ContentTemplate> <asp:Button ID="btnpartial" runat="server" onclick="btnpartial_Click" Text="Partial PostBack"/> <br /> <br /> <asp:Label ID="lblpartial" runat="server"></asp:Label> </ContentTemplate> </asp:UpdatePanel> <p> </p> <p>En dehors du panneau de mise à jour</p> < p> <asp:Button ID="btntotal" runat="server" onclick="btntotal_Click" Text="Total PostBack" /> </p> <asp:Label ID="lbltotal" runat="serveur"></asp:Label></form>
Les contrôles de bouton ont tous le même code pour le gestionnaire de temps :
string time = DateTime.Now.ToLongTimeString();lblpartial.Text = "Affichage de l'heure depuis le panneau" + heure;lbltotal.Text = "Affichage de l'heure depuis l'extérieur" + heure ;
Notez que lorsque la page est exécutée, si vous cliquez sur le bouton de soumission totale, toutes les balises seront mises à jour avec l'heure de mise à jour, mais si vous cliquez sur le bouton de soumission partielle, seules les balises du panneau de mise à jour seront mises à jour.
| propriété | décrire |
|---|---|
| Enfants comme déclencheurs | Cette propriété indique si le retour provient d'un contrôle enfant, ce qui entraînera l'actualisation du panneau de mise à jour. |
| Modèle de contenu | Il s'agit du modèle de contenu et définit ce qui apparaît dans le panneau de mise à jour lorsqu'il apparaît. |
| ContenuModèleConteneur | Récupère un objet conteneur de modèle créé dynamiquement et est utilisé pour ajouter par programme des contrôles enfants. |
| IsInPartialRendering | Indique si le panneau est mis à jour dans le cadre du retour de validation partielle. |
| Mode de rendu | Afficher le mode de rendu. Les modes disponibles sont Block et Inline. |
| Mode de mise à jour | Obtient ou définit le mode de rendu en déterminant certaines conditions. |
| Déclencheurs | Définissez des objets déclencheurs de collection, chacun correspondant à un événement qui déclenche la mise à jour automatique du panneau. |
Le tableau suivant présente les méthodes du contrôle du panneau de mise à jour :
| méthode | décrire |
|---|---|
| CreateContentTemplateContainer | Un objet Control est créé pour servir de conteneur pour les contrôles enfants qui définissent le contenu du contrôle UpdatePanel. |
| CréerControlCollection | Renvoie une collection de tous les contrôles contenus dans le contrôle UpdatePanel |
| Initialiser | Initialise la collection de déclencheurs de contrôle UpdatePanel si le dessin de page partielle est en cours d'exécution. |
| Mise à jour | Provoque la mise à jour du contenu du contrôle UpdatePanel. |
Le comportement du panneau de mise à jour dépend des valeurs de la propriété UpdateMode et de la propriété ChildrenAsTriggers.
| méthode | décrire | Influence |
|---|---|---|
| Toujours | FAUX | Paramètre illégal. |
| Toujours | Vrai | Le UpdatePanel se met à jour si la page entière est mise à jour ou si un contrôle enfant au-dessus revient. |
| Conditionnel | FAUX | Le UpdatePanel se met à jour si la page entière est mise à jour ou si un contrôle déclenché en dehors de celle-ci démarre une mise à jour. |
| Conditionnel | Vrai | UpdatePanel se met à jour si la page entière est mise à jour ou si un contrôle enfant situé au-dessus revient ou si un contrôle déclencheur en dehors de celle-ci démarre une mise à jour. |
Le contrôle UpdateProgress fournit des commentaires du navigateur lorsqu'un ou plusieurs contrôles du panneau de mise à jour sont mis à jour. Par exemple, attendre une réponse du serveur lorsqu'un utilisateur se connecte ou lors d'un travail orienté base de données.
Il fournit une confirmation visuelle telle que "Chargement de la page..." que le travail est en cours de traitement.
La syntaxe du contrôle UpdateProgress est :
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="true" AssociatedUpdatePanelID="UpdatePanel1" > <ProgressTemplate> Chargement... </ProgressTemplate></asp:UpdateProgress>
L'extrait ci-dessus montre un message simple avec une balise ProgressTemplate. Cependant, il peut s'agir d'une image ou d'un autre contrôle associé. Le contrôle UpdateProgress affiche chaque retour asynchrone, sauf s'il est spécifié en tant que panneau de mise à jour distinct à l'aide de la propriété AssociatedUpdatePanelID.
Le tableau suivant présente les propriétés du contrôle de progression de la mise à jour.
| propriété | décrire |
|---|---|
| AssociatedUpdatePanelID | Obtient et définit l'ID du panneau de mise à jour avec le contrôle auquel ce contrôle est associé. |
| Attributs | Obtient et définit la propriété CSS (cascading style sheet) du contrôle UpdateProgress. |
| AfficherAprès | Obtient et définit le temps en millisecondes après l'affichage du modèle de traitement. La valeur par défaut est 500. |
| Disposition dynamique | Indique si les modèles de processus sont affichés de manière dynamique. |
| Modèle de progression | Indique que le modèle est affiché lors d'un retour de validation asynchrone qui prend plus de temps que le temps DisplayAfter. |
Le tableau suivant présente les méthodes de contrôle de la progression de la mise à jour :
| méthode | décrire |
|---|---|
| GetScriptDescriptors | Renvoie une liste de composants, de comportements et de contrôles côté client requis pour la fonctionnalité côté client du contrôle UpdateProgress. |
| GetScriptRéférences | Renvoie une liste de contrôles UpdateProgress dont dépendent les scripts clients. |
Le contrôle de la minuterie est utilisé pour initialiser automatiquement les retours de soumission. Cela peut être fait de deux manières :
(1) Définissez la propriété Triggers du contrôle UpdatePanel.
<Déclencheurs> <asp:AsyncPostBackTrigger ControlID="btnpanel2" EventName="Click" /></Triggers>
(2) Placez un contrôle timer directement à l'intérieur du UpdatePanel comme déclencheur pour un sous-contrôle. Une seule minuterie peut servir de déclencheur pour plusieurs UpdatePanels.
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always"> <ContentTemplate> <asp:Timer ID="Timer1" runat="server" Interval="1000"> </asp:Timer> < asp:Label ID="Label1" runat="server" Height="101px" > </asp:Label> </ContentTemplate></asp:UpdatePanel>