Script client dans les pages Web ASP.NET

Article
10/22/2014

Mise à jour : novembre 2007

Les applications Web ASP.NET ne sont pas limitées aux outils serveur et aux langages. Vous pouvez inclure ECMAScript (JavaScript ou JScript) dans vos pages Web ASP.NET pour créer des fonctionnalités riches basées sur un navigateur. ASP.NET offre une large gamme de fonctionnalités pour la prise en charge des scripts clients.

Une option consiste à créer et ajouter des extraits de code individuels de script client aux pages Web ASP.NET pour prendre en charge le comportement du navigateur que vous concevez pour votre application. Cette option est utile si vous souhaitez inclure uniquement quelques éléments de code Javascript ou si vous travaillez avec le code Javascript que vous possédez déjà. Cette option permet également de faire en sorte que la taille de vos pages Web ASP.NET soit minimale.

Vous pouvez également tirer parti des puissantes fonctionnalités AJAX d'ASP.NET. Ces fonctionnalités AJAX incluent une infrastructure complète qui prend en charge les éléments suivants :

Programmation orientée objet dans JavaScript.
Publications (postback) asynchrones.
Services Web d'une application pour l'authentification et les profils.
Contrôles serveur qui gèrent le script client, avec prise en charge étendue du débogage et de la trace.

L'utilisation des fonctionnalités ASP.NET AJAX vous permet de tirer parti des fonctionnalités JavaScript avec moins de codage manuel. Vous disposez de fonctionnalités JavaScript étendues et d'une infrastructure permettant de créer des fonctionnalités clientes intégrées dans ASP.NET.

Cette rubrique fournit une vue d'ensemble d'options permettant d'ajouter le script client aux pages Web ASP.NET. Elle contient les sections suivantes :

Scénarios
Insertion d'un script client personnalisé dans les pages ASP.NET
Extension de JavaScript à l'aide des fonctionnalités ASP.NET AJAX
Contrôles serveur ASP.NET qui dépendent d'un script client
Ajout d'événements de script client aux contrôles serveur ASP.NET
Identification des contrôles serveur dans un script client
Déclenchement d'événements Click clients pour des contrôles serveur
Communication entre le script client et le code serveur
Création de composants de script client
Ajout des fonctionnalités clientes aux contrôles serveur

Scénarios

Utilisez le script client lorsque vous souhaitez effectuer les opérations suivantes :

Améliorer l'expérience utilisateur avec des pages Web plus riches, plus réactives aux actions utilisateur et qui se comportent comme des applications clientes traditionnelles. Par exemple, vous pouvez utiliser le script client pour vérifier la saisie au clavier de chaque caractère dans une zone de texte.
Ajouter des fonctionnalités AJAX aux pages Web ASP.NET, ce qui vous permet d'effectuer les opérations suivantes :
- Limiter l'actualisation de pages entières et éviter le scintillement des pages en manipulant dynamiquement les éléments DOM sur la page.
- Mettre à jour et gérer l'interface utilisateur sans effectuer de publication (postback) sur le serveur.
- Organiser votre code sous forme de composants clients. Les composants clients sont des objets réutilisables qui encapsulent du code JavaScript basé sur Microsoft AJAX Library. Les composants clients peuvent également être gérés par des contrôles personnalisés côté serveur ou associés à des contrôles serveur existants pour ajouter des fonctionnalités clientes.

Insertion d'un script client personnalisé dans les pages ASP.NET

Étant donné que les pages Web ASP.NET ne rendent que le balisage HTML, vous pouvez y ajouter votre propre script client. Le script client est pris en charge dans les pages ASP.NET dans la mesure où le navigateur qui demande la page le prend en charge. Si la page s'exécute sur le navigateur d'un téléphone portable ou d'un autre périphérique, le degré de prise en charge du script client varie en fonction de ce navigateur.

Plusieurs options vous permettent d'insérer un script client dans les pages ASP.NET :

