New Features in ASP.NET Ajax 4.0

Ajax has quickly become a technology of choice for building fast and responsive user interfaces. This article looks at the new features introduced in ASP.NET Ajax 4.0 with code examples wherever applicable.

What is Ajax?

Ajax is an acronym for Asynchronous JavaScript and XML. It is a combination of different technologies, used for building rich and responsive user interfaces. The benefits of using Ajax in your applications include:

• Faster page renderings and support for partial page updates
• Rich and, responsive user interfaces
• Reduced consumption of server resources

ASP.NET Ajax is a free framework that comes from Microsoft and can be used to design and implement the next generation of cross- browser Web applications with rich and responsive user interfaces.

ASP.NET Ajax 4.0

Now that we have had a quick look at what Ajax is and what its features are, let's delve deep into what ASP.NET Ajax 4.0 has in store for us. The "ASP.NET AJAX 4.0 Preview 4 Release Notes and ReadMe" document available at CodePlex states: "The AJAX functionality in ASP.NET 4.0 Preview 4 enables new client data scenarios for page and component developers that allow JSON data from the server to be rendered as HTML in a highly manageable and efficient way." ASP.NET Ajax 4.0 has in it many interesting features. Before we begin looking at those features, let's first know what the compatible browsers are. Microsoft ASP.NET Ajax 4.0 is supported on a wide variety of web browsers. These include:

• Microsoft Internet Explorer 6, 7 and 8 RC1
• Mozilla Firefox 2 and 3
• Apple Safari 3
• Opera 9.6

Getting Started with ASP.NET Ajax 4.0

You can Ajax - enable a web page either by using the ScriptManager control or by using <script> tags. Here is an example of the markup code that illustrates how you can Ajax - enable a web page using the ScriptManager control.

Listing 1

<asp:ScriptManager ID="ScriptManager1" runat="server"> <Scripts> <asp:ScriptReference Name="MicrosoftAjax.js" Path="~/scripts/MicrosoftAjax.js" /> <asp:ScriptReference ScriptMode="Inherit" Path="~/scripts/MicrosoftAjaxTemplates.js" /> <asp:ScriptReference ScriptMode="Inherit" Path="~/scripts/MicrosoftAjaxAdoNet.js" /> </Scripts> </asp:ScriptManager>

And here is how you can Ajax - enable your web page by including scripts:

Listing 2

<script type="text/javascript" src="../scripts/MicrosoftAjax.debug.js"></script> <script type="text/javascript" src="../scripts/MicrosoftAjaxTemplates.debug.js"></script> <script type="text/javascript" src="../scripts/MicrosoftAjaxAdoNet.debug.js"></script>

New Ajax Enhancements in ASP.NET 4.0 Preview 4

AJAX 4.0 provides many flexible features - we will look at those features in this section. Here is a list of the enhancements made to the Preview 4 release of ASP.NET 4.0 for providing Ajax support:

• Support for Live data binding
• Support for Client-side template rendering
• Support for declarative instantiation of client components
• Support for using the Observer pattern on JavaScript objects and arrays
• Support for invoking ADO.NET Data Services and Data Contexts
• Support for the DataView control

Support for Live Data Binding

Live data binding is a concept that allows you to ensure that data is bound at real time. In essence, this ensures that if there is any change in the data source; the change is reflected on the data bound controls. The support for live data binding is provided in ASP.NET Ajax 4.0 through the Observer pattern. The Sys.Observer interface provides support for live data binding in ASP.NET Ajax 4.0. Note that such data binding can be either one-way or two-way. In the former case, if the source of the data changes after the template has been rendered, the rendered data would not be updated automatically. Here is an example that illustrates how you can specify one-way data binding in your markup code:

<h3>{{ FirstName }}</h3>

However in the later case, if the source of data changes, or vice-versa, the changes are reflected automatically. Here is a code snippet that illustrates how you can implement two-way data binding:

<input type="text" value="{binding FirstName}"/>

Support for Data Contexts and ADO.NET Data Service

ASP.NET AJAX contains two data contexts in MicrosoftAjaxAdoNet.js. These are:

• Sys.Data.DataContext
• Sys.Data.AdoNetDataContext

Here is how you can use Sys.Data.AdoNetDataContext in your application:

Listing 3

var dataContext = new Sys.Data.AdoNetDataContext(); dataContext.set_serviceUri("EmployeeDataService.svc"); dataContext.initialize();

Refer to the code listing above. The set_serviceUri() method is used to connect to and work with either ADO.NET Data Service or WCF service.

Accessing an ADO.NET Data Service using ASP.NET Ajax 4.0

The following code snippet shows how you can use the DataContext class:

