Yahoo! JavaScript Library and AjaxPro

Tags: .NET, AJAX, Ajax.NET, ASP.NET, JavaScript, JSON, Web 2.0

Friday, October 6, 2006 6:38:00 AM

There are a lot of great JavaScript libraries available that are used be developers to add Ajax and Web 2.0 to their web sites. While AjaxPro is optimized to run on all web browsers including Windows Mobile devices I got some requests on supporting the Yahoo! JavaScript libraries. I have done some internal changes that will allow you do use the Yahoo! JavaScript files instead of the generated files from AjaxPro. Because there is no JSON parser in the Yahoo! lib I'm using the json.js written by Douglas Crockford. But first have a look at the ASP.NET page (C#):

[AjaxPro.AjaxNamespace("Home")]
public partial class _Default : System.Web.UI.Page
{
    [AjaxPro.AjaxMethod]
    public static string HelloWorld(string name)
    {
        return "Hello " + name;
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        // AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));
    }
}

The only difference I do is removing the RegisterTypeForAjax call which will include the AjaxPro JavaScript files to the current page. Now, have a look at the client-side JavaScript source code:

<script type="text/javascript">

var callback = {
    success: function(json) {
        var o = json.parseJSON();
        alert(o.result);
    }
};

var args = {};
args.name = "Michael"; 

YAHOO.util.Connect.initHeader("x-ajaxpro-method", "HelloWorld"); 
var connectionObject = YAHOO.util.Connect.asyncRequest("POST",
    "ajaxpro/_Default,App_Code.ashx", callback, args.toJSONString()); 

</script>

The first object callback is used to run an asyncronous XmlHttpRequest request. The sucsess function will be called when the requests is finished. Next we have the arguments we need for the .NET method HelloWorld. If you look in the C# source code above you will see the correct notation of the argument name:

var args = {};
args.name = "Michael";

To call an AjaxMethod AjaxPro is using a http header x-ajaxpro-method. In my example you have set this value to HelloWorld:

YAHOO.util.Connect.initHeader("x-ajaxpro-method", "HelloWorld");

Now, we can invoke the AjaxMethod using the YAHOO.util.Connect method. AjaxPro needs the arguments in the http body as a JSON string. For this I use the method toJSONString() which is included in the json.js from Douglas.

var connectionObject = YAHOO.util.Connect.asyncRequest("POST",
    "ajaxpro/_Default,App_Code.ashx", callback, args.toJSONString());

I will publish a first beta during the weekend.

7 Comments

  • interactive said

    Hi Adrian, yes, you simple do not use the RegisterTypeForAjax method and you are happy. Notice: this is currently not working in the release version, I will publish a new beta version this weekend!

  • Adrian Tanase said

    Sounds good. Great job, by the way, I used it for a project and I really like the philosophy of using Attributes.. it's really easy to integrate it into your project, without having to worry about the transport of data. PS: good luck with porting it to Java.

  • troy said

    This is great, however I am unable to get it to work with dojo. My dll reports version 6.10.6.2. Should this version support this feature? If not, where can I obtain the beta from? Also, what does the syntax "ajaxpro/_Default,App_Code.ashx" mean in your example? I presume this is the URL to post to but I don't understand the syntax and what each piece of data represents.

Comments have been disabled for this content.