Grid View Progress Bar Using Jquery

Grid View Progress Bar Using Jquery.

Hi Friends,
Here i will explain you how to implement Grid View Progress Bar Using Jquery.

ON ASPX  PAGE :-
Paste below Script in your head tag.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>  
    <script type="text/javascript">
        $(function () {
            $('#btnClick').click(function () {
                $('#Div').fadeTo('slow', .2);
                $('#Div').append('<img src="../Images/animated.gif" style="background-color:Aqua;position:fixed; top:20%; left:16%;"/></div>');
                setTimeout(function () { GetData() }, 800)
            })
        });
        function GetData() {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "JqueryProgressBar.aspx/filldatagrid",
                data: "{}",
                dataType: "json",
                success: function (data) {
                    var theHtml = data.d;
                    $('#Griddiv').html(theHtml)
                    $('#Div').html("");
                },
                error: function (result) {
                    alert("Error");
                }
            });
        }
    </script>

Paste below code in  form tag.

<div id="Div">
    </div>
    <input type="button" id="btnClick" value="GridView" />
    <div id="Griddiv">
    </div>

ON CODE BEHIND ASPX.CS :-

[WebMethod]
        public static string filldatagrid()
        {
            GridView gv = new GridView();
            System.IO.StringWriter stringWriter = new System.IO.StringWriter();
            HtmlTextWriter htmlWriter = new HtmlTextWriter(stringWriter);
            DataSet ds = manager.GetRecords();//Function for getting records
            DataTable dt = ds.Tables[0];
            gv.DataSource = dt;
            gv.DataBind();
            gv.RenderControl(htmlWriter);
            return stringWriter.ToString();
        }

CREATE A STORED PROCEDURE :-
CREATE PROCEDURE [dbo].[usp_SelectRegistration]
   
AS
BEGIN
    SELECT Pid ,FullName,CONVERT(varchar(30),DOB,101) AS DOB,Gender
    FROM form Order by Pid
END
ON BUSINESS LAYER MANAGER CLASS :- On your bussiness layer paste code below
 public static DataSet GetRecords()
        {

            return BusinessLayer.Dataaccess.DataAccess.GetData("usp_SelectRegistration", null);
        } //usp_SelectRegistration is stored procedure name //DataAccess is class in dataaccess layer //GetData is function for getting data using connection string
ON DATAACCESS LAYER :-
public static DataSet GetData(string SPName, List<SqlParameter> Parameters)
        {
            using (SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["ApplicationServices"].ConnectionString))
            {
                using (SqlCommand cmd = new SqlCommand())
                {
                    cmd.CommandText = SPName;
                    cmd.CommandType = System.Data.CommandType.StoredProcedure;
                    cmd.Connection = con;

                    if (Parameters != null)
                    {
                        foreach (SqlParameter parameter in Parameters)
                        {
                            cmd.Parameters.Add(parameter);
                        }
                    }
                    con.Open();
                    DataSet ds = new DataSet();
                    SqlDataAdapter da = new SqlDataAdapter();
                    da.SelectCommand = cmd;
                    da.Fill(ds);
                    con.Close();
                    return ds;
                }
            }
        }
ON WEB.CONFIG :- Now add connection string in your webconfig,add code below..
<connectionStrings>
    <add name="ApplicationServices" connectionString="Data Source=10.1.1.1;Initial Catalog=DailyTaskoskar;Persist Security Info=True;User ID=Username;Password=Password" providerName="System.Data.SqlClient"/>
   
  </connectionStrings>