Vous pouvez inclure un script client de manière statique dans un bloc de script qui inclut du code ou qui utilise un attribut include pour référencer un fichier JavaScript (.js). Utilisez cette option pour insérer des blocs de scripts ou des fichiers JavaScript qui contiennent un script client que vous ne devez pas créer dynamiquement et qui ne nécessitent pas de fonctionnalités AJAX supplémentaires fournies par Microsoft AJAX Library.
Vous pouvez créer et ajouter dynamiquement le script client à la page Web ASP.NET en utilisant la classe ClientScriptManager. Utilisez cette option lorsque vous souhaitez créer des scripts qui dépendent d'informations uniquement disponibles au moment de l'exécution.
Si vous envisagez de tirer parti des fonctionnalités AJAX d'ASP.NET, vous pouvez gérer des fichiers de script client à l'aide du contrôle serveur ScriptManager. Le contrôle serveur ScriptManager garantit également que Microsoft AJAX Library est chargé sur le navigateur avant l'exécution de vos scripts. Pour plus d'informations, consultez Vue d'ensemble d'ASP.NET AJAX.

Insertion de blocs statiques de script client

Vous pouvez ajouter des blocs de script à une page ASP.NET, tout comme vous le feriez avec n'importe quelle page HTML. Vous pouvez utiliser le script client pour écrire des gestionnaires d'événements gérant des événements clients tels que l'événement onload de la page. Lorsqu'une page ASP.NET s'exécute dans le navigateur, les éléments de balisage de la page sont adressables dans le script client. Ils déclenchent tous les événements clients qu'ils génèrent dans une page HTML.

Remarque :
Vous pouvez référencer des contrôles serveur ASP.NET dans le script client. Pour plus d'informations, consultez Identification des contrôles serveur dans un script client, plus loin dans cette rubrique.

Une page Web ASP.NET peut également accéder à un fichier de script en y faisant référence dans l'attribut src d'une balise <script>, comme dans l'exemple suivant :

<script type="text/javascript" src="MyScript.js"></script>

Le maintien des scripts clients dans les fichiers .js externes plutôt que dans les pages elles-mêmes permet d'organiser vos scripts. Cela simplifie également leur gestion du contrôle de version et leur partage entre plusieurs pages.

Les fichiers .js externes sont mis en cache par le navigateur, tout comme les pages Web et les images. Une fois que le script a été chargé par le navigateur en tant que fichier externe, toute autre page Web qui en a besoin peut y accéder dans le cache. Cela permet d'améliorer les performances de l'application Web.

Création dynamique de script client

Dans de nombreux cas, vous pouvez créer le script client de votre page de façon déclarative, en général sous forme de bloc de script. Toutefois, vous pouvez créer le script client dynamiquement. Cette action est utile si le script dépend des informations qui sont uniquement disponibles au moment de l'exécution. Par exemple, vous pouvez insérer le script client dans une page qui affecte un contrôle serveur dont le nom (ID) n'est pas connu avant l'exécution de l'application ou créer un script qui dépend des valeurs que vous obtenez d'un utilisateur.

Vous pouvez créer et insérer le script client dynamiquement dans une page rendue en appelant des méthodes de la classe ClientScriptManager, comme les suivantes :

RegisterClientScriptBlock, qui insère un bloc de script en haut de la page rendue.
RegisterStartupScript, qui insère un bloc de script en bas de la page rendue.

L'exemple suivant indique comment ajouter dynamiquement le script client généré à la page. Le code vérifie si une case à cocher nommée checkDisplayCount est activée. Le cas échéant, le code exécute les tâches suivantes :

Il crée une fonction de script client qui utilise un élément span pour afficher le nombre de caractères dans un contrôle TextBox nommé TextBox1.
Il ajoute un événement client au contrôle TextBox.
Il génère l'élément span.

Le code suppose que la page contient une case à cocher nommée checkDisplayCount dont la propriété AutoPostBack a la valeur true et un contrôle PlaceHolder nommé PlaceHolder1.

