Download AjaxPro Beta with jQuery Support

Michael Schwarz on Sunday, April 15, 2007

I forgot to put the beta version online that will support jQuery and json.js from http://www.json.org [1]. You can download the latest beta of the AjaxPro library at http://www.ajaxpro.info/download/jQueryAjaxPro.zip [2]. The download currently includes only the .NET 2.0 library including a Visual Studio .NET 2005 Web Site project.

The C# AjaxMethod

I added a very simple AjaxMethod HelloWorld which will only return a string and get one argument. The reason is that I don't have included the new JSON converters which will be ready in the next days.

[AjaxPro.AjaxMethod]<span class="kwrd">public</span> <span class="kwrd">static</span> <span class="kwrd">string</span> HelloWorld(<span class="kwrd">string</span> s)
{
<span class="kwrd">return</span> <span class="str">"Hello "</span> + s + <span class="str">"!"</span>;
}</pre>

The generated JavaScript code for jQuery

The JavaScript wrapper will look similar to the AjaxPro files, but using no AjaxPro JavaScript function, now. For the JSON serialization of JavaScript objects I'm using the json.js.

<pre class="csharpcode">MyClass_class = function() {};
MyClass_class.prototype.url = <span class="str">'/WebSite2/ajaxpro/_Default,App_Web_hae3khd4.ashx'</span>;
MyClass_class.prototype.HelloWorld = function(s, onsuccess, onerror) {

<span class="kwrd">return</span> jQuery.ajax({ type: <span class="str">"POST"</span>, url: <span class="kwrd">this</span>.url, data: {<span class="str">"s"</span>:s}.toJSONString(), beforeSend: function(xhr) { xhr.setRequestHeader(<span class="str">"X-AjaxPro-Method"</span>, <span class="str">"HelloWorld"</span>); <span class="kwrd">if</span>(<span class="kwrd">typeof</span> AjaxPro !== <span class="str">'undefined'</span> &amp;&amp; AjaxPro.token !== <span class="kwrd">null</span>) xhr.setRequestHeader(<span class="str">"X-AjaxPro-Token"</span>, AjaxPro.token); }, success: function(s) { var o = <span class="kwrd">null</span>; eval(<span class="str">"o = "</span> + s + <span class="str">";"</span>); <span class="kwrd">if</span>(o != <span class="kwrd">null</span>) { <span class="kwrd">if</span>(<span class="kwrd">typeof</span> o.<span class="kwrd">value</span> != <span class="str">"undefined"</span> &amp;&amp; <span class="kwrd">typeof</span> onsuccess == <span class="str">"function"</span>) { onsuccess(o.<span class="kwrd">value</span>); <span class="kwrd">return</span>; } <span class="kwrd">else</span> <span class="kwrd">if</span>(<span class="kwrd">typeof</span> o.error != <span class="str">"undefined"</span> &amp;&amp; <span class="kwrd">typeof</span> onerror == <span class="str">"function"</span>) { onerror(o.error); <span class="kwrd">return</span>; } } <span class="kwrd">if</span>(<span class="kwrd">typeof</span> onerror == <span class="str">"function"</span>) { onerror({<span class="str">"Message"</span>:<span class="str">"Failed."</span>}); } } }); }; var MyClass = <span class="kwrd">new</span> MyClass_class();</pre>

Invoking the AjaxMethod from JavaScript

The new jQuery TypeJavaScriptProvider will generate a litte different output, and the result will be available directly. As you may remeber AjaxPro is returning on object with a property .value which will contain the result of the AjaxMethod on the server-side cocde.

The full ASPX html code will look like this:

<pre class="csharpcode">&lt;%@ Page Language=<span class="str">"C#"</span> CodeFile=<span class="str">"Default.aspx.cs"</span> Inherits=<span class="str">"_Default"</span> %&gt;

&lt;!DOCTYPE html PUBLIC <span class="str">"-//W3C//DTD XHTML 1.0 Transitional//EN"</span> <br><span class="str">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span>&gt;

&lt;html xmlns=<span class="str">"http://www.w3.org/1999/xhtml"</span> &gt; &lt;head runat=<span class="str">"server"</span>&gt; &lt;title&gt;Untitled Page&lt;/title&gt; &lt;script type=<span class="str">"text/javascript"</span> src=<span class="str">"json.js"</span>&gt;&lt;/script&gt; &lt;script type=<span class="str">"text/javascript"</span> src=<span class="str">"jquery-latest.js"</span>&gt;&lt;/script&gt; &lt;script type=<span class="str">"text/javascript"</span>&gt; jQuery.noConflict(); &lt;/script&gt;

&lt;/head&gt; &lt;body&gt; &lt;form id=<span class="str">"form1"</span> runat=<span class="str">"server"</span>&gt;

&lt;div id=<span class="str">"display"</span>&gt;&lt;/div&gt;

&lt;script type=<span class="str">"text/javascript"</span>&gt;

$(document).ready(function() { MyClass.HelloWorld(<span class="str">"Michael Schwarz"</span>, function(res) { jQuery(<span class="str">"#display"</span>).html(res); }); });

&lt;/script&gt;

&lt;/form&gt; &lt;/body&gt; &lt;/html&gt;</pre>

To use the new jQuery provider you have to add following lines to your web.config which will disable the AjaxPro JavaScript includes and adds the use of the new jQuery JavaScript output:

<pre class="csharpcode">&lt;ajaxNet&gt;
&lt;ajaxSettings&gt;
&lt;scriptReplacements&gt;
&lt;file name=<span class="str">"prototype"</span> path=<span class="str">""</span> /&gt;
&lt;file name=<span class="str">"core"</span> path=<span class="str">""</span> /&gt;
&lt;file name=<span class="str">"converter"</span> path=<span class="str">""</span> /&gt;
&lt;/scriptReplacements&gt;
&lt;providers&gt;
&lt;typeJavaScriptProvider
type=<span class="str">"AjaxPro.jQueryTypeJavaScriptProvider, AjaxPro.2"</span>/&gt;
&lt;/providers&gt;
&lt;/ajaxSettings&gt;
&lt;/ajaxNet&gt;</pre>

Any feedback welcome, use the comments on this page or the Google group [3].