Articles / Nouvelle technologies

Le problème avec l'Update Panel c'est que l'utilisateur ne peut pas revenir en arrière facilement à l'aide des touches "prec" et "next" d'internet explorer par exemple. ASP.NET Futures apporte son lot de nouveaux contrôles dont l'Hystory Control fait partie. Ce nouveau contrôle va nous permettre de sauver la navigation du client quand il n'y a pas de rechargement complet de la page. Par exemple un GridView paginé dans un Update Panel ne rafraichi pas entièrement la page lorsque nous changeons de page. Essayons donc!

Pré requis

Pour créer ce petit projet, il vous faudra au minimum ASP.NET Futures July CPT. J'utiliserai comme outil de développement Visual Studio 2008 béta 2. Le projet devrait tourner sans problème sur Visual Studio 2005.

Mise en place du projet

Nous avons besoin d'un site web et d'une base de données :

Ouvrez Visual Studio
Créez un site web :
- File
- New
- Web Site
- Une nouvelle fenêtre s'ouvre choisissez "ASP.NET Futures Ajax Web Site"
- Cliquez sur "ok"
Ouvrez l'explorateur de solution
Créez une base de données
- Clic droit sur le projet
- Add New Item
- SQL Database
Créez une table
- Ouvrez le serveur explorer
- Etendez votre base de données (fichier.mdf)
- Clic droit sur "Tables"
- New Table
- Ajouter des champs puis enregistrer
Ajouter des datas dans votre table (3 suffiront)

La mise en place de notre projet est maintenant terminée.

Update Panel et GridView

Avant tout, passez en mode design. Draggez un Update Panel dans votre page. Dans le "server explorer" sélectionnez la table et dragguez la dans l'update panel (normalement cela vous génère un GridView et un SqlDataSource).

Sélectionnez l'extender du GridView et choisissez le SqlDataSource correspondant :

Si vous exécutez votre page maintenant et que vous changez de "PageIndex" dans votre GridView, le retour d'internet explorer n'est pas permis :

Nous allons maintenant ajouter notre contrôle History et quelques lignes de codes. Dragguez un History Control dans votre page et liez-le avec l'update panel grâce à la propriété "trigger" de l'update panel :

Maintenant nous devons enregistrer dans cet History les changements qui occurent dans l'update panel afin qu'on puisse revenir en arrière. Comme nous avons un GridView dans notre update panel, nous allons ajouter un point à l'historique à chaque changement de page, c'est à dire sur l'évènement "PageIndexChanged" de notre GridView. Pour ajouter un point dans l'historique c'est très simple :

History1.AddHistoryPoint("StartPage", (sender as GridView).PageIndex);

Le premier argument désigne de nom de l'historique (pas du contrôle, car un contrôle History peut contenir plusieurs historiques ayants des noms différents) et le deuxième, la valeur qu'on veut stocker dans l'historique.

Une dernière chose, nous devons traiter l'évènement "OnNavigate" du contrôle History (action qui arrive quand nous utilisons la touche retour d'ie par exemple) pour remettre notre GridView sur la bonne page.

protected void History1_Navigate(object sender, Microsoft.Web.Preview.UI.Controls.HistoryEventArgs args)
{
   int StartPage = 0;
   if (args.State.ContainsKey("StartPage"))
   StartPage = (int)args.State["StartPage"];
   GridView1.PageIndex = StartPage;
}

Args contient toutes les informations sur le contrôle History, notamment une liste des historiques enregistrés. Nous vérifions que le nôtre existe, si oui alors on prend la valeur qui correspond à un retour, soit à un next et on assigne cette valeur à la propriété PageIndex de notre GridView. Et voilà, nous avons mis en place un historique sur notre page. Simple non?