davidpirek.com | on UI, JavaScript, and ASP.NET

Using ASP.NET with jquery: Jquery ASP.NET API source code tutorial

3/13/2008

I have been spending much time in recent months building ASP.NET websites with jquery as the JavaScript library framework. From these projects I was able to learn much about how to interact jquery with ASP.NET. In this post I will share of the solutions.

If you have been coding AJAX apps for a while, you probably got over doing just simple animations and AJAX requests and now you want to do more than that. I call this the “level two” of AJAX development. The characteristics are when you start using POST as an AJAX method and JSON as your data format for response.

OK, enough theory, let’s get our hands dirty: Let’s take a practical scenario, you are building a social networking site, and you wan to do a simple “add to my friends” functionality to a page that lists your users. Two things need to happened, after you click the “add a friend” button, the user needs to disappear from the “list” (he/she is your friend now, so is being moved to the friends list), second you need to reflect this change in the database.

Hiding friend after the click:

In jquery this is really simple, you can use the .hide() method. The only tricky part is the assign some kind of unique ID that will tell the click event which wrapper div to hide. I one of the easiest ways to do this is you can hide the variable into one of the elements properties: (id, href, or title)

$(document).ready(function(){
    $(".add_friend").click(function(){
            var strId = $(this).attr("id");
            strId = strId.slice(1);
            $("#" + arrS[1]).hide();
    return false;
    });
});

And here is the THML part 

<div id="id_123">
	<!--
	Whatever user info you wnat here...
	-->

	<a href="#id_123" class="add_friend">add to my friends</a>
</div> 

Changing of the server: writing the change to the database:

Now we are getting to the POST method. Despite the confusions going around, ding a post in AJAX as simple doing get. It is just one of the properties of the XMLHTTP request. Instead of putting the pairs of values in the query string, you just put it inside of the objects. I have seen developers trying to write HTML of a form inside of IFRAMES… nope that’s not how you do it. Lastly as you are posting to another page, you need to catch you value pars on the page. In ASP.NET is very easy: instead of request.querystring(“id”) which you would be using in your GET method, you just use request.form(“id”)

Here an example what the JavaScript would look like:

$(document).ready(function(){
    $(".add_friend").click(function(){
            var strId = $(this).attr("id");
            strId = strId.slice(1);
            $.post("ajax_post.aspx",
                { m: "SharePhoto", 
                p: arrS[1], 
                p2: arrS[2],
                p3: arrS[1]}, 
                function(data){
            });  
    return false;
    });
}); 

This is how you would be catching the variables on the ASP.NET pag

 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

	strMethod = Request.Form("m") 'm = method
	strProperty = Request.Form("p") 'p = property1
	strProperty2 = Request.Form("p2") 'p = property2
	strProperty3 = Request.Form("p3") 'p = property3

End Sub

Finally, here are some examples of live sites where I have implemented this:

oznamkujucitele.cz (The voting on this page is actually done through an AJAX POST, although the page refreshes in the end, this refresh is done in JavaScript just refreshes the page to get the next image and the advertising impressions.)

fungu.cz (The digg-like voting.)