Protected Sub Page_Load(ByVal sender As Object, _
        ByVal e As System.EventArgs)
    If checkDisplayCount.Checked Then
        Dim scriptText As String = ""
        scriptText &= "function DisplayCharCount(){"
        scriptText &= "   getElementByID("spanCounter").innerText = " & _
            "document.forms[0].TextBox1.value.length"
        scriptText &= "}"
        ClientScriptManager.RegisterClientScriptBlock(Me.GetType(), _
            "CounterScript", scriptText, True)
        TextBox1.Attributes.Add("onkeyup", "DisplayCharCount()")
        Dim spanLiteral As New LiteralControl()
        spanLiteral.Text = "<span id=""spanCounter""></span>"
        PlaceHolder1.Controls.Add(spanLiteral)
    End If
End Sub

void Page_Load(object sender, EventArgs e)
{
    if(checkDisplayCount.Checked)
    {
        String scriptText = "";
        scriptText += "function DisplayCharCount(){";
        scriptText += "   spanCounter.innerText = " + 
            " document.forms[0].TextBox1.value.length";
        scriptText += "}";
        ClientScriptManager.RegisterClientScriptBlock(this.GetType(), 
           "CounterScript", scriptText, true);
        TextBox1.Attributes.Add("onkeyup", "DisplayCharCount()");
        LiteralControl spanLiteral = new 
            LiteralControl("<span id=\"spanCounter\"></span>");
        PlaceHolder1.Controls.Add(spanLiteral);
    }
}

Pour plus d'informations, consultez Comment : ajouter de manière dynamique un script client à des pages Web ASP.NET.

Pour les méthodes de classe ClientScriptManager, indiquez un type auquel est associé le bloc de script, puis attribuez une clé à ce dernier. Le fait d'indiquer un type permet d'éviter les collisions si une page et des contrôles (qu'il s'agisse de contrôles personnalisés ou de contrôles utilisateur) ajoutent des blocs de script à la même page. L'utilisation d'une clé permet d'éviter les doublons. Si vous appelez l'une des méthodes pour ajouter le script alors qu'un script portant la même clé et le même type existe déjà, le script n'est pas ajouté une nouvelle fois.

Le type et la clé que vous fournissez contribuent à éviter une duplication inutile. En général, vous n'avez donc pas besoin de déterminer explicitement si un bloc de script existe déjà. Il reste toutefois utile dans votre application de vérifier la présence de blocs de script existants. Vous pouvez pour cela appeler les méthodes suivantes :

Ajout de script client à l'aide du contrôle ScriptManager

Si vous utilisez des fonctionnalités ASP.NET AJAX, le contrôle ScriptManager vous permet d'ajouter des fichiers de script dans une page. Cela inclut des fichiers de script statiques (fichiers .js) sur le disque et des fichiers de script incorporés sous forme de ressources dans un assembly. Vous pouvez spécifier de façon déclarative des fichiers de script dans le contrôle. Vous pouvez également utiliser les méthodes d'inscription du contrôle ScriptManager qui vous permettent de gérer des fichiers de script client existants par programme et d'utiliser des scripts pour la prise en charge de la mise à jour de pages partielles.

Pour une vue d'ensemble du contrôle ScriptManager, consultez Vue d'ensemble du contrôle ScriptManager. Pour plus d'informations sur l'incorporation d'un fichier JavaScript en tant que ressource dans un assembly et sur son utilisation dans une page Web, consultez Procédure pas à pas : incorporation d'un fichier JavaScript en tant que ressource dans un assembly.

Remarque :
Si vous utilisez des fonctionnalités AJAX clientes d'ASP.NET et non des fonctionnalités serveur, utilisez les méthodes de la classe ClientScriptManager pour insérer des scripts dans une page Web ASP.NET. Par exemple, si vous n'utilisez pas le contrôle UpdatePanel ou les fonctionnalités de localisation pour les scripts, vous n'avez pas besoin du contrôle ScriptManager. Par conséquent, vous ne pouvez pas appeler ses méthodes pour insérer le script client dans la page. L'utilisation des méthodes de la classe ClientScriptManager est habituellement plus efficace que celle des méthodes du contrôle ScriptManager. En effet, les méthodes de la classe ClientScriptManager ne nécessitent pas de traitement supplémentaire pour les fonctionnalités serveur prises en charge par le contrôle ScriptManager. Si vous devez créer le script dynamiquement (au lieu de gérer simplement le script existant), utilisez la classe ClientScriptManager pour insérer le script client dans une page. Par exemple, utilisez la classe ClientScriptManager si vous souhaitez créer le script client par programme à partir des informations qu'un fichier de script préexistant ne peut pas référencer.

