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.

Advertisements
This entry was posted in .NET and tagged , , . Bookmark the permalink.

6 Responses to jQuery, AJAX, ASP.NET and Dates

  1. Pingback: jQuery Plugin for ASP.net Ajax (jMsAjax) - Adam Schroder

  2. Pingback: jQuery Plugin for ASP.net Ajax (jMsAjax) | Schotime.net

  3. These two functions are great. I’ve always hated working with dates between ASP.NET and JavaScript in the past. Hopefully the experience will be a lot less traumatic now.

    Rich

  4. binhlt says:

    Thanks for your useful post.
    I am a new in JSON, so I don’t understand why use : “data.d.dt” not “data.dt” in success function..

  5. Schotime says:

    Its because the ASP.NET Json serializer sends back the data inside a “d” object.

    This is only applicable for asp.net greater than 2.0. Asp.net 2.0 works as you have stated.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s