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.
It's 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 ${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);
- }
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: