AJAX Live Binding in .NET 3.5

One of the seminars at TechEd this year was on the new Live Binding method that Microsoft announced for pure AJAX applications. In the past working with pure AJAX applications (not using the update panel, think of XMLHTTP), required that you do a lot of DOM manipulations, or have a server side controller that generates the HTML which is then plugged into the client HTML stream. The first option becomes extremely tedious, hard to manage and is very error prone. The latter method works, but requires that you mix your logic and UI. While it may be possible to separate the two, it still does not make sense why the server has to take the load of structuring HTML documents when it can be busy doing far more important things. So neither option is geared toward businesses. Which is why Microsoft implemented the new Live Binding technique.

Live Binding works by binding a regular HTML page to a web service using jQuery, and the Microsoft AJAX Framework. Let’s look at an example:

The first step is to create a HTML template page, which is nothing but a regular HTML page with special markup where the active binding data is going to change, in this case {{Username}}, {{Title}}, and {{GroupMemberships}}

HTML Template

<table border="1" class="template-table" cellpadding="5">
	<thead>
		<tr>
			<th>Username</th>
			<th>Title</th>
			<th>Description</th>
		</tr>
	</thead>
	<tbody id="template" class="sys-template">
		<tr class="{{$index%2?'odd':'even'}}">
			<td>{{ Username }}</td>
			<td>{{ Title }}</td>
			<td>{{ GroupMemberships }}</td>
		</tr>
	</tbody>
</table>

Secondly, we need a web service that will return the data to the template. In this case I am querying our ActiveDirectory using the ActiveDirectory data access layer for all users in the Test OU.

Web Service

[ScriptService]
public class Service1: WebService
{

	[WebMethod]
	public List<Law.Entity.User> HelloWorld() {
		Law.Dal.ActiveDirectoryDal ad = new Law.Dal.ActiveDirectoryDal();
		List<Law.Entity.User> users = ad.GetUsersByOrganizationalUnit( Law.Utils.Enumeration.ADConnections.Test );
		return users;
	}
}

Okay, now that we have the template and data service provider, we are ready to plug the template with the web service. With just few more lines of jQuery, and Microsoft AJAX JavaScript code we can accomplish that:

Actual Binding using jQuery and Microsoft AJAX

$(document).ready(function() {
	var dataContext = $create(Sys.Data.DataContext,
	{
		serviceUri: "/ajax/service/service1.asmx"
	});

	var template = $create(Sys.UI.DataView,
	{
		autoFetch: true,
		dataProvider: dataContext,
		fetchOperation: "HelloWorld",
		fetchParameters: {}
	},
	null,
	null,
	$get("template"))
});

Let’s talk through this, to see what is going on. First notice we are using the standard jQuery document ready notation $(document).ready to run some javascript when the document is ready. The first thing is to create a DataContext, a DataContext is basically an object that talks to a web service, in this case I’ve set the serviceUri to the web service we discussed earlier.

The second and the last step is to create a DataView. A DataView uses a DataContext to populate a template – that’s it. Setting the autoFetch to true just says that whenever we hit that line of code start fetching the data, the dataProvider, simply points to the dataContext object and the fetchOperation basically says which web service method to call in the dataContext. And finally, the last statement $get(”template”) is a shorter form of document.getElementById which returns a JavaScript DOM object to the Id.

With that in place, we can run the code and it should display users from the ActiveDirectory, using a web services and live binding.

May 25th, 2009 (Updates)

One of the questions that I have seen come up often is what JavaScript libraries are required in order for this to work. Here’s a list of all the JS files and where you can download them from:

MicrosoftAjax.debug.js
MicrosoftAjaxAdoNet.debug.js
MicrosoftAjaxTemplates.debug.js
jquery-1.3.2.min.js

jQuery can be download from jQuery.com. The MicrosoftAjax libraries can be downloaded from CodePlex