Datagrid does not exist in the current context

[ERUM]

//------------------------------------------------------------------------------
// <auto-generated>
//     This code was generated by a tool.
//     Runtime Version:2.0.50727.3625
//
//     Changes to this file may cause incorrect behavior and will be lost if
//     the code is regenerated.
// </auto-generated>
//------------------------------------------------------------------------------

namespace JQueryAjax {
    
    
    public partial class Default {
        
        /// <summary>
        /// form1 control.
        /// </summary>
        /// <remarks>
        /// Auto-generated field.
        /// To modify move field declaration from designer file to code-behind file.
        /// </remarks>
        protected global::System.Web.UI.HtmlControls.HtmlForm form1;
        
        /// <summary>
        /// gvUserDetails control.
        /// </summary>
        /// <remarks>
        /// Auto-generated field.
        /// To modify move field declaration from designer file to code-behind file.
        /// </remarks>
        protected global::System.Web.UI.WebControls.GridView gvUserDetails;
    }
}

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.Services;
using System.Collections.Generic;

using System.Xml.Linq;

namespace JQueryAjax
{
    public partial class _Default : System.Web.UI.Page
    {

        protected void Page_Load(object sender, EventArgs e)
        {

            if (!IsPostBack)

            { BindEmptyDatatable(); }

        }



        private void BindEmptyDatatable()
        {

            //NOTE* you can use here database columns table which you would like to bind it.

            //i have just tried with datatable.

            DataTable dt = new DataTable("Table");

            dt.Columns.Add(new DataColumn("id", Type.GetType("System.Int32")));

            dt.Columns.Add(new DataColumn("name", Type.GetType("System.String")));

            dt.Columns.Add(new DataColumn("age", Type.GetType("System.Int32")));

            dt.Rows.Add();  //* bind first row with gridview with empty values



            gvUserDetails.DataSource = dt;

            gvUserDetails.DataBind();

            gvUserDetails.Rows[0].Visible = false;  // hide empty row in gridview

        }

        [WebMethod]

        public static Details[] binddata()
        {

            //NOTE* here you can use query to fetch the records from table and fill in dtt(datatable).
            //here i used datatable with coulmns.

            DataTable dtt = new DataTable("Table");

            dtt.Columns.Add(new DataColumn("id", Type.GetType("System.Int32")));

            dtt.Columns.Add(new DataColumn("name", Type.GetType("System.String")));

            dtt.Columns.Add(new DataColumn("age", Type.GetType("System.Int32")));



            //add few entries in dtt

            dtt.Rows.Add(1, "A", 12);

            dtt.Rows.Add(2, "B", 11);

            dtt.Rows.Add(3, "C", 10);

            dtt.Rows.Add(4, "D", 09);

            //created a list<> with class Details

            List<Details> detail = new List<Details>();

            foreach (DataRow dt_row in dtt.Rows)
            {

                Details usr = new Details();

                usr.id = Convert.ToInt32(dt_row["id"]);

                usr.name = dt_row["name"].ToString();

                usr.age = Convert.ToInt32(dt_row["age"]);

                detail.Add(usr);

            }

            return detail.ToArray();  // returning records of array

        }

        // here i created a class name "Details"


    }
    public class Details
    {

        public int id { get; set; }

        public string name { get; set; }

        public int age { get; set; }

    }



}

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQueryAjax.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Asp.net Binding Data to  Datatable using JSON</title>

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

<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
//binddata webmethod
url: "Default.aspx/binddata",
data: "{}",
dataType: "json",
success: function(data) {
for (var i = 0; i < data.d.length; i++) {
//id of Gridview (*Note name of the columns are CaseSensitive)
$("#gvUserDetails").append("<tr><td>" + (data.d[i].id) + "</td><td>" + (data.d[i].name) + "</td><td>" + (data.d[i].age) + "</td></tr>");
} },
error: function(result) {
alert("Error");
}   });   });
</script>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:GridView ID="gvUserDetails" runat="server" CellPadding="4"
ForeColor="#333333" GridLines="None" >
<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>

</div>

</form>

</body>

</html>

all above i posted three files for .aspx page ..but i m getting an error

Error 1 The name 'gvUserDetails' does not exist in the current context E:\JQueryAjax\JQueryAjax\JQueryAjax\Default.aspx.cs 51 13 JQueryAjax

thanks

[ERUM]

please do let me know when need to know futher !!