Exemple d'application AJAX

Article
10/22/2014

Mise à jour : novembre 2007

Ce didacticiel crée une application qui utilise des fonctionnalités AJAX d'ASP.NET. Vous trouverez de plus amples informations sur les fonctionnalités AJAX dans ASP.NET, telles que les réponses apportées par ces fonctionnalités aux problèmes techniques, la liste des composants AJAX importants, dans les documents d'introduction suivants :

Dans ce didacticiel vous générerez une application qui affiche des pages de données d'employés de l'exemple de base de données AdventureWorks. L'application utilise le contrôle UpdatePanel pour n'actualiser que la partie de la page qui a changé, sans le clignotement de page qui accompagne une publication (postback). On parle alors de mise à jour de page partielle. L'application utilise également le contrôle UpdateProgress pour afficher un message d'état pendant le traitement de la mise à jour de la page partielle.

Composants requis

Pour implémenter les procédures dans votre propre environnement de développement, vous avez besoin des éléments suivants :

Microsoft Visual Studio 2005 ou Microsoft Visual Web Developer Express.
Un site Web ASP.NET AJAX.
L'exemple de base de données AdventureWorks. Vous pouvez télécharger et installer la base de données AdventureWorks à partir du Centre de téléchargement Microsoft. (Recherchez « Exemples et exemples de base de données SQL Server 2005 (décembre 2006) »).

Création d'un site Web ASP.NET

Les sites Web que vous créez par défaut dans ASP.NET incluent le support pour les fonctionnalités AJAX.

Pour créer un Site Web ASP.NET AJAX

Démarrez Visual Studio.
Dans le menu Fichier, cliquez sur Nouveau site Web.

La boîte de dialogue Nouveau site Web s'affiche.
Sous Modèles Visual Studio installés, sélectionnez Site Web ASP.NET.
Entrez un emplacement et un langage, puis cliquez sur OK.

Ajout d'un contrôle UpdatePanel à une page Web ASP.NET

Après avoir créé un site Web ASP.NET, vous créez une page Web ASP.NET qui inclut un contrôle UpdatePanel. Avant d'ajouter un contrôle UpdatePanel à la page, vous devez ajouter un contrôle ScriptManager. Le contrôle UpdatePanel dépend du contrôle ScriptManager pour la gestion des mises à jour de pages partielles.

Pour créer une nouvelle page Web ASP.NET.

Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site, puis cliquez sur Ajouter un nouvel élément.

La boîte de dialogue Ajouter un nouvel élément s'affiche.
Sous Modèles Visual Studio installés, sélectionnez Formulaire Web.
Nommez la nouvelle page Employees.aspx et désactivez la case à cocher Placer le code dans un fichier distinct.
Sélectionnez le langage à utiliser.
Cliquez sur Ajouter.
Basculez en mode Design.
Sous l'onglet Extensions AJAX de la boîte à outils, double-cliquez sur le contrôle ScriptManager pour l'ajouter à la page.
Faites glisser un contrôle UpdatePanel à partir de la Boîte à outils et déposez-le sous le contrôle ScriptManager.

Ajout de contenu à un contrôle UpdatePanel

Le contrôle UpdatePanel exécute des mises à jour de pages partielles et identifie le contenu mis à jour indépendamment du reste de la page. Dans cette partie du didacticiel, vous ajouterez un contrôle lié aux données qui affiche des données de la base de données AdventureWorks.

Pour ajouter du contenu à un contrôle UpdatePanel

À partir de l'onglet Données de la boîte à outils, faites glisser un contrôle GridView dans la zone de contenu du contrôle UpdatePanel.
Dans le menu Tâches GridView, cliquez sur Mise en forme automatique.
Dans le panneau Mise en forme automatique, sous Sélectionner un schéma, sélectionnez Couleur, puis cliquez sur OK.
Dans le menu Tâches GridView, sélectionnez <Nouvelle source de données> dans la liste Choisir la source de données.

L'Assistant Configuration de source de données s'affiche.
Sous D'où l'application obtiendra-t-elle les données ?, sélectionnez Base de données, puis cliquez sur OK.
Dans l'Assistant Configurer la source de données, pour l'étape Choisir votre connexion de données, configurez une connexion à la base de données AdventureWorks puis cliquez sur Suivant.
Pour l'étape Configurer l'instruction Select, sélectionnez Spécifiez une instruction SQL personnalisée ou une procédure stockée puis cliquez sur Suivant.
Sous l'onglet SELECT de Définir des instructions personnalisées ou des procédures stockées, entrez l'instruction SQL suivante :
```
SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName
```
Cliquez sur Suivant.
Cliquez sur Terminer.
Dans le menu Tâches GridView, activez la case à cocher Activer la pagination.
Enregistrez vos modifications et appuyez sur CTRL+F5 pour afficher la page dans un navigateur.

