Bind ASP.NET DataGrid using Ajax-Enabled WCF Service without Refreshing your page

• Download source - 41.18 KB

Introduction

This article focuses on how to bind ASP.NET GridView using WCF Service and Client Scripting to avoid page postback and provide more performance to our ASP.NET pages.

Background

I will describe all the details of the project including the small details to provide more experience to all developers, but still you can modify the code as per your need so you can (for example) retrieve the List of data from database because in this article. I use static data from my code to avoid you working with attached database and connections and to keep you from forgetting the main idea of our article.

Step 1: Create Employee Class and Define the Contracts

Here we are going to create an Employee class to bind the Grid Rows by Objects from this class:

public class Employee
[System.Runtime.Serialization.DataContract]
    public class Employee
    {
        //Fields
        private int _id;
        private string _firstName;
        private string _Position;

        //Constructor
        public Employee(int EmpID,string EmpFirstName,string EmpPosition)
        {
            Id = EmpID;
            FirstName = EmpFirstName;
            Position = EmpPosition;
        }

        //Properties
        [System.Runtime.Serialization.DataMember]
        public int Id
        {
            get { return _id; }
            set { _id = value; }
        }
        [System.Runtime.Serialization.DataMember]
        public string FirstName
        {
            get { return _firstName; }
            set { _firstName = value; }
        }
        [System.Runtime.Serialization.DataMember]
        public string Position
        {
            get { return _Position; }
            set { _Position = value; }
        }
    }

Step 2: Create Ajax Enabled WCF Service

The main idea of creating Ajax-Enabled WCF Service is to provide Client Script Libraries that integrate cross-browser JavaScript and DHTML technologies.

Here is the function that will return Array of Employees:

[ServiceContract(Namespace = "EmployeeNS")]
    [AspNetCompatibilityRequirements
	(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class EmployeeService
    {
        [OperationContract]
        public Employee[] GetAllEmployees()
        {
            List<employee> EmployeesList = new List<employee>();

            Employee EmpObject = new Employee(1,"Omar",".Net Developer");

            EmployeesList.Add(EmpObject);

            Employee EmpObject2 = new Employee(2,"Ahmad","Manager");

            EmployeesList.Add(EmpObject2);

            return EmployeesList.ToArray();
        }

In the first line, you have to write the NAMESPACE of your Service Contract because you will call the Service from JavaScript by this NAMESPACE.

Now you have to modify the Markup of your service By adding this attribute in the service Markup(right click on the service and choose View Markup), Factory="System.ServiceModel.Activation.WebScriptServiceHostFactory", Now your WCF Service is Ready !!!

Note: By default, all your data will be serialized to JSON and will use POST to retrieve the data.

Step 3: Consume the WCF service from Client Side

Now you will use your WCF service from JavaScript and your page will be exactly like the code below:

1. Here, you will call the Namespace of your WCF Service
2. Here, you will call the Operation Contract (function) that you need, and you can send parameters here before onSuccess.
3. Here, you will set the path of the WCF Service

Note: Don't forget that your machine should be connected to the internet because there is a script called in the shadow box.

Step 4: Set the Default Columns for Your Grid

Your grid should have default Columns to build the structure of the columns and set the headers text, we will do that in the Page_Load function as below:

protected void Page_Load(object sender, EventArgs e)
        {
            DataTable dt = new DataTable();
            dt.Columns.AddRange(new DataColumn[] { new DataColumn("ID"), 
			new DataColumn("FirstName"), new DataColumn("Position") });
            EmployeesGridView.DataSource = dt;
            EmployeesGridView.DataBind();
        }

Now your application is ready to use.

Points of Interest

In my next article, I will explain how we can make paging on our DataGrid using Ajax without refreshing the page.