Wednesday, January 20, 2016

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>'&nbsp;</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