LA.NET [EN]

Mar 07

Update: Andre pointed out that I shouldn’t be calling this a postback because this isn’t posting any data back to the server. And yes, he’s right. Oh well, now it’s too late to change the title so I’ll leave it just like that. So, if you’re reading this, keep in mind that in this post postback should be read as async request to the server]

Today we’re going to take a look at the last interesting feature which is available on the AJAX MVC helpers: running a partial postback by clicking on a hyperlink. The idea is to add an anchor to a page and configure it so that a click starts a partial postback to the server. To make things a little bit interesting, we’re going to return a JSON response and we’re going to handle it on the complete method that fires up on the client side (by doing this, we’ll be seeing another available option to the traditional one where you return HTML and rely on the client MS AJAX framework for updating the HTML).

As you might expect, you can easily add the anchor that will make all this happen through several server (extension) methods (overloads) available on the AjaxHelper class. In the next snippet, we’re using one of the overloads of the ActionLink method to insert the anchor that performs the partial postback request on the view:

<%
    var options2 = new AjaxOptions{
      OnComplete = "handleComplete",
    };
    %>
<%= Ajax.ActionLink("AJAX link", "HandleAjaxLink" , options2)%>

As you can see,we need to specify the AJAX options by passing an instance of type AjaxOptions. In this case,we’re only specifying the JS method that should be called when the response is returned from the server. Since we’ll be doing everything on that method, we don’t need to specify anything else.

When the previous view is rendered, you’ll end up with the following HTML:

<a href="Home/HandleAjaxLink" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, httpMethod: ”POST”, loadingElementId: ”info”, onComplete: Function.createDelegate(this, handleComplete) });">AJAX link</a>

This is really similar to what you get when you use an “AJAX form”. The main difference is that you’ll end up getting no payload for the request. Everything else we’ve said about the life cycle of the request associated to an “AJAX form” is also true for this kind of postback, so we’re not going to repeat it here. Going back to the example, we’re just returning some simple JSON from the server method:

public ActionResult HandleAjaxLink() {
  var user = new { Id = 1, Name = "Luis"};
  return Json(user);
}

And now we’re ready to intercept the response returned on  the client side (notice that we’re using the handleComplete JS method for handling the OnComplete event on the client side – notice that we do this on the AjaxOptions object that is passed to the ActionLink method). Here’s the JS code I’ve written for it:

function handleComplete(context) {
  var a = Sys.Serialization.JavaScriptSerializer.deserialize(
                                                                   context.get_data() );
  alert(a.Id + "-" + a.Name);
  if (context.get_loadingElement()) {
    Sys.UI.DomElement.setVisible(context.get_loadingElement(), false);
  }
  return false;
}

As you can see, we’re reusing the JavaScriptSerializer to recover the returned JSON response (read this to understand why). After that, we’re just showing the returned info through an alert message. Then, there’s something which we need to remember to do: hide the loading element if we’re using one. Notice that you’ll only need to do this if you’re intercepting the normal processing of the response on the client side (like we’re doing here by returning false from the method). In my opinion, this should be done by the framework, but the truth is that it’s not…).

And that’s all for today. Keep tuned for more on MVC framework.

1 comment so far

  1. Andre
    1:00 am - 3-8-2009

    Hi,
    I”m kind of confused by what you call a Postback here. Aren”t you just making an asynchronous request to get a serialized Javascript response from the server?

    If you”ve got no Viewstate and no form is submitted isn”t this a normal Ajax request and not a Postback?

    Anyway, really interesting article.

    Thanks.