How to Bind Data to Gridview with Jquery or JSON in ASP.Net

by Admin · November 15, 2014

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”

 <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>

<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" RowStyle-BackColor="#A1DCF2"

HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White">

<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

using System.Web.Services;
using System.Configuration;
using System.Data.SqlClient;

using System.Web.Services;

using System.Configuration;

using System.Data.SqlClient;

Bind Dummy Datatable to the Gridview using webmethod

        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();
        }

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.

<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>

$(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

What do you think of this article? How to Bind Data to Gridview with Jquery or JSON in ASP.Net

If you have ideas about this article, or an opinion on how we can make it better, then let us know by emailing…
help@codescratcher.com

Tags: Gridview JSON

Lea says:

January 31, 2015 at 12:10 pm

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.

Reply
Rosalind says:

January 31, 2015 at 12:17 pm

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.

Reply
Blair says:

January 31, 2015 at 9:22 pm

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.

Reply
manvendra patel says:

February 17, 2015 at 7:04 am

nice code .how to bind gridview using Json by onclick event of Linkbutton inside other Gridview? please suggest me code

Reply
- Admin says:
  
  February 17, 2015 at 10:23 am
  
  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!
  
  Reply
Zel says:

March 20, 2015 at 6:25 am

Great explanation. I have question. After filtering how to select Gridview row?

Reply
- Admin says:
  
  March 20, 2015 at 8:15 am
  
  Hello Zel,
  
  You can take Id of the selected row and then perform your operation.
  
  Thanks!
  
  Reply
kishori lal says:

April 1, 2015 at 7:57 am

actually i do the same code but grid does not bind automatically…

Reply
- kishori lal says:
  
  April 1, 2015 at 8:00 am
  
  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
  
  Reply
  - Admin says:
    
    April 1, 2015 at 12:01 pm
    
    Hello Kishori Lal,
    
    Check your WebMethod response. If you can’t received any kind of data then it will not bind the grid.
    
    Thanks!
    
    Reply
Chenchu Krishna says:

August 14, 2015 at 1:51 pm

hi…. thanks a lot it is very helpful and gave same way to gridview and formview read,insert and update

Reply
Chenchu Krishna says:

August 14, 2015 at 1:52 pm

it is very clear and any one can understand

grate job

Reply
vijay says:

August 28, 2015 at 6:37 am

hi, this is nice article. i need how to filter records using jquery in asp.net

Reply
Test says:

October 17, 2015 at 9:26 am

nice

Reply
Gorakh Jadhav says:

June 27, 2016 at 6:13 am

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.

Reply