Get Client Side and Server Side Data in Grid View Using jQuery and Ajax

Introduction

In this article, you will learn how to get client-side and server-side data in a Grid View using jQuery and Ajax.

Step 1. First of all, we will create a table in a .aspx page of our Application and will also add two buttons in it to get the data, either from the client side or from the server side.

Its coding will be something like this.

<div>
    <input id="clientworkers" type="button" value="Get Client Workers Data" onclick="clientworkersdatabind()" />
    <asp:Button Text="Get Server Workers Data" runat="server" ID="Serverworkers" OnClientClick="javascript:return serverworkersdatabind()" />
    <br />
    <br />
    <table id="Workerstable">
        <thead>
            <tr>
                <th>
                    Employee Name
                </th>
                <th>
                    Post
                </th>
                <th>
                    Age
                </th>
                <th>
                    Working in
                </th>
                <th>
                    DataSource
                </th>
            </tr>
        </thead>
    </table>
</div>

Step 2. Now add a Script Tag and under that do the coding for the runtime evaluation and data binding.

It's coding will be like this.

<script id="workersTemplate" type="text/html">
    <tr>
        <td>${EmployeeName}</td>
        <td>${Post}</td>
        <td>
            {{if Age>30}}
            <span style='background-color:red'>Middle-aged</span>
            {{else}}
            <span style='background-color:yellow'>Still young</span>
            {{/if}}
        </td>
        <td>${Workingin}</td>
        <td>${DataSource}</td>
    </tr>
</script>

As you can see in the third line. the runtime evaluation is done, here in this code, you can use it.

${EmployeeName} as <%#Eval('EmployeeName')%>.

Step 3. Now we will add the data for the client and server side.

To add the data to the client side add the following code to the .aspx page.

<script type="text/javascript">
    function clientworkersdatabind() {
        var workers = [
            {EmployeeName: "Anubhav", Post: "Developer", Age: 24, Workingin: "IT", DataSource: "Client"},
            {EmployeeName: "Ashwini", Post: "Trainee", Age: 24, Workingin: "IT", DataSource: "Client"},
            {EmployeeName: "Dinesh", Post: "Senior Manager", Age: 35, Workingin: "HR", DataSource: "Client"},
            {EmployeeName: "Swati", Post: "Tester", Age: 27, Workingin: "Testing", DataSource: "Client"},
            {EmployeeName: "Hari", Post: "Trainer", Age: 40, Workingin: "IT", DataSource: "Client"}
        ];
        BindTable(workers);
    }
</script>

To add the data to the server-side go to the aspx.cs page and add this code.

public static object ServerWorkers()
{
    List<object> workers = new List<object>();
    workers.Add(new { EmployeeName = "Anubhav", Post = "Developer", Age = 45, Workingin = "IT", DataSource = "Server" });
    workers.Add(new { EmployeeName = "Ashwini", Post = "Trainee", Age = 38, Workingin = "IT", DataSource = "Server" });
    workers.Add(new { EmployeeName = "Dinesh", Post = "Senior Manager", Age = 20, Workingin = "HR", DataSource = "Server" });
    workers.Add(new { EmployeeName = "Swati", Post = "Tester", Age = 31, Workingin = "Testing", DataSource = "Server" });
    workers.Add(new { EmployeeName = "Hari", Post = "Trainer", Age = 25, Workingin = "IT", DataSource = "Server" });

    return workers;
}

Step 4. Now a function will be created to call the associated data on Successful execution of the code or if it's not executed successfully then it will lead to an error.

function serverworkersdatabind() {
    $.ajax({
        type: "POST",
        url: "JQueryGridTemplate.aspx/ServerWorkers",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg, status, metaData) {
            if (msg.d && msg.d.length > 0) {
                BindTable(msg.d);
            }
        },
        error: function(ex, status) {
            alert("error");
        },
        complete: function(eret, tytyt) {
        }
    });
    return false;
}

You can download the sample code as a complete reference.

Output

It's output when it shows the Client Data.

It's output when it shows the Server Data.