There doesn't as far as we know exist an easy way to call ASP.NET page methods from prototype. One way to get around this is too rewrite the prototype AJAX object base function and add a new property called datatype:
Ajax.Base = Class.create({
initialize: function(options)
{
this.options = {
method: 'post',
asynchronous: true,
contentType: 'application/x-www-form-urlencoded',
encoding: 'UTF-8',
parameters: '',
evalJSON: true,
evalJS: true,
dataType: 'string'
};
Object.extend(this.options, options || {});
this.options.method = this.options.method.toLowerCase();
if (this.options.dataType == "string")
{
if (Object.isString(this.options.parameters))
this.options.parameters = this.options.parameters.toQueryParams();
}
}
});
Then rewrite Ajax.Request request function to:
request: function(url)
{
this.url = url;
this.method = this.options.method;
var params;
if (this.options.dataType == "string")
{
params = Object.clone(this.options.parameters);
if (!['get', 'post'].include(this.method))
{
// simulate other verbs over post
params['_method'] = this.method;
this.method = 'post';
}
this.parameters = params;
if (params = Object.toQueryString(params))
{
// when GET, append parameters to URL
if (this.method == 'get')
this.url += (this.url.include('?') ? '&' : '?') + params;
else if (/Konqueror|Safari|KHTML/.test(navigator.userAgent))
params += '&_=';
}
}
else if (this.options.dataType == "jSon")
{
params = this.options.parameters;
}
try
{
var response = new Ajax.Response(this);
if (this.options.onCreate) this.options.onCreate(response);
Ajax.Responders.dispatch('onCreate', this, response);
this.transport.open(this.method.toUpperCase(), this.url, this.options.asynchronous);
if (this.options.asynchronous) this.respondToReadyState.bind(this).defer(1);
this.transport.onreadystatechange = this.onStateChange.bind(this);
this.setRequestHeaders();
this.body = this.method == 'post' ? (this.options.postBody || params) : null;
this.transport.send(this.body);
/* Force Firefox to handle ready state 4 for synchronous requests */
if (!this.options.asynchronous && this.transport.overrideMimeType)
this.onStateChange();
}
catch (e)
{
this.dispatchException(e);
}
},
You can now call:
new Ajax.Request(pagePath + "/" + fn, {
method: "POST",
contentType: "application/json; charset=utf-8",
parameters: paramList,
dataType: 'jSon',
onSuccess: successFn,
onFailure: errorFn
});
With a purely JSON compatible parameter set, i.e. parameters : {'start':'1','end':'1'} will now be treated as a complete string by the ASP.NET page as prototype will no longer mangle your JSON.
Bingo!