I was noticing the asp.net mvc walkthrough has a section on the Beta1 ajax using the Microsoft ajax library. Although I’m a big fan of jQuery, these two libraries now come with the framework and can be used together quite well.
In the walkthrough the code samples show a simple call to a controller which returns a string. Let’s take that a step forward and show how it can return different types using the ‘ActionResult’.
First, make sure you include the scripts in your page – I suggest including them in the head of the master page – in the sample this is under Shared/Site.Master.
<script src="<%= Url.Content("~/Scripts/MicrosoftAjax.debug.js") %>"
type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js") %>"
type="text/javascript"></script>
(note: in the walkthrough, they are a bit outdated, it should now point to the Scripts folder, not the Content folder – which is what is recommended, as well as a part of the project template install)
Here is the sample – they have added this to the HomeController:
public string GetStatus()
{
return "Status OK at " + DateTime.Now.ToLongTimeString();
}
public string UpdateForm(string textBox1)
{
if (textBox1 != "Enter text")
{
return "You entered: \"" + textBox1.ToString() + "\" at " + DateTime.Now.ToLongTimeString();
}
return String.Empty;
}
In step one of this, I’m going to go ahead and make a change – where I prefer to return an ActionResult here.
Since it’s just returning a string, we can return using ‘Content’. Here is an example:
Adding Ajax Helpers to The View
The Mvc framework comes with several new Ajax helpers, the two I’m going to use here from the walkthrough is the Ajax.ActionLink and the Ajax.BeginForm. There are named identical to the Html.ActionLink and Html.BeginForm (previously this was called ‘Form’ – now in Beta1 it’s BeginForm)
Let’s look at the ActionLink:
<%= Ajax.ActionLink(“Update Status”, “GetStatus”, new AjaxOptions{UpdateTargetId=”status” }) %>
By default, since the the container view is the ‘Home/Index’, it will look for the Action on the HomeController called ‘GetStatus’. In the AjaxOptions – it is defining the target for the return of the GetStatus action. In this sample it is a span with id of ‘status’ : <span id=”status”>No Status</span> This can be a span, div, etc… Since we have told ‘GetStatus’ above to return ‘Content’ – it will return a string and place the result in the span element.
I prefer the syntax for the helpers that is included in the Microsoft. You’ll need to get this ‘futures’ assembly separately (here – you can learn more about it at the bottom of Scott Guthrie’s blog post on the beta1) and include it in the references as well as add a the following to the ‘namespace’ section of the web.config:
<add namespace=”Microsoft.Web.Mvc”/>
(personally I wish they would have just included it in the install… but you know how it is… lol)
So, for some reason they didn’t include the same syntax for the Ajax helpers as they did the Html helpers, the strongly typed ActionLink, ie. <%= Html.ActionLink<HomeController>(c => c.GetStatus(), “Update Status”)%>
This is preferred by me, hopefully they will include it, if not… well, I’ll make another post on how to build your own 
Let’s get back on track.
When we run the application, we will see the following:
Clicking ‘Update Status’ makes a call back to the Action – asynchronously:
What is happening is that the helper control is creating the link in the html using the asp.net ajax library, looking at the source, you’ll see the following:
<a href=”/Home/GetStatus” onclick=”Sys.Mvc.AsyncHyperlink.handleClick(this,
new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace,
updateTargetId: ‘status’ });”>Update Status</a>
Let’s take a brief look at the code here and how we can include some events to the Ajax.ActionLink,
the screenshot below shows the available ‘AjaxOptions’:
Let’s add some functionality and handle the 2 most common events, the ‘OnBegin’ and ‘OnSuccess’:
The ‘OnBegin’ is going to handle the event fired before the actual ajax call is made, and the ‘OnSuccess’
will let us handle when the call is done (note: always handle the ‘OnFailure’ as well, in case of any errors!)
In my example I’m adding ‘OnRequest’ and ‘OnResponse’ – these are javascript functions, let’s look here:
When the link is clicked, an alert box will open, when it’s done, you’ll get a second alert box. As you might notice I’ve included the ‘content’ in the OnResponse. Using Firebug, we can look at the object in detail:
We can see the xmlHttpRequest object and it’s request to the action ‘GetStatus’. I’m not going to go into more detail into the asp.net ajax library, but you can read more here.
I should note, a good way to handle your own validation in javascript is to make validation calls in the ‘OnBegin’ – and if you want to stop the ajax call from continuing, you can return false.
So, let’s go ahead and show a similiar example with a Ajax.BeginForm, as with above, I’m converting the sample that returns a string, to return an ActionResult, using return Content(…):
In the view, I’m using the Ajax.BeginForm – (note that I’m wrapping it in a using statement, which I consider to be the best practice):
I’ve included handlers for the OnComplete, OnBeing, and OnFailure:
(I did manage to sneak in some jQuery goodness, using the $(“#textBox1″) to get the textBox1 element’s value)
Let’s make a minor adjustment here! Let’s say I want to return some content, outside of ‘just a string’ ? What I do on my project is have the ActionResult return a control. Let’s set this up for our grand finale:
Step One:
Create a new Ajax.ActionLink: (you can do this with a form)
Step Two:
Create the action on the controller (home):
Step Three:
Create a ‘MVC View User Control’ (ascx):
Step Four:
Add some content to the control:
As I show, you can add a model to this control, etc… if you want to see that let me know.
Now, let’s run this add see what our result is:
We added the link at the bottom:
When it get’s clicked, it makes an asynchronous call, and then updating just the ‘status’ span (partial page update):
This is, imo, much more efficient and clean, then let’s say an ‘UpdatePanel’ in Webforms. I have full control over the page. The addition of the asp.net ajax libraries with ajax helpers really helps make this simple to use but extremely powerful.
Example available
![logo[1]](http://www.codeplex.org/images/logo.gif "logo[1]"){kind=logo}
