Asp.Net Grid Load by Using Ajax WebMethod
-----------------------------------------------------------------
Aspx-Code
-------------
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridLoad.aspx.cs" Inherits="SampleGridLoad.GridLoad" %>
<!DOCTYPE html>
<script src ="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"> </script>
<style type="text/css">
.Grid{
background-color: #fff;
margin: 5px 0 10px 0;
border: solid 1px #525252;
border-collapse: collapse;
font-family: Calibri;
color: #474747;
}
.Grid td{
padding: 2px;
border: solid 1px #c1c1c1;
}
.Grid th{
padding: 4px 2px;
color: #fff;
background: #363670;
border-left: solid 1px #525252;
font-size: 0.9em;
}
</style>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
$(document).ready(function () {
LoadGridData();
// LoadDropDownData();
          
$("#ddlPartyId").change(function () {
                
var selectedText = $(this).find("option:selected").text();
var selectedValue = $(this).find("option:selected").val();
                
$("#ddlPartyName").val(selectedValue);
GridLoadByValue(selectedValue);
})
$("#ddlPartyName").change(function () {
var selectedText = $(this).find("option:selected").text();
var selectedValue = $(this).find("option:selected").val();
GridLoadByValue(selectedValue);
})
});
function GridLoadByValue(IdVal)
{
$.ajax({
type: "POST",
url: "GridLoad.aspx/GetPartyDetailsByValue",
contentType: "application/json;charset=utf-8",
data: JSON.stringify({ID:IdVal}),
dataType: "json",
success: LoadGridByValue,
error: function (result) {
//Handling error
}
});
}
function LoadGridData() {
$.ajax({
type: "POST",
url: "GridLoad.aspx/GetPartyDetails",
contentType: "application/json;charset=utf-8",
data: {},
dataType: "json",
success: LoadGrid,
error: function (result) {
//Handling error
}
});
}
//function LoadDropDownData()
//{
// $.ajax({
// type: "POST",
// url: "GridLoad.aspx/GetPartyDetails",
// data: '{}',
// contentType: "application/json; charset=utf-8",
// dataType: "json",
// success: function (r) {
                    
