How to Bind Data to Gridview with Jquery or JSON in ASP.Net
Our article about, how to bind data to GridView with jquery or JSON in ASP.Net using C# through Ajax call. For beginners we introduce this article in the step-by-step manner, so you can understand and implement easily.
Let start with the introduction of JSON with Ajax and Jquery
Introduction of JSON with Ajax
Ajax is Asynchronous JavaScript and XML which is used on client side as group of interrelated web development techniques in order to create asynchronous web applications. According to Ajax model, web applications can send data and retrieve data from a server asynchronously without interfering with the display, behavior of existing page.
Any data that is updated using AJAX can be stored using the JSON format on web server. Ajax is used so that javascript can retrieve these JSON files when necessary, they parse them and then does of the two:
- Store the parsed values in variables for further processing before displaying them on the webpage
- It directly assigns the data to the DOM elements in the webpage, so that it gets displayed on the website.
Learn more on JSON with Ajax go with the given references links
Introduction of Jquery
jQuery is a lightweight, “write less, do more“, JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.
JQuery library contains the following features:
- HTML/DOM manipulation
- CSS manipulation
- HTML event methods
- Effects and animations
- AJAX
- Utilities
Learn more on Jquery: http://www.w3schools.com/jquery/jquery_intro.asp
Step by step to Bind Data to Gridview with Jquery or JSON in ASP.Net
Create a new website
If you are sound with the ASP.NET then you know very well how to create a website.
LEARN MORE : HOW TO CREATE AN ASP.NET WEBSITE
Download “jquery.min.js”
Click here to download “jquery.min.js”
Add References to website
- Right-click on the Scripts Folder for your created website
- Click on Add Existing Item
- Add “jquery.min.js” File in Script Folder

Add References to Website
ADD codes IN HTML Markup, Client side script for Json Ajax call AND CODE-BEHIND
HTML Markup
- Click on default.aspx
- Add given line of code in to the HTML portion
- We are giving the Gridview id as “gvCustomers”
1 2 3 4 5 6 7 8 |
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" RowStyle-BackColor="#A1DCF2" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"> <Columns> <asp:BoundField ItemStyle-Width="150px" DataField="CustomerID" HeaderText="CustomerID" /> <asp:BoundField ItemStyle-Width="150px" DataField="ContactName" HeaderText="Contact Name" /> <asp:BoundField ItemStyle-Width="150px" DataField="City" HeaderText="City" /> </Columns> </asp:GridView> |

HTML Markup
Code Behind (.cs)
Import namespace in to the class file
1 2 3 |
using System.Web.Services; using System.Configuration; using System.Data.SqlClient; |
Bind Dummy Datatable to the Gridview using webmethod
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
private void BindDummyRow() { DataTable dummy = new DataTable(); dummy.Columns.Add("CustomerID"); dummy.Columns.Add("ContactName"); dummy.Columns.Add("City"); dummy.Rows.Add(); gvCustomers.DataSource = dummy; gvCustomers.DataBind(); } [WebMethod] public static string GetCustomers() { DataTable dt = new DataTable(); dt.TableName = "Customers"; dt.Columns.Add("CustomerID", typeof(string)); dt.Columns.Add("ContactName", typeof(string)); dt.Columns.Add("City", typeof(string)); DataRow dr1 = dt.NewRow(); dr1["CustomerID"] = 1; dr1["ContactName"] = "Customer1"; dr1["City"] = "City1"; dt.Rows.Add(dr1); DataRow dr2 = dt.NewRow(); dr2["CustomerID"] = 2; dr2["ContactName"] = "Customer2"; dr2["City"] = "City2"; dt.Rows.Add(dr2); DataRow dr3 = dt.NewRow(); dr3["CustomerID"] = 3; dr3["ContactName"] = "Customer3"; dr3["City"] = "City3"; dt.Rows.Add(dr3); DataRow dr4 = dt.NewRow(); dr4["CustomerID"] = 4; dr4["ContactName"] = "Customer4"; dr4["City"] = "City4"; dt.Rows.Add(dr4); DataRow dr5 = dt.NewRow(); dr5["CustomerID"] = 5; dr5["ContactName"] = "Customer5"; dr5["City"] = "City5"; dt.Rows.Add(dr5); DataSet ds = new DataSet(); ds.Tables.Add(dt); return ds.GetXml(); } |

Bind Dummy Row

Create Webmethod
Client Side Script to call Webmethod
Over here we call the web method function as “GetCustomers” using the Json ajax call.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<script type="text/javascript" src="Scripts/jquery.min.js"></script> <script type="text/javascript"> $(function () { GetCustomers(); }); function GetCustomers() { // debugger; $.ajax({ type: "POST", url: "Default.aspx/GetCustomers", data: '{}', contentType: "application/json; charset=utf-8", dataType: "json", success: OnSuccess, failure: function (response) { alert(response.d); }, error: function (response) { alert(response.d); } }); } function OnSuccess(response) { // debugger; var xmlDoc = $.parseXML(response.d); var xml = $(xmlDoc); var customers = xml.find("Customers"); var row = $("[id*=gvCustomers] tr:last-child").clone(true); $("[id*=gvCustomers] tr").not($("[id*=gvCustomers] tr:first-child")).remove(); $.each(customers, function () { // debugger; var customer = $(this); $("td", row).eq(0).html($(this).find("CustomerID").text()); $("td", row).eq(1).html($(this).find("ContactName").text()); $("td", row).eq(2).html($(this).find("City").text()); $("[id*=gvCustomers]").append(row); row = $("[id*=gvCustomers] tr:last-child").clone(true); }); }; </script> |

Call Webmethod
Our last step for the article Bind data to GridView with jquery using JSON Ajax call is run the project and check the final output.
RUN PROJECT AND CHECK FINAL OUTPUT

Output
Source Code
help@codescratcher.com
What’s up everyone, it’s my first pay a visit at this web site, and paragraph is actually fruitful for me, keep up posting these types of articles.
Hey There. I found your blog using msn. This is a very well written article. I will make sure to bookmark it and
return to read more of your useful info. Thanks for the post. I will certainly comeback.
It’s truly very complicated in this full of activity life to listen news on Television, thus I just use web for that reason, and obtain the newest news.
nice code .how to bind gridview using Json by onclick event of Linkbutton inside other Gridview? please suggest me code
Hi Manvendra,
Please check below link…
http://www.codescratcher.com/asp-net/expand-collapse-nested-gridview-asp-net
I think this link can help you.
Thanks!
Great explanation. I have question. After filtering how to select Gridview row?
Hello Zel,
You can take Id of the selected row and then perform your operation.
Thanks!
actually i do the same code but grid does not bind automatically…
actually i do the same code but grid does not bind automatically…i am doing a search string code..where on search button i want to bind the grid all the result returned ..but it bind header row as a returned results..thats the problem it does not bind data
Hello Kishori Lal,
Check your WebMethod response. If you can’t received any kind of data then it will not bind the grid.
Thanks!
hi…. thanks a lot it is very helpful and gave same way to gridview and formview read,insert and update
it is very clear and any one can understand
grate job
hi, this is nice article. i need how to filter records using jquery in asp.net
nice
This is very clear and easy to understandable article and explanation also good. But i have one doubt, in my application i am trying to bind date to td of table from stored procedure i am returning value in form of “YYYY-MM-DD” but in UI i am getting it like “2016-06-02T00:00:00+05:30″ how and where to format this date type. I have tried but i am unable to get it in only date part.