Oct 01 2014

ASP.NET / Appeler le code-behind avec Javascript à l’aide de PageMethods

Dans la partie 4 de mon tutoriel sur ASP.NET, je vous montrais une première interaction entre le code-front (.aspx) et le code-behind (.aspx.cs) par l’intermédiaire des évènements sur les contrôles (ex: clic sur un bouton).

Et si l’on veut appeler une méthode serveur à l’aide de Javascript ?

C’est possible aussi, avec PageMethods 🙂

Code-behind (C#)

Voyons côté code-behind dans un premier temps.
Créeons la méthode côté serveur qui sera appelée directement avec Javascript.

public partial class _Default : Page
{
    [WebMethod]
    public static string SayHello(string name)
    {
        return "Hello " + name + " !";
    }
}

[notice]La méthode doit être publique, statique et comporter l’attribut « WebMethod »[/notice]

Code-front (HTML/Javascript)

Voyons désormais côté code-front.
Voici un simple formulaire où l’on va demander à l’utilisateur de saisir son nom.

<form id="form1" runat="server">
    <div>
        <asp:ScriptManager runat="server" EnablePageMethods="true" EnablePartialRendering="true" />

        <input id="name" name="name" style="width: 200px" />
        <input type="button" value="OK" onclick="LetSayHello();" />
    </div>
</form>

[notice]N’oubliez pas de mettre la propriété EnablePageMethods à true de l’objet ScriptManager.[/notice]

Enfin, voyons du côté Javascript. Il suffit d’utiliser PageMethods et d’appeler la méthode serveur en passant les paramètres demandés (le nom) plus deux autres:

  • La fonction appelée en cas de succès (onSuccess)
  • La fonction appelée en cas d’erreur (onError)
<script type="text/javascript">
    function LetSayHello() {
        var name = document.getElementById("name").value;

        PageMethods.SayHello(name,
             OnSuccess: function(response) {
                  alert(response);
             },
             OnError: function(error) {
                  alert("Erreur :" + error);
             }
    }
</script>

Désormais, lorsque l’utilisateur cliquera sur « OK », la méthode HelloWorld() située côté serveur sera appelée en AJAX et le résultat nous sera affiché dans une boîte d’alerte.

Un exemple d'appel avec PageMethods

Un exemple d’appel avec PageMethods

Et voilà 😉

Articles similaires:

Lien Permanent pour cet article : http://jbvigneron.fr/2014/10/01/aspnet-pagemethods-code-behind-javascript/

(2 commentaires)

    • rick on 7 août 2015 at 4 h 53 min
    • Répondre

    Je pense qu’il y a une erreur dans le javascript, c’est PageMethos.SayHEllo()

  1. Bien vu ! Merci rick 🙂

Laisser un commentaire

Your email address will not be published.

css.php