Adding Ajax Support to the ASP.NET MVC Framework

Posted by Hartmut Wilms on Dec 28, 2007

Sections

Development

Topics

.NET Framework ,

.NET

Tags

MVC ,

ASP.NET ,

AJAX ,

Scriptaculous ,

jQuery

The official CTP release of the ASP.NET MVC Framework does not include any support for AJAX, yet. In the meantime there are several samples available, which show how to add AJAX features to ASP.NET MVC applications.

Nikhil Kothari offers a sample application and sample code, which shows how to add AJAX support (like APS.NET AJAX) to the ASP.NET MVC Framework:

AjaxController is a class I added, and it introduces a new property IsAjaxRequest, which I can use in my action methods to do things like render different views. It also introduces members such as RenderPartial, which can be used to render a portion of the user interface defined within a partial view as opposed to the full page. So here is my updated controller and the updated Add method with the changes and additions in bold.

public class TaskListController : AjaxController {
	public void Add(string name) {
 		Task newTask = null;
		if (String.IsNullOrEmpty(name) == false) {
 			newTask = _taskDB.AddTask(name);         
		}                  
		if (IsAjaxRequest) {
			if (newTask != null) {
				RenderPartial("TaskView", newTask);
			}
		} else {
			[...]
		}
	} 
}

In addition to the controller extensions Nikhil provided some extension methods to be used within the views: "RenderBeginForm which renders a regular form tag, RenderBeginAjaxForm which renders an Ajax-enabled form [...], and RenderEndForm". The sample "shows in brief a first stab at getting the core aspects of the Ajax functionality that exists in ASP.NET pages - partial rendering, behaviors and extender controls - and bringing those concepts to MVC views".

Kevin Hoffmann utters his concerns in the article "How to Hack AJAX Into the ASP.NET MVC Framework". At first he criticizes that Nikhils example only shows how to update small parts of a web page by rendering HTML. In his opinion

Ajax, in enterprise applications, is not just about rendering small partial divs dynamically. Sure, that's a big part of it, but by and large when people are using an XML HTTP Request object to hit the server controller for data, they're getting raw data back, they're not usually getting a pre-rendered div. This is often the case when the controller being hit is also providing raw data to smart clients through a REST/POX/web services type of action. So, while I like the notion of RenderPartial for some scenarios, A better example would have been to render a view that outputs simple XML or, even better, JSON.

He is even more worried about the IsAjaxRequest property within the controller:

MVC is all about proper separation of concerns. There's one line of code in the sample that I think is violating that, and that's the IsAjaxRequest property. This all smacks of someone attempting to make the MVC framework feel more like the old Postback world and quite frankly, the old postback world can eat my shorts. The controller, IMHO, is just a controller. It should not ever have to determine if it is rendering Ajax or rendering Regular. Ajax or regular HTML is a view decision not a controller decision. The job of the controller is to fetch the appropriate data required for rendering a view, and then pick the view to render.

Kevin concludes that "What [he] really want[s] to see from Microsoft is a really compelling reason why [he] shouldn't just take some off-the-shelf Ajax library and make it work with the MVC stuff."

For those who comply with Kevin's reasoning, Chad Myers has provided two ways of integrating an off-the-shelf Ajax library with ASP.NET MVC. In Using script.aculo.us with ASP.NET MVC Chad shows how to integrate the script.aculo.us client-side JavaScript + AJAX framework and use some of their controls within ASP.NET MVC views. script.aculo.us is "A collection of Web 2.0 style JavaScript libraries that help web developers to easily add visual and ajax effects to projects".

The second approach shows how to use jQuery with ASP.NET MVC. jQuery "is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages". Chad ports the Edit In Place tutorial by Jack Born to ASP.NET MVC thereby showing how easily jQuery can be integrated into the new framework. According to Chad it is almost as easy as "keep thinking "ASP.NET MVC" whenever the [jQuery] examples say "PHP" or "Ruby" on the server side if you plan on using ASP.NET MVC".

• Older >