Search This Blog

Sunday, September 6, 2015

Grid View Binding From AJAX ~ JQuery Method

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .auto-style1 {
            width: 100%;
        }
    </style>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
     <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
         
            BindGridView();

        });

        $("#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");
                }
            });

        });

        function BindGridView() {
            alert("Hi");
            $.ajax({
                type: "POST",
                url: "GridViewBindFroJequery.aspx/GetData",
                contentType: "application/json;charset=utf-8",
                data: {},
                dataType: "json",
                success: function (data) {
                    $("#grdDemo").empty();
                    if (data.d.length > 0) {
                        $("#grdDemo").append("<tr><th>Username</th> <th>Firstname</th>  <th>Lastname</th>  <th>EmailID</th></tr>");
                        for (var i = 0; i < data.d.length; i++) {

                            $("#grdDemo").append("<tr><td>" +
                            data.d[i].Firstname + "</td> <td>" +
                            data.d[i].Lastname + "</td> <td>" +
                            data.d[i].Username + "</td> <td>" +
                            data.d[i].EmailID + "</td></tr>");
                        }
                    }
                },
                error: function (result) {
                    //alert("Error login");

                }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
 
        <table class="auto-style1">
            <tr>
                <td>
                    <asp:GridView ID="grdDemo" runat="server" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None">
                        <AlternatingRowStyle BackColor="White" />
                        <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                        <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                        <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
                        <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
                        <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                        <SortedAscendingCellStyle BackColor="#FDF5AC" />
                        <SortedAscendingHeaderStyle BackColor="#4D0000" />
                        <SortedDescendingCellStyle BackColor="#FCF6C0" />
                        <SortedDescendingHeaderStyle BackColor="#820000" />
                         </asp:GridView>
         
                </td>
            </tr>
            <tr>
                <td>&nbsp;</td>
            </tr>
        </table>
 
    </div>
    </form>
</body>
</html>


***************************************CS Code********************************

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

namespace AjaxApp
{
    public partial class GridViewBindFroJequery : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            BindDummyItem(); //Bind dummy datatable to grid view to bind data in it.
        }


        public void BindDummyItem()
        {
            DataTable dtGetData = new DataTable();
            dtGetData.Columns.Add("Username");
            dtGetData.Columns.Add("Firstname");
            dtGetData.Columns.Add("Lastname");
            dtGetData.Columns.Add("EmailID");
            dtGetData.Rows.Add();

            grdDemo.DataSource = dtGetData;
            grdDemo.DataBind();
        }

        [WebMethod]
        public static DetailsClass[] GetData() //GetData function
        {
            List<DetailsClass> Detail = new List<DetailsClass>();

            string SelectString = "Select Username,Firstname,Lastname,EmailID from DemoTable";
            String strConnString = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
            SqlConnection cn = new SqlConnection(strConnString);
            //SqlConnection cn = new SqlConnection("Data Source=servername;Initial Catalog=DemoDatabase;User ID=User;Password=*****");
            SqlCommand cmd = new SqlCommand(SelectString, cn);
            cn.Open();

            SqlDataAdapter da = new SqlDataAdapter(cmd);
            DataTable dtGetData = new DataTable();

            da.Fill(dtGetData);

            foreach (DataRow dtRow in dtGetData.Rows)
            {
                DetailsClass DataObj = new DetailsClass();
                DataObj.Username = dtRow["Username"].ToString();
                DataObj.Firstname = dtRow["Firstname"].ToString();
                DataObj.Lastname = dtRow["Lastname"].ToString();
                DataObj.EmailID = dtRow["EmailID"].ToString();

                Detail.Add(DataObj);
            }

            return Detail.ToArray();
        }
        public class DetailsClass //Class for binding data
        {
            public string Username { get; set; }
            public string Firstname { get; set; }
            public string Lastname { get; set; }
            public string EmailID { get; set; }

        }


    }
}

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)