Download AjaxPro Beta with jQuery Support

Tags: AJAX, Ajax.NET, ASP.NET, JavaScript, jQuery, JSON

Sunday, April 15, 2007 7:09:37 PM

I forgot to put the beta version online that will support jQuery and json.js from http://www.json.org. You can download the latest beta of the AjaxPro library at http://www.ajaxpro.info/download/jQueryAjaxPro.zip. 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]
public static string HelloWorld(string s)
{
   return "Hello " + s + "!";
}

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.

MyClass_class = function() {};
MyClass_class.prototype.url = '/WebSite2/ajaxpro/_Default,App_Web_hae3khd4.ashx';
MyClass_class.prototype.HelloWorld = function(s, onsuccess, onerror) {

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

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:

<%@ Page Language="C#" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" src="json.js"></script>
    <script type="text/javascript" src="jquery-latest.js"></script>
    <script type="text/javascript">
        jQuery.noConflict();
    </script>
    
</head>
<body>
    <form id="form1" runat="server">
    
    <div id="display"></div>

   <script type="text/javascript">

   $(document).ready(function() {
      MyClass.HelloWorld("Michael Schwarz", function(res) {
         jQuery("#display").html(res);
      });
   });
   
   </script>
    
    </form>
</body>
</html>

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:

<ajaxNet>
   <ajaxSettings>
      <scriptReplacements>
         <file name="prototype" path="" />
         <file name="core" path="" />
         <file name="converter" path="" />
      </scriptReplacements>
      <providers>
         <typeJavaScriptProvider 
            type="AjaxPro.jQueryTypeJavaScriptProvider, AjaxPro.2"/>
      </providers>
   </ajaxSettings>
</ajaxNet>

 

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

No Comments