CodeGuru content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.
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:
<connectionStrings>
<add name=”EmployeeDatabaseEntities” connectionString=”metadata=res://*/App_Code.EmployeeDataModel.csdl|res://*/App_Code.EmployeeDataModel.ssdl|res://*/App_Code.EmployeeDataModel.msl;provider=System.Data.SqlClient;provider connection string="Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\EmployeeDatabase.mdf;Integrated Security=True;Connect Timeout=30;User Instance=True;MultipleActiveResultSets=True"” providerName=”System.Data.EntityClient”/>
</connectionStrings>
Fig 2.0 shows the .edmx design
Fig 2.0 – Expose the data access using a ADO.NET data service
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:
public class EmployeeDataService : DataService<EmployeeDatabaseEntities>
{
// This method is called only once to initialize service-wide policies.
public static void InitializeService(DataServiceConfiguration config)
{
config.SetEntitySetAccessRule(“*”, EntitySetRights.All);
}
}
Note that the inherited generic class DataService is strongly typed with EmployeeDatabaseEntities class which has been created automatically when entity model was created.
Here is the ServiceHost directive on the .svc file
<%@ ServiceHost Language=”C#” Factory=”System.Data.Services.DataServiceHostFactory” Service=”EmployeeDataService” %>
