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

Et voilà 😉