How to bind value to asp gridview or listview using javascript or jquery.

See more:

C#

Javascript

jQuery

How to bind value to datalist or gridview using javascript or jquery.

I have used the web method and jquery to bind the value to the gridview. For doing this i have used webmethod and my web method will return a list with all the values in it and i have used jquery to call the method and the value is comming successfully but when i bind the value to my asp gridview it is not throwing any error but the value is not binding.

The following is the code. And the value is comming perfectly in the variable details

success:

function (details)
 { $("#<%=GridView1.ClientID %>").append(details.d); }

All the functions are executing successfully but my grid is not showing.
My complete solution is

public partial class WebForm3 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{


}
[WebMethod]
public static Name[] LoadValues()
{
SqlConnection conn = new SqlConnection(@"Data Source=CLAYSYSCH0028\Sharepoint;Initial Catalog=ShankarMS;Integrated Security=True");
conn.Open();
List<name> list = new List<name>();
SqlCommand comm = new SqlCommand();
comm.CommandText = "select * from UserDetails";
comm.Connection = conn;
SqlDataAdapter adapter = new SqlDataAdapter(comm);
DataSet set = new DataSet();
adapter.Fill(set);
DataTable table = set.Tables[0];
foreach (DataRow row in table.Rows)
{
Name n = new Name();
n.names = row["FirstName"].ToString();
list.Add(n);
}
return list.ToArray();
}
}
public class Name
{
public string names
{
get;
set;
}
}

jquery for binding to grid view

<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                url: "WebForm3.aspx/LoadValues",
                data: "{}",
                contentType: "application/json",
                dataType: "json",
                success: function (data) {

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

                        $("#<%=GridView1.ClientID %>").append("<tr><td>" + data.d[i].names + "</td></tr>");
                    }

                },
                Error: function () {
                    debugger;
                }

            })
        });

    </script>

Asp Grid View

<asp:GridView ID="GridView1" runat="server" ShowHeaderWhenEmpty="True">
        </asp:GridView>