Si vous utilisez des fonctionnalités AJAX clientes d'ASP.NET et non des fonctionnalités serveur, utilisez les méthodes de la classe ClientScriptManager pour insérer des scripts dans une page Web ASP.NET. Par exemple, si vous n'utilisez pas le contrôle UpdatePanel ou les fonctionnalités de localisation pour les scripts, vous n'avez pas besoin du contrôle ScriptManager. Par conséquent, vous ne pouvez pas appeler ses méthodes pour insérer le script client dans la page. L'utilisation des méthodes de la classe ClientScriptManager est habituellement plus efficace que celle des méthodes du contrôle ScriptManager. En effet, les méthodes de la classe ClientScriptManager ne nécessitent pas de traitement supplémentaire pour les fonctionnalités serveur prises en charge par le contrôle ScriptManager. Si vous devez créer le script dynamiquement (au lieu de gérer simplement le script existant), utilisez la classe ClientScriptManager pour insérer le script client dans une page. Par exemple, utilisez la classe ClientScriptManager si vous souhaitez créer le script client par programme à partir des informations qu'un fichier de script préexistant ne peut pas référencer.

Extension de JavaScript à l'aide des fonctionnalités ASP.NET AJAX

ASP.NET prend en charge des fonctionnalités AJAX qui vous permettent d'utiliser le script client pour ajouter des fonctionnalités riches à une page Web ASP.NET. Cela inclut des publications (postback) asynchrones, une interface utilisateur très réactive, etc. Les fonctionnalités AJAX sont implémentées à l'aide de Microsoft AJAX Library, qui se compose de bibliothèques de script client qui incorporent des technologies utilisant ECMAScript (JavaScript) et du HTML dynamique (DHTML) sur plusieurs navigateurs. Les fonctionnalités AJAX sont intégrées à la plateforme de développement serveur d'ASP.NET.

Vous pouvez utiliser le système de type Microsoft AJAX Library, les fonctionnalités orientées objet et les extensions aux objets JavaScript pour fournir les fonctionnalités suivantes en vue de créer le script client personnalisé :

Espaces de noms
Héritage
Interfaces
Énumérations
Réflexion
Débogage de programmes d'assistance
Traçage
Gestion des exceptions typées
Méthodes d'assistance pour les chaînes et les tableaux.

Remarque :

Vous pouvez utiliser Microsoft AJAX Library même si vous n'envisagez pas d'utiliser des fonctionnalités serveur AJAX d'ASP.NET.

Remarque :
Vous pouvez utiliser Microsoft AJAX Library même si vous n'envisagez pas d'utiliser des fonctionnalités serveur AJAX d'ASP.NET.

Pour plus d'informations sur la manière dont Microsoft AJAX Library étend JavaScript, consultez les rubriques suivantes :

Compatibilité des fonctionnalités AJAX avec le navigateur

La couche de compatibilité des navigateurs de Microsoft AJAX Library offre une compatibilité de scripts AJAX entre les navigateurs les plus fréquemment utilisés (notamment Microsoft Internet Explorer, Mozilla Firefox et Apple Safari). Cela vous permet d'écrire le même script indépendamment du navigateur cible. Pour plus d'informations, consultez Vue d'ensemble d'ASP.NET AJAX.

Contrôles serveur ASP.NET qui dépendent d'un script client

Les fonctionnalités de certains contrôles serveur ASP.NET dépendent du script client. Par exemple, le contrôle LinkButton nécessite la prise en charge de son comportement de publication (postback) par le script client. Le script client requis pour les contrôles serveur Web ASP.NET est automatiquement ajouté à la page lorsque celle-ci est rendue. Le script client généré pour ces contrôles est indépendant des scripts client que vous pouvez créer.

