How to bind data to gridview with jquery in asp.net

In previous articles i have given Cascading dropdownlist using jquery .In this post i would like to explain how to bind data to gridview using Jquery. Here we can observe the page method calling using jquery post method

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Bind data to grid using jquery in asp.net</title>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "JqueryBindGrid.aspx/BindOrderDataToGrid",
data: "{}",
dataType: "json",
success: function (resData) {
    for (var i = 0; i < resData.d.length; i++) {
        $("#GvOrderDetails").append("<tr><td>" + resData.d[i].OrderId + "</td><td>" + resData.d[i].OrderName + "</td><td>" + resData.d[i].Phone + "</td><td>" + data.d[i].Address + "</td><td>" + resData.d[i].Amount + "</td></tr>");
}
},
error: function (result) {
alert("Exception");
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GvOrderDetails" runat="server">
</asp:GridView>
</form>
</body>
</html>

Code behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;
using System.Web.Services;

public partial class JqueryBindGrid : System.Web.UI.Page
{
  
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable GVHeaderdt = new DataTable();
GVHeaderdt.Columns.Add("OrderId");
GVHeaderdt.Columns.Add("OrderName");
GVHeaderdt.Columns.Add("Phone");
GVHeaderdt.Columns.Add("Address");
GVHeaderdt.Columns.Add("Amount");
GVHeaderdt.Rows.Add();
GvOrderDetails.DataSource = GVHeaderdt;
GvOrderDetails.DataBind();
      
}
}
public class OrderReportDetails
{
public int OrderId { get; set; }
public string OderName { get; set; }
public string Phone { get; set; }
public string Address { get; set; }
public string Amount { get; set; }
}
[WebMethod]
public static OrderReportDetails[] BindOrderDataToGrid()
{
DataTable resDt = new DataTable();
List ORdetails = new List();
SqlConnection Dbcon = new SqlConnection(ConfigurationManager.AppSettings["DbOrdrCon"].ToString());
SqlCommand cmd = new SqlCommand("select * from Orders", Dbcon);
Dbcon.Open();
SqlDataAdapter Orda = new SqlDataAdapter(cmd);
Orda.Fill(resDt);
foreach (DataRow Ordt in resDt.Rows)
{
    OrderReportDetails OrderDetails = new OrderReportDetails();
    OrderDetails.OrderId = int.Parse(Ordt["OrderId"].ToString());
    OrderDetails.OderName = Ordt["OrderName"].ToString();
    OrderDetails.Phone = Ordt["Phone"].ToString();
    OrderDetails.Address = Ordt["Address"].ToString();
    OrderDetails.Amount = Ordt["Amount"].ToString();
    ORdetails.Add(OrderDetails);
}

Dbcon.Close();
return ORdetails.ToArray();
}
  
}

String to DataTable in asp.net using C#.Net

Title:How to bind data table using string array in asp.net using c#

Description:
We have already learnt data binding to data source controls.Now i would like to show how would we use the array list to bind the data to grid view etc.

Examples:
Some  examples for JQuery Auto complete text box, how to bind or Export CSV data to data table in asp.net.The below example describes the logic of iteration of array list to  data table.In the below i have used a string array to hold the string data and a grid view to display the resultant data of Data table.

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:GridView ID="GvOrdr" runat="server"></asp:GridView>
</asp:Content>

DataTable dtOrdrName = new DataTable();
dtOrdrName.Columns.Add(new DataColumn("Name", typeof(string)));
string[] strSplitOp = new string[] { "bhaskar", "Siva", "Ram" };
for (int i = 0; i <= strSplitOp.Length - 1; i++)
{
DataRow NewDrow = dtOrdrName.NewRow();
NewDrow["Name"] = strSplitOp[i].ToString();
dtOrdrName.Rows.Add(NewDrow);
}
GvOrdr.DataSource = dtOrdrName;
GvOrdr.DataBind();