ASP.NET MVC3 XML & ExtJS4

In this example I will demonstrate how to use an ExtJS4 store to perform an XML data read from an ASP.NET MVC3 controller. First let me say that I wasted a LOT of time reading fake tutorials on these keywords – seems there are a lot of people who can explain the ASP.NET MVC3 side, but not how to actually connect it to an ExtJS4 store using a clean proxy, AND pass parameters to the server. Especially using XML for the return data.

So, let’s say we just want a basic search box – when user types something in and hits Search, we will use an ExtJS4 store and POST to an ASP.NET MVC3 method, passing the search query as a JSON parameter, while returning results in XML. Here’s the basic ExtJS model & store configuration:

// Basic model
Ext.define('MY.model.SearchResult', {
	extend: 'Ext.data.Model',
	fields: ['id','html']
});
 
// Basic store
Ext.create('Ext.data.Store',{
	model: 'MY.model.SearchResult',
	proxy: Ext.create('MY.proxy.MSAjaxProxy', {
		url: '/User/Search',
		reader: { type: 'xml', root: 'matches', record: 'match' }
	}) // eo proxy
}) // eo store

…notice we’re using a “MY.proxy.MSAjaxProxy” – see this post where I first put it together. To this day, I have been unable to get an ExtJS4 store working with ASP.NET without my custom proxy – whether using ASP.NET AJAX Extensions 1.0 (2007) or ASP.NET MVC3 (2011?).

Performing a search couldn’t be easier on the JS side, assuming query is the search parameter:

store.proxy.extraParams.query = query;
store.load();

On the server side we must first set up ASP.NET MVC3 in our web application. For me, on s2k8 R2 with IIS 7.5, this meant using Microsoft’s Web Platform Installer to install "ASP.NET MVC3 Visual Studio 2010" (even though I don’t have Visual Studio on the computer) and then mapping out the following dependencies in web.config:

<configuration>  
	...
	<system.web>
		...
		<compilation defaultLanguage="c#" debug="true" targetFramework="4.0">
			<assemblies>
				<add assembly="System.Web.Routing, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
				<add assembly="System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
			</assemblies>
		</compilation>
		...
	</system.web>
	...
</configuration>

Next, I mapped the /User/Search route in my Global.asax code-behind class:

public class Global : HttpApplication
{
	protected void Application_Start(Object sender, EventArgs e)
	{
		routes.MapRoute(
			"UserSearch",
			"User/Search",
			new { controller = "User", action = "Search" } 
		);
	}
}

Finally, here’s the actual web service method:

using System;
using System.Web;
using System.Web.Mvc;
using System.Collections.Generic;
using System.Xml;
using System.Xml.Linq;
 
namespace My.Org
{
    public class UserController : Controller
    {
		[HttpPost]
		public ContentResult Search( string query )
		{
			XElement matches = new XElement("matches");
			XElement match = null;
			XDocument doc = new XDocument(new XDeclaration("1.0", "utf-8", "yes"),matches);
 
			for ( int i = 0; i < 100; i++ )
			{
				// Build XML node
				match = new XElement("match");
				match.Add( new XElement("id", "#" + i) );
				match.Add( new XElement("html", "Numero " + i) );
				matches.Add(match);
			}
 
			ContentResult ret = new ContentResult();
			ret.ContentType = "text/xml";
			ret.Content = doc.ToString();
			return ret;
		} // eo function
 
    }
}

…note the highlighted lines – this is how we mark the response as XML.

Rating: 6.9/10 (9 votes cast)

ASP.NET MVC3 XML & ExtJS4, 6.9 out of 10 based on 9 ratings

ASP.NET MVC3 XML & ExtJS4

One thought on “ASP.NET MVC3 XML & ExtJS4”

Leave a Reply Cancel reply