CURRENT PROJECTS
loading
CATEGORIES AND POSTS
loading
overset
DEVELOPMENT LOG FOR JIM PALMER
Posted 07/18/2008 in C#.NET


UPDATE - fixed the date parsing because I originally used Date(318326400000) which instantiates the CURRENT Date in Javascript which means we need to use new Date(318326400000) instead. I also setup C# to return DateTime(1980, 2, 2) instead of returning the UNIX EPOCH 1970-01-01T00:00:00:00000.

GOAL
To support the ASP.NET's DateTime JSON serialization in jQuery's ajax() method. ASP.NET serializes the DateTime response as "\/Date(-19312300000)\/" and we want jQuery to automatically parse that as a native Javascript Date() object. This outlines the simplest approach to creating an ASP.NET web service in C#. This also shows an example of a Hashtable being returned by the ASP.NET webservice.

This example was largely driven by all the hard work that "Schotime" put into resolving this specific issue. He put together a jQuery plugin specifically for resolving this issue and more named jMsAjax. The other link to the personal project page is http://schotime.net/jMsAjax.aspx. The initial blog post is at: http://schotime.net/blog/index.php/2008/07/01/jquery-plugin-for-aspnet-ajax-jmsajax/.

The simple ASP.NET web service creation and jQuery JSON/AJAX consumption of it was outlined very well by Dave Ward on 2 postings: http://encosia.com/2008/03/27/using-jquery-to-consume-aspnet-json-web-services/ and http://encosia.com/2008/06/26/use-jquery-and-aspnet-ajax-to-build-a-client-side-repeater/. Another fantastic set of writeups on how to simply consume ASP.NET web services through native JSON communication via jQuery's lovely jQuery.ajax() functionality.

The solution to making jQuery recognize this ASP.NET DateTime JSON serialization is to harness the jQuery.ajax.dataFilter functionality since version 1.2.6 of jQuery.

It is important to note that the example Web Service I provide returns a Hashtable data type which is not fully supported by the Web Services functionality even in .NET 3.5. Case in point, this function will work perfectly when invoking it as a webservice through AJAX and the JSON serialization, but will fail when you attempt to reflect/introspect via appending the "?wsdl" to the URL GET string in your browser. You'll see something along the lines of "Method services.echoArgs can not be reflected." because any data type that is of an IDictionary base type cannot be serialized in XML out of the box when using .NET Web Services. This example really just shows that a Hashtable can actually be used when using the JSON serialization format.

Step 1
Call the jQuery.ajax() method with the appropriate dataFilter function declaration in the options to pre-parse the ASP.NET DateTime object into a native Javascript object:
$.ajax({
	type: "POST",
	url: "../services.asmx/echoArgs",
	data: "{'arg1':'yarr'}",
	contentType: "application/json; charset=utf-8",
	dataType: "json",
	dataFilter: function (data, type) {
		return data.replace(/"\\\/(Date\([0-9-]+\))\\\/"/gi, 'new $1');
	},
	success: function (msg) {
		alert(msg.datetime);
	}
});
Step 2
Create web.config for parsing *.asmx through the WebServices Script "factory":
<configuration>
    <system.web>
    <httpHandlers>
        <remove verb="*" path="*.asmx"/>
        <add verb="*" path="*.asmx" type="System.Web.Script.Services.ScriptHandlerFactory" validate="false" />
    </httpHandlers>
    </system.web>
<configuration>

Step 3
Create simple services.asmx file that declares your web service functionality:
<%@ WebService Language="C#" class="services" %>

using System;
using System.Collections;
using System.Web;
using System.Web.Services;
using System.Web.Script.Services;

[ScriptService]
public class services : WebService {

	[WebMethod]
	public Hashtable echoArgs (string arg1) {
		Hashtable tmpp = new Hashtable();
		tmpp["arg1"] = arg1;
		tmpp["datetime"] = new DateTime(1980, 2, 2);
		return (Hashtable) tmpp;
	}
	
}

In the end the success function in the jQuery.ajax() should output the native Javascript Date.toString() via the alert popup. Prior to parsing the response from ASP it would appear as:
{"datetime":"\/Date(318326400000)\/","arg1":"yarr"}
and after using the dataFilter parsing it would appear as, just prior to being parsed into a native Javascript object:
{"datetime":new Date(318326400000),"arg1":"yarr"}
comments
loading
new comment
NAME
EMAIL ME ON UPDATES
EMAIL (hidden)
URL
MESSAGE TAGS ALLOWED: <code> <a> <pre class="code [tab4|tabX|inline|bash]"> <br>
PREVIEW COMMENT
TURING TEST
gravatar