Remarquez qu'il n'y a aucun clignotement de page lorsque vous sélectionnez différentes pages de données. En effet, la page n'exécute pas de publication et ne met pas à jour la page entière à chaque fois.

Ajout d'un contrôle UpdateProgress à la page

Le contrôle UpdateProgress affiche un message d'état pendant la demande du nouveau contenu du contrôle UpdatePanel.

Pour ajouter un contrôle UpdateProgress à la page

De l'onglet Extensions AJAX de la boîte à outils, faites glisser un contrôle UpdateProgress sur la page et placez-le sous le contrôle UpdatePanel.
Sélectionnez le contrôle UpdateProgress et, dans la fenêtre Propriétés, affectez UpdatePanel1. à la propriété AssociatedUpdatePanelID.

Le contrôle UpdateProgress est alors associé au contrôle UpdatePanel que vous avez ajouté précédemment.
Dans la zone modifiable du contrôle UpdateProgress, tapez Getting Employees .... .
Enregistrez vos modifications et appuyez sur CTRL+F5 pour afficher la page dans un navigateur.

S'il y a un délai d'attente pendant l'exécution de la requête SQL, le contrôle UpdateProgress affiche le message que vous avez introduit dans le contrôle UpdateProgress.

Ajout d'un délai à l'application

Si votre application met à jour rapidement chaque page de données, vous ne pouvez pas consulter dans la page le contenu du contrôle UpdateProgress. Le contrôle UpdateProgress prend en charge une propriété DisplayAfter qui vous permet de définir un délai avant que le contrôle soit affiché. Cela évite que le contrôle clignote dans le navigateur si la mise à jour se produit très rapidement. Par défaut, le délai défini est de 500 millisecondes (0,5 seconde), ce qui signifie que le contrôle UpdateProgress ne s'affichera pas si la mise à jour prend moins d'une demi-seconde.

Dans un environnement de développement, vous pouvez ajouter un délai artificiel à votre application afin de vous assurer que le contrôle UpdateProgress fonctionne comme prévu. Cette étape est facultative et uniquement destinée à tester votre application.

Pour ajouter un délai à l'exemple d'application

A l'intérieur du contrôle UpdatePanel, sélectionnez le contrôle GridView.
Dans la fenêtre Propriétés, cliquez sur le bouton Événements.
Double-cliquez sur l'événement PageIndexChanged pour créer un gestionnaire d'événements.

Ajoutez le code suivant au gestionnaire d'événements PageIndexChanged pour créer artificiellement un délai de trois secondes :

'Include three second delay for example only.
System.Threading.Thread.Sleep(3000)

//Include three second delay for example only.
System.Threading.Thread.Sleep(3000);

Remarque :
Le gestionnaire de l'événement PageIndexChanged introduit volontairement un délai pour ce didacticiel. Dans la pratique, vous n'introduiriez pas de délai. Au lieu de cela, le délai aurait pour cause le trafic sur le serveur ou le temps de traitement d'un code serveur plus long que d'habitude, pour une requête de base de données par exemple.

Enregistrez vos modifications et appuyez sur CTRL+F5 pour afficher la page dans un navigateur.

Parce qu'il y a maintenant un délai de trois secondes lorsque vous effectuez un changement de page de données, vous êtes en mesure de consulter le contrôle UpdateProgress.

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >

    Protected Sub GridView1_PageIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)
        'Include three second delay for example only.
        System.Threading.Thread.Sleep(3000)
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>

    </div>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <asp:GridView ID="GridView1"  AllowPaging="True" CellPadding="4" DataSourceID="SqlDataSource1"
                    ForeColor="#333333" GridLines="None" OnPageIndexChanged="GridView1_PageIndexChanged">
                    <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
                    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                    <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
                    <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <AlternatingRowStyle BackColor="White" />
                </asp:GridView>
                <asp:SqlDataSource ID="SqlDataSource1"  ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
                    SelectCommand="SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName">
                </asp:SqlDataSource>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" >
            <ProgressTemplate>
                Getting employees...
            </ProgressTemplate>
        </asp:UpdateProgress>
    </form>
</body>
</html>

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >

    protected void GridView1_PageIndexChanged(object sender, EventArgs e)
    {
        //Include three second delay for example only.
        System.Threading.Thread.Sleep(3000);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>

    </div>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <asp:GridView ID="GridView1"  AllowPaging="True" CellPadding="4" DataSourceID="SqlDataSource1"
                    ForeColor="#333333" GridLines="None" OnPageIndexChanged="GridView1_PageIndexChanged">
                    <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
                    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                    <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
                    <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <AlternatingRowStyle BackColor="White" />
                </asp:GridView>
                <asp:SqlDataSource ID="SqlDataSource1"  ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
                    SelectCommand="SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName">
                </asp:SqlDataSource>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" >
            <ProgressTemplate>
                Getting employees...
            </ProgressTemplate>
        </asp:UpdateProgress>
    </form>
</body>
</html>