Pour plus d'informations, consultez Contrôles serveur Web ASP.NET qui utilisent un script client.

Ajout d'événements de script client aux contrôles serveur ASP.NET

Les contrôles ASP.NET sont restitués sous forme d'éléments dans la page. (Le nombre exact d'éléments restitués par un contrôle dépend du langage de balisage de la page, qui peut inclure le langage HTML, XHTML ou autre.) Vous pouvez donc ajouter la gestion d'événements de script client aux contrôles, comme vous le feriez pour n'importe quel élément de page. Dans certains cas, vous devrez néanmoins savoir comment le contrôle rend sa sortie et quels attributs il se réserve.

Pour plus d'informations, consultez Comment : ajouter des événements de script client à des contrôles serveur Web ASP.NET.

Ajout de gestionnaires d'événements client de manière déclarative

Dans le balisage des contrôles serveur ASP.NET, les valeurs de propriété se définissent à l'aide d'attributs. Par exemple, vous pouvez créer le balisage suivant pour définir la propriété Text d'un contrôle TextBox :

<asp:textbox id="TextBox1"  text="Sample Text" />

Note de sécurité :
Un TextBox accepte les entrées d'utilisateur, ce qui constitue une menace de sécurité potentielle. Par défaut, les pages Web ASP.NET vérifient que les entrées d'utilisateur n'incluent pas de script ou d'éléments HTML. Pour plus d'informations, consultez Vue d'ensemble des attaques de script.

Si vous incluez un attribut qui ne mappe pas à une propriété du contrôle, ASP.NET ignore l'attribut pendant le traitement du serveur. Il le passe tel quel au navigateur, dans le balisage généré par le contrôle. Par exemple, le contrôle TextBox n'a aucune propriété nommée onkeyup. Par conséquent, si vous incluez un attribut onkeyup au balisage d'un contrôle TextBox, cet attribut est passé au navigateur. Ce comportement vous permet d'ajouter des liaisons d'événements aux contrôles serveur en les déclarant dans le balisage. Par exemple, le balisage suivant d'un contrôle TextBox a pour résultat de faire apparaître dans la zone de texte la longueur du texte actuel dans un élément span nommé spanCounter lorsque l'utilisateur appuie sur une touche dans la zone de texte :

<asp:textbox id="TextBox1"  text="Sample Text" 
  onkeyup="spanCounter.innerText=this.value.length;" />

L'événement peut aussi appeler une méthode définie dans un script client ailleurs dans la page :

<asp:textbox id="TextBox1"  text="Sample Text" 
  onkeyup="DisplayCount(this);" />

