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

• http://www.tutorialspoint.com/json/json_ajax_example.htm
• http://api.jquery.com/jquery.getjson

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>

HTML Markup

Code Behind (.cs)

Import namespace in to the class file

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

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>

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

The post How to Bind Data to Gridview with Jquery or JSON in ASP.Net appeared first on Code Scratcher.