Tag Archives: AJAX

June 19, 2008   .NET   6 Comments

jQuery, AJAX, ASP.NET and Dates

Just recently I discovered jQuery and I have to say….I’m a huge fan already. So I decided to setup my first AJAX call through jQuery and call a page method. After some playing around I finally had it. Thanks also go out to www.encosia.com. Thanks Dave. The only problem was that I could not parse Dates.

Updated 04/07/08: Please see my latest post for a jQuery plugin that works perfectly with Asp.net. Dates and all.

So here I show you my solution which works pretty well and suits my needs. Maybe you might find it useful.

Firstly I’ll show you the aspx page and code behind use to make the AJAX call.
ASPX Page:

<html>
<head>
    <title>My jQuery Test</title>
    <script src="jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(document).ready(function() {
            $("#mybutton").click(function() {
                  $.ajax({
                      type: "POST",
                      url: "Default.aspx/jQueryTest",
                      contentType: "application/json; charset=utf-8",
                      data: "{ 'dt_in': "+(new Date()).toMSJSON()+" }",
                      success: function(response) {
                        var data = parseMSJSONString(response);
                        alert(data.d.name);
                        alert(data.d.dt);
                      }
                  });
             });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" id="mybutton" value="GetDate" />
    </div>
    </form>
</body>
</html>

Code Behind:

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    [System.Web.Script.Services.ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    [System.Web.Services.WebMethod]
    public static Test jQueryTest(DateTime dt_in)
    {
        Test t = new Test() { name = "My Name", dt = dt_in.AddDays(5) };
        return t;
    }

    public class Test
    {
        public string name { get; set; }
        public DateTime dt { get; set; }
    }
}

Note: I have not set a dataType setting of ‘json’ in the Ajax call to prevent the JSON string being evaluated into a JSON object before I can parse it. Also note that the name of the parameter passed in through the JSON string data must be the same as the static WebMethod parameter name. In this case “dt_in”.

So what we have above is a simple input button with the value of “GetDate” which is going to send the current date from JavaScript to the WebMethod, add 5 days to the Date, then add it to a custom class called Test and return an instance of it. At that point the Name and Date will be alerted to the screen, all without a PostBack.

Now usually this would not work however I have created to handy scripts to make it pretty seamless. One to convert a JavaScript Date object to a Date String that ASP.NET will accept, and the other to parse the JSON string returned into a JavaScript Date. Here are those two functions.

Date.prototype.toMSJSON = function () {
      var date = '"\\\/Date(' + this.getTime() + ')\\\/"';
      return date;
};

function parseMSJSONString(data)
{
    try {
        var newdata = data.replace(
            new RegExp('"\\\\\/Date\\\((-?[0-9]+)\\\)\\\\\/"', "g")
                        , "new Date($1)");
        newdata = eval('('+newdata+')');
        return newdata;
    }
    catch(e) { return null; }
}

The first of these two functions toMSJSON extends the Date object by adding the toMSJSON method to it. By doing this any Date object created in JavaScript can be converted to its MS JSON equivalent ready to be sent via Ajax.

The second one is a plain method used to parse the JSON string returned by the WebMethod to a JSON string that is ‘evaled’ and made a proper JSON object. Thereby making data.d.dt in the example above a Date object.

Read More