Listing 4

<script type="text/javascript"> var dataContext = new Sys.Data.DataContext(); dataContext.set_serviceUri("../EmployeeDataService.svc"); dataContext.initialize(); </script>

Note that you are using an ADO.NET data service; you should use the AdoNetDataContext class in lieu of the DataContext class, which is more generic. Actually, the AdoNetDataContext class extends the DataContext class. In essence, the AdoNetDataContext class provides features that are more specific to ADO.NET, i.e., identity management, change management, support for hierarchical data, and optimistic concurrency. The following code snippet illustrates how you can use Ajax to read employee records from an ADO.NET Data Service and display the name and addresses of each of the employees.

Listing 5

<body xmlns:sys="javascript:Sys" xmlns:dataview="javascript:Sys.UI.DataView" sys:activate="*"> <h1>This is a Sample Application</h1> <div id="top"> <ul id="employeeListView" class="test sys-template" sys:attach="dataview" dataview:datasource="{{ new Sys.Data.AdoNetDataSource() }}" dataview:serviceuri="../AdventureWorksAdo.svc" dataview:query="Employee"> <li> {{ Name }} {{ Address }} </li> </ul> </div> </body>

Also, note that you should reference the necessary script files in your web form:

Listing 6

<script type="text/javascript" src="script/MicrosoftAjax.js"></script> <script type="text/javascript" src="script/MicrosoftAjaxTemplates.js"></script> <script type="text/javascript" src="script/MicrosoftAjaxAdoNet.js"></script>

Support for Observer Pattern

This feature can be used to provide a functionality in which any change to ordinary JavaScript objects will raise a notification that can later be handled in your code. The observer design pattern is used to set observers on an object where any state changes on the object are handled by respective event handlers. Microsoft states: "The observer pattern can be used to establish live bindings between UI elements and objects or arrays, such as those you might get from a JSON Web service." Reference: ASP.NET AJAX 4.0 Preview 4 Release Notes and ReadMe document available at CodePlex.

Support for the Observer design pattern is provided in ASP.NET Ajax 4.0 through the use of the Sys.Observer class. The following code snippet illustrates the use of the Sys.Observer class:

Listing 7

var employee = { name: "John Brownlow", address: "UK", status: true } var employeePublisher = Sys.Observer.observe(employee); Sys.Observer.addPropertyChanged(employeePublisher, employeeSubscriber); employeePublisher.setValue("status", false); function employeeSubscriber(employee, eventArgs) { if (eventArgs.get_propertyName() == "status" && employee.status == false) { alert("This employee is no longer working in this organization"); } }

Support for the DataView control

The DataView control is used to bind to live data. In essence, you can use it to design and develop a dynamic data driven user interface. The DataView control is available in the System.UI.DataView namespace. The DataView control contains two important properties, namely, data and dataprovider. While the former is used to bind a JavaScript object, the later is used to connect to a WCF service. The following markup code shows how the DataView control can be used in ASP.NET Ajax 4.0:

Listing 8

<body xmlns:sys="javascript:Sys" xmlns:dataview="javascript:Sys.UI.DataView" sys:activate="*"> <ul sys:attach="dataview" class="sys-template" dataview:data="{{ dataArray }}"> <li> <h3>{{ EmployeeName }}</h3> <div>{{ Address }}</div> </li> </ul> </body>

Note that the data property of the DataView control is set to an array; the template is rendered once for each item in the array. Essentially, the DataView control supports binding to objects, arrays and services.

Suggested Readings

Here are a few links to more resources on this topic:

https://msdn.microsoft.com/en-us/magazine/cc972638.aspx

https://aspnet.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=24645

https://www.asp.net/learn/whitepapers/aspnet40/

Summary

In this article, we have had a look at the new features in ASP.NET Ajax 4.0 release and how we can use them in our applications. You can learn more on these new features of ASP.NET Ajax 4.0 from my upcoming book titled, "ASP.NET 4.0 Programming ". Here is the link to the book at Amazon: https://www.amazon.com/ASP-NET-4-0-Programming-Joydip-Kanjilal/dp/0071604103/ref=sr_1_6?ie=UTF8&s=books&qid=1251741055&sr=1-6

Find a programming school near you

Zip Code:

Subject: - Select All Subjects - Computer Applications Computer Engineering Computer Science Computer Prog. - Software Dev. Computer Game Programming Web Design Web Development Internet Systems Internet Certification Database Design and Development Information Systems Management Information Technology Project Management Network Design - Development Systems Analyst

Degree: - Select All Degrees - Associate's Bachelor's Master's Doctoral Certificates Diplomas Coursework MBA

Online Campus Both