How to bind data in gridview using javascript ?

In this article,I would wish to justify "How to bind knowledge to Gridview victimisation shopper facet Code in two ways in which with asp.net, c#, jquery".In my previous sections, I even have already shared articles associated with Gridview, completely different binding techniques.


Here i'm planning to justify in easy thanks to bind knowledge to gridview victimisation shopper facet so as to extend the performance of the applying.

Please follow the steps: 

Here we want to make 2 sections, One is Server facet and another one shopper facet.

• Lets begin with server facet. 
• First, choose New aspx type and alter the name as ServerSide.aspx. 
• Next, Write the subsequent code in serverside.cs file 

Add the subsequent namespaces




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

Next-

[WebMethod]

    public static string GetStateInfo1()

    {

        string query = "select Stateid,StateName,StateCode from STATE";

        string strConnString = ConfigurationManager.ConnectionStrings["dbConnection"].ConnectionString;

        using (SqlConnection con = new SqlConnection(strConnString))

        {

            using (SqlCommand cmd = new SqlCommand(query, con))

            {

                using (SqlDataAdapter sda = new SqlDataAdapter())

                {

                    cmd.Connection = con;

                    sda.SelectCommand = cmd;

                    using (DataSet ds = new DataSet())

                    {

                        sda.Fill(ds);

                        return ds.GetXml();

                    }

                }

            }

        }

    }

[WebMethod]

    public static StateDetails[] GetStateInfo2()

    {

        DataTable dt = new DataTable();

        List<statedetails> details = new List<statedetails>();

        string strConnString = ConfigurationManager.ConnectionStrings["dbConnection"].ConnectionString;

        using (SqlConnection con = new SqlConnection(strConnString))

        {

            using (SqlCommand cmd = new SqlCommand("select Stateid,StateName,StateCode from STATE", con))

            {

                con.Open();

                SqlDataAdapter da = new SqlDataAdapter(cmd);

                da.Fill(dt);

                foreach (DataRow dtrow in dt.Rows)

                {

                    StateDetails st = new StateDetails();

                    st.State_id = dtrow["Stateid"].ToString();

                    st.StateName = dtrow["StateName"].ToString();

                    st.StateCode = dtrow["StateCode"].ToString();

                    details.Add(st);

                }

            }

        }

        return details.ToArray();

    }

    public class StateDetails

    {

        public string State_id { get; set; }

        public string StateName { get; set; }

        public string StateCode { get; set; }

    }

</statedetails></statedetails>

Next,Select New aspx type and alter the name as Clientside.aspx
Next,Open the aspx type and add 2 buttons and one Gridview.
Next,Change the button names as Method1 and Method2 and Gridview name as gvStates.
Next,Write the 2 completely different scripts for 2 strategies

Method-1:

$("#btnMethod1").click(function () {

                $.ajax({

                    type: "POST",

                    url: "ServerSide.aspx/GetStateInfo1",

                    data: '{}',

                    contentType: "application/json; charset=utf-8",

                    dataType: "json",

                    success: OnSuccess,

                    failure: function (response) {

                        alert("Failure : " + response.d);

                    },

                    error: function (response) {

                        alert("Error : " + response.d);

                    }

                });

            });

            function OnSuccess(response) {

                var xmlDoc = $.parseXML(response.d);

                var xml = $(xmlDoc);

                var users = xml.find("Table");

                //create a new row from the last row of gridview

                var row = $("[id*=gvStates] tr:last-child").clone(true);

                //remove the lst row created by binding the dummy row from code behind on page load

                $("[id*=gvStates] tr").not($("[id*=gvStates] tr:first-child")).remove();

                var count = 1;

                $.each(users, function () {

                    //var users = $(this);

                    $("td", row).eq(0).html($(this).find("Stateid").text());

                    $("td", row).eq(1).html($(this).find("StateName").text());

                    $("td", row).eq(2).html($(this).find("StateCode").text());

                    $("[id*=gvStates]").append(row);

                    //define the background stryle of newly created row         

                    if (count == 1 || (count % 2 != 0)) {

                        $(row).css("background-color", "#ffffff");

                    }

                    else {

                        $(row).css("background-color", "#D2CDCD");

                    }

                    count = count + 1;

                    row = $("[id*=gvStates] tr:last-child").clone(true);

                });

            }

Method-2:

$("#btnMethod2").click(function () {

                $.ajax({

                    type: "POST",

                    contentType: "application/json; charset=utf-8",

                    url: "ServerSide.aspx/GetStateInfo2",

                    data: "{}",

                    dataType: "json",

                    success: function (data) {

                        for (var i = 0; i < data.d.length; i++) {

                            $("#gvStates").append("" + data.d[i].Stateid + "

" + data.d[i].StateName + "

" + data.d[i].StateCode + "

");

                        }

                    },

                    error: function (result) {

                        alert("Error");

                    }

                });

            });

Next-

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

 $(document).ready(function () {

});