After we have finished the Flickr MVC app last time. This time will be sequel, ajaxified it.
Although the ASP.NET MVC do provide the abstract ajax helper class, only implementation exists publicly is Nikhil's. Certainly, ASP.NET Team will include the ASP.NET AJAX/Microsoft AJAX Library helper in the MVC framework for next CTP bits. As for this tutorial, I will continue with jquery instead of Microsoft AJAX Library because I'm more familiar with it.
The ajaxified instructions is mainly related to the view. In order to use jquery, put the library in ~/Content and add the reference to it in the layout.
<head runat="server">
<title>My Sample MVC Application</title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../Content/jquery.js"></script>
</head>
Next, Open the ~/Views/Home/Index.aspx. Then, add a placeholder div called "result" in the view. We'll use this div to display the response from the ajax call. Additionally, add a eye-candy loading indicator to let user knows that the page is being loaded.
<%Html.Form("Search", "Home", FormExtensions.FormMethod.post, new { ID = "theform" });%>
<label for="tags">
Tags:
</label>
<%=Html.TextBox("tags", 30) %>
<%=Html.SubmitButton("find", "Find", "") %>
<img src="../../Content/loading.gif" id="spinner" style="display:none;" />
</form>
<div id="result"></div>
Last but not least, add some lines of script to make an ajax call once the form is goin to be submitted.
$(document).ready(function() {
$('#theform').submit(function (){
$.post('/Home/Search', {'tags':$('#tags')[0].value}, completeRequest);
$('#spinner').show();
$('#result').slideUp(1500);
return false;
});
});
function completeRequest(r){
$('#result').html(r).slideDown(1500);
$('#spinner').hide();
}
The script will be invoked when the DOM is ready. It'll hook the form submit event, post the textbox value to ~/Home/Search, make the loading indicator visible, hide the result div and then, cancel the event to prevent the full post process. And then, after the request is completed, completeRequest function will be called. It will replace the div's content with the result from the response and then reveal the div by using slide down effect. And lastly, hide the indicator.
Try the page and Voila! The ajaxified is completed.
Compare to the traditional web form, MVC has a better degree to integrate with the javascript library. Though I use the web form view engine, extension method on the HTML Helper that makes the markup more flexible, no generated id. However, integration with the jquery may not be the easiest one for ASP.NET MVC as ASP.NET Team will deliver its own Ajax helper.
In conclusion, AJAX in ASP.NET MVC has a lot of room for improvement, either officially or unofficially. ASP.NET AJAX becomes useless when using it with ASP.NET MVC. However, using the alternative libraries in MVC require less effort than the traditional way. jQquery and ExtJs are the most notable. Besides, mootools and YUI are also gaining their share. Anyway, Microsoft will push ASP.NET AJAX little ahead those 3rd party library through their Ajax Helper once again.
