Using DataView to Bind Client Side Template in ASP.NET AJAX 4.0

Introduction

In this article I will illustrate a step by step process of performing a client template binding using a DataView in AJAX 4.0. Client template binding is a notable feature in AJAX 4.0 which will allow developers to bind the data to a client side control like an HTMLTable and the data access (ADO.NET data service) will also be called from the client side making sure that the code behind the web site will not be involved in fetching the data or binding it to the control.

In this article for fetching the data from the database I will be creating an entity data model and an ADO.NET data service for exposing the data.

Create demo application

Since the article is about ASP.NET applications, as a first step let us go ahead and create a basic web site. Create a website which is called as Empty Website in the New Website window. If you create a website named ASP.NET website in VS2010 the website will be created with a pre defined website template which will include basic styles, login, register user pages, etc., which is not required for us in this demo.

Adding a Local Database

Add an App_Data ASP.NET folder and add a local database under it. I am adding it as a local database since it doesn't require any dedicated server for working against. Name it EmployeeDatabase and create a table called Employee in the database. Fig 1.0 shows the schema of the Employee table.

Fig 1.0 - Add some sample data to the Employee table, I have the screen shot of my sample data in Fig 1.1

Fig 1.1
Represent the Employee table using ADO.NET Entity Data Model

Add an App_Code ASP.NET folder and add an ADO.NET Entity Data Model for representing the Employee table at the application level.

Name the entity data model as EmployeeDataModel.edmx, define the SQL connection and choose the Employee table from the Employee database. Below is the connection string which will be generated and kept in the web.config file:

In order to do a data retrieval from the AJAX libraries on the client side the data access should be exposed through web service, WCF service or an ADO.NET data service. For this demo application I will use ADO.NET data service.

Right click on the website and add ad ADO.NET Data Service and name it EmployeeDataService.svc.
Below is the code behind for the data service:

Using DataView to Bind Client Side Template in ASP.NET AJAX 4.0

Add ASP.NET AJAX 4.0 and JQuery libraries

Download AJAX 4.0 beta libraries from here. The libraries which are required for the client side template binding are listed below:

MicrosoftAjax.js - For normal ajax functionalities

MicrosoftAjaxAdoNet.js - Since we use Sys.Data.AdoNetDataContext object

MicrosoftAjaxTemplates.js - Since we use Sys.UI.DataView for binding data to client templates

Only adding the above JavaScript libraries to the website should be enough. In our demo web site I am adding their debug versions.
Add the JQuery library as well to the website since we will be using JQuery for getting the client template and creating AdoNetDataContext and DataView objects.

Create another .js file named ClientBinding.js and leave it empty which we will use to write the JavaScript code to retrieve data and binding it to the client template.

Define a StyleSheet

Add a new .css file and name it as Default.css. Add styles to the .css file since we are going to create an HTML table to which the data is going to be binded. Below is the style sheet content:

In the above code check the way the header is defined and I am sure that you would ask yourself what the double curly braces around the column names are. Well in AJAX 4.0, binding this is the syntax used to define column binding. You could also use {binding columnName} instead of {{columnName}}.

Also note the tbody of the table is decorated with the class sys-template which is nothing but display:none. This is done in order to hide the static row defined and only show the databound rows.

Now let us open the javascript file ClientBinding.js and start writing the code to perform the data retrieval and template binding. I am making use of the add_init event of the page so this code is run during the page initialization event. Here is the JavaScript code:

Note that I am passing the fetchParameters as $orderby ID so the records displayed on the page would be ordered by the column ID. Now run the application by setting EmployeeUI.aspx as the start page.

Fig 3.0 shows the output on the browser

[data4.jpg]
Fig 3.0 - Formatting data

Everything looks great about this client side template binding except the date field, the time stamp on the date looks ugly. What if I want to format the date which is getting bound? Here is the solution, create a function named formatDate in the ClientBinding.js file to return the formatted date. Below is the function:

In the EmployeeUI.aspx page in the td element for JoiningDate change the databinding script as {binding JoiningDate, convert=formatDate}, this will call the function formatDate and get the formatted date back. So here is the modified .aspx code:

Conclusion

I have attached the source code for this demo web site. The feature doesn't end here. In my next article I will be demonstrating how to perform a two way binding in the client side templates using AJAX 4.0. Hope you enjoyed!

About the Author

V.N.S Arun

I work for an MNC in Bangalore, India. I am fond of
writing articles, posting answers in forums and submitting tips in
dotnet. To contact me please feel free to make use of the "Send
Email" option next to the display name.

Comments

There are no comments yet. Be the first to comment!

You must have javascript enabled in order to post comments.

Leave a Comment

Your email address will not be published. All fields are required.

Name

Email

Title

Comment

Top White Papers and Webcasts

When individual departments procure cloud service for their own use, they usually don't consider the hazardous organization-wide implications. Read this paper to learn best practices for setting up an internal, IT-based cloud brokerage function that service the entire organization. Find out how this approach enables you to retain top-down visibility and control of network security and manage the impact of cloud traffic on your WAN.

U.S. companies are desperately trying to recruit and hire skilled software engineers and developers, but there is simply not enough quality talent to go around. Tiempo Development is a nearshore software development company. Our headquarters are in AZ, but we are a pioneer and leader in outsourcing to Mexico, based on our three software development centers there. We have a proven process and we are experts at providing our customers with powerful solutions. We transform ideas into reality.