Sixième partie de mon tutoriel ASP.NET. Aujourd’hui je vais apporter la technologie ASP.NET AJAX. Un petit rappel du plan n’est pas de trop pour vous y retrouver :

• 1/8: Présentation générale
• 2/8: Créer son premier site
• 3/8: Structure d’un document ASPX
• 4/8: Les balises
• 5/8: Afficher des résultats multiples
• 6/8: Lancer des traitements asynchrones avec AJAX
• 7/8: Publication du site Internet avec Visual Studio
• 8/8: Conclusion

Rappels sur AJAX

AJAX (Asynchronous Javascript and XML) est une technologie permettant d’interroger le serveur et ce, de manière asynchrone. Concrètement, AJAX va nous permettre de charger de nouvelle données sans devoir recharger la page entièrement.

AJAX est aujourd’hui très répandu sur le web et demeure désormais indispensable. Le cas typique d’utilisation peut être celui des commentaires Facebook. L’un de vos contacts publie un message et très commenté. Quand vous cliquez sur « Plus… », la liste des commentaires s’agrandit sans que la page ne se recharge. Vous suivez ?

Ceci est possible grâce à XMLHttpRequest et Javascript. Il existe une implémentation simplifiée de XMLHttpRequest pour AngularJS et jQuery, des frameworks Javascript très utilisés dans le monde du web.

Qu’est-ce que ASP.NET AJAX ?

C’est une technologie complémentaire qui vous permet d’appeler des méthodes serveur dans le code-behind sans recharger l’ensemble de la page.

Comment l’implémenter ?

Mon exemple sera simple. J’ai un champs de texte, un bouton et un label qui m’affiche « Bonjour » ainsi que le mot entré dans le champs de texte.

<ScriptManager runat="server" ID="ScriptManager1" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
     <ContentTemplate>
                Entrez votre prénom:
                <asp:TextBox ID="LblTexte" runat="server" />
                <asp:Button ID="BtnValider" runat="server" OnClick="BtnValider_Click" Text="Valider" />
     </ContentTemplate>
</asp:UpdatePanel>

Et le code associé au clic du bouton :

protected void BtnValider_Click(object sender, EventArgs e)
{
     LblTexte.Text = "Bonjour " + TxtNom.Text;
}

Le ScriptManager permet d’implémenter ASP.NET AJAX. On met ensuite tout notre contenu entre les balises UpdatePanel.

On teste et… magie ! Le champs de texte se remplit et la page n’est pas rechargée.

Note : ScriptManager ne semble être plus indispensable pour Visual Studio 2012 ou supérieur. N’hésitez pas à tester avec ou sans.

Si vous souhaitez aller plus loin, vous pouvez consulter la rubrique ASP.NET AJAX sur Developpez.com.

Je vous donne rendez-vous sur mon prochain article traitant de la publication du site Web.