// PopulateDropdown();
// }
// });
//}
function PopulateDropdown(data)
{
if (data.d.length > 0) {
var ddlPartyIds = $("#ddlPartyId");
ddlPartyIds.empty().append('<option selected="selected" value="0">Please select</option>');
for (var i = 0; i < data.d.length; i++) {
ddlPartyIds.append($("<option></option>").val(data.d[i].PartyId).html(data.d[i].PartyId));
}
var ddlPrtyNames = $("#ddlPartyName");
ddlPrtyNames.empty().append('<option selected="selected" value="0">Please select</option>');
for (var i = 0; i < data.d.length; i++) {
ddlPrtyNames.append($("<option></option>").val(data.d[i].PartyId).html(data.d[i].PartyName));
}
}
}
function LoadGrid(data) {
PopulateDropdown(data);
$("#gvProduct").empty();
if (data.d.length > 0) {
                      
$("#gvProduct").append("<tr><th>Party ID</th> <th>Party Name</th><th>Party Description</th></tr>");
for (var i = 0; i < data.d.length; i++) {
$("#gvProduct").append("<tr><td>" +
data.d[i].PartyId + "</td> <td>" +
data.d[i].PartyName + "</td> <td>" +
data.d[i].PartyDescription + "</td></tr>");
}
}
                
}
function LoadGridByValue(data) {
          
$("#gvProduct").empty();
if (data.d.length > 0) {
$("#gvProduct").append("<tr><th>Party ID</th> <th>Party Name</th><th>Party Description</th></tr>");
for (var i = 0; i < data.d.length; i++) {
$("#gvProduct").append("<tr><td>" +
data.d[i].PartyId + "</td> <td>" +
data.d[i].PartyName + "</td> <td>" +
data.d[i].PartyDescription + "</td></tr>");
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td><label>Party ID :</label></td>
<td> <asp:DropDownList ID="ddlPartyId" runat="server"></asp:DropDownList></td>
<td>' </td>
<td>
<label>Column :</label></td>
<td><asp:DropDownList ID="ddlPartyName" runat="server"></asp:DropDownList></td>
</tr>
</table>
          
</div>
<div>
<asp:Gridview ID="gvProduct" class="Grid" runat="server"></asp:Gridview>
</div>
</form>
</body>
</html>
        
        
    
-----------------------------------------------------------------
Aspx-Code
-------------
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridLoad.aspx.cs" Inherits="SampleGridLoad.GridLoad" %>
<!DOCTYPE html>
<script src ="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"> </script>
<style type="text/css">
.Grid{
background-color: #fff;
margin: 5px 0 10px 0;
border: solid 1px #525252;
border-collapse: collapse;
font-family: Calibri;
color: #474747;
}
.Grid td{
padding: 2px;
border: solid 1px #c1c1c1;
}
.Grid th{
padding: 4px 2px;
color: #fff;
background: #363670;
border-left: solid 1px #525252;
font-size: 0.9em;
}
</style>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
$(document).ready(function () {
LoadGridData();
// LoadDropDownData();
$("#ddlPartyId").change(function () {
var selectedText = $(this).find("option:selected").text();
var selectedValue = $(this).find("option:selected").val();
$("#ddlPartyName").val(selectedValue);
GridLoadByValue(selectedValue);
})
$("#ddlPartyName").change(function () {
var selectedText = $(this).find("option:selected").text();
var selectedValue = $(this).find("option:selected").val();
GridLoadByValue(selectedValue);
})
});
function GridLoadByValue(IdVal)
{
$.ajax({
type: "POST",
url: "GridLoad.aspx/GetPartyDetailsByValue",
contentType: "application/json;charset=utf-8",
data: JSON.stringify({ID:IdVal}),
dataType: "json",
success: LoadGridByValue,
error: function (result) {
//Handling error
}
});
}
function LoadGridData() {
$.ajax({
type: "POST",
url: "GridLoad.aspx/GetPartyDetails",
contentType: "application/json;charset=utf-8",
data: {},
dataType: "json",
success: LoadGrid,
error: function (result) {
//Handling error
}
});
}
//function LoadDropDownData()
//{
// $.ajax({
// type: "POST",
// url: "GridLoad.aspx/GetPartyDetails",
// data: '{}',
// contentType: "application/json; charset=utf-8",
// dataType: "json",
// success: function (r) {
// PopulateDropdown();
// }
// });
//}
function PopulateDropdown(data)
{
if (data.d.length > 0) {
var ddlPartyIds = $("#ddlPartyId");
ddlPartyIds.empty().append('<option selected="selected" value="0">Please select</option>');
for (var i = 0; i < data.d.length; i++) {
ddlPartyIds.append($("<option></option>").val(data.d[i].PartyId).html(data.d[i].PartyId));
}
var ddlPrtyNames = $("#ddlPartyName");
ddlPrtyNames.empty().append('<option selected="selected" value="0">Please select</option>');
for (var i = 0; i < data.d.length; i++) {
ddlPrtyNames.append($("<option></option>").val(data.d[i].PartyId).html(data.d[i].PartyName));
}
}
}
function LoadGrid(data) {
PopulateDropdown(data);
$("#gvProduct").empty();
if (data.d.length > 0) {
$("#gvProduct").append("<tr><th>Party ID</th> <th>Party Name</th><th>Party Description</th></tr>");
for (var i = 0; i < data.d.length; i++) {
$("#gvProduct").append("<tr><td>" +
data.d[i].PartyId + "</td> <td>" +
data.d[i].PartyName + "</td> <td>" +
data.d[i].PartyDescription + "</td></tr>");
}
}
}
function LoadGridByValue(data) {
$("#gvProduct").empty();
if (data.d.length > 0) {
$("#gvProduct").append("<tr><th>Party ID</th> <th>Party Name</th><th>Party Description</th></tr>");
for (var i = 0; i < data.d.length; i++) {
$("#gvProduct").append("<tr><td>" +
data.d[i].PartyId + "</td> <td>" +
data.d[i].PartyName + "</td> <td>" +
data.d[i].PartyDescription + "</td></tr>");
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td><label>Party ID :</label></td>
<td> <asp:DropDownList ID="ddlPartyId" runat="server"></asp:DropDownList></td>
<td>' </td>
<td>
<label>Column :</label></td>
<td><asp:DropDownList ID="ddlPartyName" runat="server"></asp:DropDownList></td>
</tr>
</table>
</div>
<div>
<asp:Gridview ID="gvProduct" class="Grid" runat="server"></asp:Gridview>
</div>
</form>
</body>
</html>
C# - Code
--------------
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace SampleGridLoad
{
    public partial class GridLoad : System.Web.UI.Page
    {
          protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindDummyData();
        }
    }
    public void BindDummyData()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("PartyID");
        dt.Columns.Add("PartyName");
        dt.Columns.Add("PartyDescription");
        dt.Rows.Add();
        gvProduct.DataSource = dt;
        gvProduct.DataBind();
    }
        [WebMethod]
        public static PartyDetails[] GetPartyDetails()
        {
            PartyDetails PartyModel = new PartyDetails();
        List<PartyDetails> partyDetailsModel = new List<PartyDetails>();
        for (int Count = 1; Count <= 10; Count++)
        {
            PartyDetails partyDetails = new PartyDetails();
            partyDetails.PartyId = Count;
            partyDetails.PartyName = "Party_Name" + Count;
            partyDetails.PartyDescription= "Party_Description" + Count;
            partyDetailsModel.Add(partyDetails);
        }
        return partyDetailsModel.ToArray();
        }
        [WebMethod]
        public static PartyDetails[] GetPartyDetailsByValue(int ID)
        {
            PartyDetails PartyModel = new PartyDetails();
            List<PartyDetails> partyDetailsModel = new List<PartyDetails>();
            for (int Count = 1; Count <= 10; Count++)
            {
                if (ID == Count)
                {
                    PartyDetails partyDetails = new PartyDetails();
                    partyDetails.PartyId = Count;
                    partyDetails.PartyName = "Party_Name" + Count;
                    partyDetails.PartyDescription = "Party_Description" + Count;
                    partyDetailsModel.Add(partyDetails);
                }
            }
            return partyDetailsModel.ToArray();
        }
    }
    public class PartyDetails
    {
        public PartyDetails()
        {
           // PartyDetailsList = new List<PartyDetails>();
        }
        public int PartyId { get; set; }
        public string PartyName { get; set; }
        public string PartyDescription { get; set; }
      //  public List<PartyDetails> PartyDetailsList { get; set; }
    }
}
No comments:
Post a Comment