Bluishprints

Thursday, September 26, 2013

Simplifying calls to WebMethods with PageMethods AJAX

AJAX calls to WebMethods in ASP.net pages can be easier implemented (the javascript part) by using the PageMethod feature in Microsoft ASP.NET AJAX framework instead of jQuery.

The code I used to write (jQuery):

$(document).ready(function () {
                $("#Button1").click(function () {
                    $.ajax({
                        type: "POST",
                        url: "index.aspx/diHola",
                        data: "{'nombre': '" + $('#<%= TextBox1.ClientID %>').val() + "'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: callbackFunction
                    });
                });
                function callbackFunction(response) {
                    alert(response.d);
                }
            });

And this is the code I write now using PageMethods:

function pageLoad(){
     $("#Button1").click(function () {
                    PageMethods.diHola($get("<%= TextBox1.ClientID %>").value, callbackFunction);
                    return false;
      });
}

function callbackFunction(response){
      alert(response);
}

Just remember to activate PageMethods in your ScriptManager:

.ASPX

Tu nombre:
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <input type="button" data-role="none" ID="Button1" value="Enviar" />
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">   </asp:ScriptManager>
        <script type="text/javascript">
            function pageLoad(){
                $("#Button1").click(function () {
                    PageMethods.diHola($get("<%= TextBox1.ClientID %>").value, callbackFunction);
                    return false;
                });
            }

            function callbackFunction(response){
                alert(response);
            }
        </script>