Notez que le langage que vous utilisez pour le code serveur (Visual Basic ou C#) n'a aucune incidence sur le script client, qui s'écrit toujours en ECMAScript (JavaScript ou JScript).

Pour plus d'informations, consultez Comment : ajouter des événements de script client à des contrôles serveur Web ASP.NET.

Ajout d'attributs au code serveur

En plus d'ajouter de façon déclarative des attributs directs à un contrôle, vous pouvez ajouter des attributs par programme en utilisant du code serveur. Cela s'avère utile si la valeur de l'attribut à ajouter n'est connue qu'au moment de l'exécution. Pour plus d'informations, consultez Comment : définir des attributs HTML pour des contrôles dans les pages Web ASP.NET.

Identification des contrôles serveur dans un script client

Lorsqu'un contrôle serveur ASP.NET est rendu, sa propriété ClientID est rendue dans la page à la fois en tant qu'attribut id et attribut name de l'élément résultant. (La propriété ClientID est générée automatiquement à partir de la propriété ID que vous définissez.) Par exemple, vous pouvez créer le contrôle serveur ASP.NET suivant :

<asp:textbox id="TextBox1"  text="Sample Text" />

La propriété ClientID a la valeur TextBox1 et l'élément résultant dans un navigateur HTML peut se présenter ainsi :

<input name="TextBox1" type="text" value="Sample Text" id="TextBox1" />

Remarque :
L'élément form rend uniquement un attribut ID et non un attribut name.

Vous pouvez par conséquent référencer le contrôle serveur dans un script client à l'aide de ces attributs. Vous devrez en général adresser le contrôle à l'aide d'une référence qualifiée complète dans le script client. Si le contrôle est un enfant de l'élément form de la page, vous référencez généralement le contrôle dans le script client à l'aide d'une syntaxe comparable à celle de l'exemple suivant :

var tb1 = document.getElementById("TextBox1");
tb1.value = "New value";

L'exemple suivant suppose que la valeur form1 a été affectée à l'attribut id de l'élément form de la page.

document.form1.TextBox1.value = "New value";

La syntaxe exacte requise pour référencer un contrôle serveur dépend du contrôle utilisé et varie s'il s'agit d'un enfant d'un autre contrôle. Si vous n'êtes pas sûr de savoir comment référencer un contrôle, il peut s'avérer utile d'exécuter la page, de consulter son code source et de voir comment le contrôle a été rendu.

Référencement de contrôles rendus à l'intérieur d'autres contrôles

Certains contrôles rendent des contrôles enfants dans la page. C'est notamment le cas des contrôles de listes de données tels que les contrôles ListView, GridView, DetailsView, FormView, DataList et Repeater, ainsi que des contrôles utilisateur et des contrôles WebPart.

Dans ces cas, les contrôles enfants ne peuvent pas avoir d'ID uniques. Cela peut être dû au fait que les contrôles enfants sont définis dans un modèle qui génère de nouvelles instances de contrôle pour chaque ligne de données (contrôles de liste de données). Sinon, ceci peut être dû au fait que le contrôle parent peut être ajouté à la page d'une source externe (contrôles utilisateur et contrôles WebPart). Ces contrôles parents sont par conséquent des conteneurs d'attribution de noms (ils implémentent INamingContainer). Un conteneur d'attribution de noms veille à ce que ses contrôles enfants aient des ID uniques dans la page.

Par exemple, vous pouvez créer une propriété ItemTemplate dans le contrôle DataList. Dans le modèle, vous pouvez ajouter un contrôle CheckBox pour lequel vous affectez la valeur checkEnabled à l'ID. Lorsque le contrôle DataList est rendu, un nouveau contrôle checkEnabled est rendu pour chaque élément de données. La page rendue ne doit pas contenir plusieurs instances d'un élément nommé checkEnabled. Par conséquent, le contrôle DataList crée une identité unique pour chacun de ses contrôles enfants.

L'identité unique des contrôles enfants d'un conteneur d'attribution de noms est générée en rendant deux propriétés. Pour chaque contrôle enfant :

La propriété UniqueID du contrôle est rendue comme attribut name.
La propriété ClientID du contrôle est rendue comme attribut id.

Les propriétés ClientID et UniqueID sont basées sur la propriété ID d'origine, modifiée par suffisamment d'informations pour garantir que le résultat dans la page sera unique. La valeur de ClientID (l'attribut id dans l'élément rendu) peut être référencée dans le script client.

Si, dans votre navigateur, vous affichez une page qui contient un conteneur d'attribution de noms, vous pouvez consulter la source de cette page pour y voir les ID uniques générés sous forme d'attributs name et id des contrôles enfants du conteneur d'attribution de noms. Il est néanmoins déconseillé d'utiliser une référence directe aux ID tels que vous les voyez dans le navigateur. La formule utilisée pour générer des ID uniques pour les contrôles enfants peut changer. Cherchez plutôt à obtenir la valeur de la propriété ClientID du contrôle enfant dans le code serveur et utilisez cette valeur pour référencer le contrôle enfant. Par exemple, vous pouvez créer dynamiquement un script client sur votre page. Si le script client référence un contrôle enfant, récupérez la propriété ClientID du contrôle enfant et intégrez-la à votre script dynamique.

Déclenchement d'événements Click clients pour des contrôles serveur

Comme indiqué plus haut, vous pouvez ajouter un événement Click client à la plupart des contrôles serveur ASP.NET en ajoutant l'attribut onclick au balisage du contrôle. Toutefois, certains contrôles réservent l'attribut onclick pour définir la liaison à l'événement serveur. Il s'agit notamment des contrôles Button, LinkButton et ImageButton. Dans ces contrôles, vous ne pouvez pas utiliser de façon déclarative l'attribut onclick pour ajouter un gestionnaire de script client au contrôle.

Vous pouvez ajouter un gestionnaire de script client pour l'événement Click de deux manières :

Donnez à la propriété OnClientClick du contrôle la valeur du script à exécuter. Lorsque le contrôle bouton effectue le rendu, la valeur OnClientClick est transformée en attribut onclick.

Ajoutez par programme un attribut onclick en appelant la méthode Add de la collection Attributes du contrôle.

Remarque :
Vous ne pouvez pas ajouter d'attribut onclick par programme à un contrôle serveur si le contrôle utilise déjà onclick dans le cadre de sa fonctionnalité de base, telle que le LinkButton.

L'exemple de code suivant montre un contrôle Button qui déclenche des événements Click à la fois côté client et serveur :

<asp:button id="Button1" 
   
  OnClientClick="return confirm('Ok to post?')" 
  onclick="Button1_Click" 
  Text="Click!" />

Communication entre le script client et le code serveur

En plus d'utiliser des publications (postback) standard, les pages Web ASP.NET peuvent communiquer de plusieurs façons entre le script client et le code serveur. Les fonctionnalités AJAX d'ASP.NET, telles que le contrôle serveur UpdatePanel, automatisent des mises à jour de pages partielles asynchrones. En outre, ASP.NET AJAX prend en charge l'appel de services Web de façon asynchrone.

Si vous n'utilisez pas de fonctionnalités AJAX d'ASP.NET, vous pouvez appeler directement un rappel client personnalisé et partager des informations entre le navigateur et le serveur à l'aide de différentes méthodes. La section suivante fournit des informations sur les options disponibles.

Appel direct de code serveur à partir du script client

Le script client peut appeler directement le code serveur en implémentant un rappel client. Dans la séquence habituelle des pages Web ASP.NET, chacune des actions de l'utilisateur qui exécute le code serveur nécessite une publication (postback). Toutefois, vous pouvez également appeler le traitement serveur à partir du navigateur, sans effectuer de publication (postback) complète. Dans ce scénario, le navigateur n'envoie pas la page entière au serveur, avant de la recharger lorsque le serveur répond. À la place, le navigateur envoie une petite quantité de données au serveur. Lorsque le serveur envoie une réponse, le script client du navigateur traite les données retournées sans recharger la page. Au cours du traitement serveur, l'état client complet, telles que les variables locales, est conservé. Ce processus, capital lors du rendu de page partielle, s'appelle une publication (postback) asynchrone.

Vous pouvez appeler des méthodes de serveur à partir du script client sans publication (postback) de diverses manières :

Utilisez le contrôle serveur d'ASP.NET UpdatePanel. Ce contrôle fait partie des fonctionnalités AJAX d'ASP.NET. Il vous permet de définir la zone d'une page qui sera actualisée à l'aide d'une mise à jour de page partielle. Lorsque vous utilisez le contrôle UpdatePanel, vous n'avez pas besoin d'écrire un script client vous-même pour appeler des mises à jour de pages partielles asynchrones. Pour plus d'informations, consultez Vue d'ensemble du rendu de page partielle et Vue d'ensemble du contrôle UpdatePanel.
Utilisez la prise en charge d'ASP.NET AJAX relative à la communication de services Web pour écrire un script client qui appelle une méthode de serveur Web. Cette approche est conceptuellement semblable à l'écriture de votre propre rappel de script client pour appeler une méthode de serveur Web. Toutefois, Microsoft AJAX Library gère les détails de l'appel de la méthode de serveur et fournit une bibliothèque de script client plus fiable pour passer et traiter l'appel. Pour plus d'informations, consultez Services Web dans ASP.NET AJAX.
Implémentez un rappel client. Dans ce scénario, vous écrivez le code client qui envoie la requête et qui traite le résultat. L'approche la plus courante consiste à créer une fonction appelante dans le script client et une fonction de rappel appelée lorsque le serveur retourne les résultats. Pour plus d'informations, consultez Implémentation par programme des rappels clients sans publication (postback) dans des pages Web ASP.NET.

Chaque approche présente des avantages. La création de votre propre rappel client entraîne souvent une charge mémoire et une taille de page minimes. L'utilisation du contrôle serveur UpdatePanel vous permet d'implémenter des mises à jour de pages partielles sans écrire vous-même de script client. L'utilisation d'AJAX pour appeler des services Web élimine également une grande partie du script client que vous écririez sinon pour passer des appels de services Web asynchrones.

Partage de données à l'aide d'un contrôle HiddenField

Vous pouvez partager des informations entre le script client et le code serveur en ajoutant un contrôle HiddenField à la page. Vous pouvez référencer le champ masqué dans le script client à l'aide de son ID. Vous pouvez également référencer ce champ masqué dans le code serveur. Cela vous permet de stocker des valeurs dans un bloc de code et de les lire dans l'autre. Pour passer des informations du code serveur au script client, vous pouvez créer par programme un champ masqué à l'aide de la méthode RegisterHiddenField. Cette méthode vous permet de spécifier un ID et valeur pour le champ. Vous pouvez utiliser le champ pour stocker des valeurs dynamiques dans la page de sorte que le script client puisse les lire.

Partage de données à l'aide de cookies

Vous pouvez également partager des valeurs entre le code serveur et le code client à l'aide de cookies. Pour plus d'informations sur l'écriture et la lecture de cookies dans le code serveur, consultez Comment : écrire un cookie et Comment : lire un cookie. Pour plus d'informations sur l'utilisation de JavaScript pour lire et écrire des cookies, consultez JavaScript et cookies (en anglais) sur le site Web MSDN.

Partage de données lors de publications (postback) asynchrones

Si vous utilisez les fonctionnalités AJAX d'ASP.NET, vous pouvez envoyer des données personnalisées sous forme de chaîne du serveur au client lors de publications (postback) asynchrones (rendu de page partiel) en utilisant la méthode RegisterDataItem. La méthode RegisterDataItem vous permet d'utiliser le code serveur pour enregistrer un champ attaché à un contrôle. Dans le navigateur, vous pouvez accéder à la valeur du champ dans le script client à l'aide des objets d'ASP.NET AJAX Sys.WebForms.PageLoadingEventArgs, Sys.WebForms.PageLoadedEventArgs et Sys.WebForms.PageLoadedEventArgs. La méthode RegisterDataItem peut être appelée uniquement lors d'une publication (postback) asynchrone.

Pour plus d'informations sur l'utilisation de la méthode RegisterDataItem pour partager des données entre le serveur et le client, consultez les rubriques suivantes :

Création de composants de script client

Les composants clients sont des objets réutilisables qui encapsulent du code JavaScript basé sur Microsoft AJAX Library. La bibliothèque fournit également les classes de types d'objet client de base suivantes : Component (qui est une classe de base pour les composants non visuels), Control et Behavior. Vous pouvez vous inspirer de ces classes pour fournir des fonctionnalités clientes élaborées, notamment les suivantes :

Accès au cycle de vie d'un composant, de son initialisation à sa suppression. Cela comprend des événements déclenchés lors de la modification des valeurs de propriété.
Représentation d'un élément DOM sous forme d'un objet client qui a de nouvelles fonctionnalités. Cela étend le comportement d'éléments DOM. Par exemple, vous pouvez ajouter un comportement en filigrane qui peut être attaché à une zone de texte existante.

Pour plus d'informations, consultez les rubriques suivantes :

Ajout de fonctionnalités clientes aux contrôles serveur

Tout contrôle serveur ASP.NET existant ou personnalisé peut être transformé en un contrôle d'extendeur ASP.NET AJAX. Un contrôle d'extendeur est un contrôle serveur Web qui utilise ECMAScript (JavaScript), DHTML et des fonctions AJAX du navigateur Web pour ajouter des fonctionnalités telles que l'interactivité et la communication asynchrone avec le serveur.