Tuto ASP.NET 6/8 : AJAX

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 :

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>

Formulaire ASP.NET AJAX

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.

Lien Permanent pour cet article : https://www.jbvigneron.fr/parlons-dev/tutoriel-aspnet-ajax/

4 Commentaires

Passer au formulaire de commentaire

    • Wassim AZIRAR sur 15 mai 2013 à 17h46
    • Répondre

    Article très intéressant et bien expliqué, merci.

    • Francois sur 16 février 2015 à 8h17
    • Répondre

    Bonjour,
    Je voudrais savoir si il est possible d’avoir avec plusieurs pages maitres pour une même application web. L’idée étant d’avoir un frame haut et un frame gauche. !
    En tout les cas merci pour vos lumière, je comprends mieux le principee des pages maitres !
    Mais les frames étaient pas mal du tout !

  1. Hello !
    Une page .aspx ne peut référencer qu’une seule page maître. Mais néanmoins, il est possible de contourner ce problème car une page maître peut aussi en référencer une autre.

    On peut donc avoir une structure comme ceci : MasterTopPanel.aspx -> MasterLeftPanel.aspx -> Default.aspx

    Je t’invite à consulter cette page : https://msdn.microsoft.com/en-us/library/x2b3ktt7%28v=vs.140%29.aspx

    Bon courage !

  2. Bonjour, quelles sont les lignes à ajouter dans le fichier web.config pour que ça marche ?. En effet, j’ai même copier-coller votre code dans un nouveau projet. Main rien n y fait. La page se recharge. Je galère depuis une semaine. Je travaille avec VS2012. mon langage est c-scharp. SVP aidé moi. voilà le contenu du web.config:

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Verified by MonsterInsights