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>

.ASPX.CS

 [WebMethod]
        public static string diHola(string nombre)
        {
            return "Hola " + nombre;
        }

jQuery FullCalendar and ASP.Net: Problems with AJAX requests and responses

The "Fullcalendar" plugin for jQuery sends two parameters ("start" and "end") as form parameters via POST  requests, which are not well processed by ASP.net WebServices (version >=3.5), which are expecting a well-formed JSON.

The result of the asp.net webmethod is a JSON object nested in the property "d" of another JSON object. This sintax is not understandable by Fullcalendar.

To solve these problems just edit fullcalendar.js changing _fetchEventSource function:

[...]
$.ajax($.extend({}, ajaxDefaults, source, {
data: JSON.stringify(data), // -- Line changed
success: function(events) {
//events = events || []; -- Line commented
events = events.d; // -- Line added
[...]

Note: JSON.stringify() is a function from the json2.js library.