Saturday, July 25, 2015

Display records in Gridview according to DropDown Selection in Asp.net

In this article I am going to explain how to display records in Gridview according to dropdown Selection in Asp.net

Description:

In this tutorial I am using Gridview and DroDownlist control. Drodown display the name of name of City. When user selects the particular city, detail of students belonging to that (City) will be displayed. E.g. if select the Shimla, student belongs to Shimla city will be displayed.

Implementation:
HTML Markup of Webform:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <style type="text/css">        
         .PagerCSS a {
             padding:5px;
             background-color:#000;
             color: #fff;
    text-decoration: none;
    border: solid 1px #AAE;
    font-weight:bold;
    font-size:12pt;
       }
            .PagerCSS span { color:#009900;font-weight:bold; font-size:16pt; }
  </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <table><tr><td></td><td><asp:DropDownList ID="DropDownList1" runat="server"  AutoPostBack="true">
             <asp:ListItem>--Select--</asp:ListItem>
            <asp:ListItem>All</asp:ListItem>
            <asp:ListItem>Shimla</asp:ListItem>
            <asp:ListItem>Pune</asp:ListItem>
            <asp:ListItem>Panchkula</asp:ListItem>
            <asp:ListItem>Delhi</asp:ListItem>
            <asp:ListItem>Goa</asp:ListItem>
        </asp:DropDownList></td></tr></table>                

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" AllowPaging="true" PageSize="5">
             <PagerStyle CssClass="PagerCSS" />
            <Columns>
               <asp:BoundField DataField="Student_Name" HeaderText="Name" />
                 <asp:BoundField DataField="Student_Address" HeaderText="City" />
                <asp:BoundField DataField="RollNo" HeaderText="Roll Number" />
            </Columns>
        </asp:GridView>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

Add the Namespaces
C#:
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
VB:
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

Bind the Gridview
C#:
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ToString());
    protected void Page_Load(object sender, EventArgs e)
    {
        if(!IsPostBack)
        {
            BindGridview();
        }
    }
    public void BindGridview()
    {
        try
        {
            SqlDataAdapter adp = new SqlDataAdapter("Select * from Tb_Student", con);
            DataTable dt = new DataTable();
            adp.Fill(dt);
            GridView1.DataSource = dt;
            GridView1.DataBind();    
         }
        catch(Exception ex)
        {

        }
    }

VB:
Private con As New SqlConnection(ConfigurationManager.ConnectionStrings("connection").ToString())
    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Not IsPostBack Then
            BindGridview()
        End If
    End Sub
    Public Sub BindGridview()
        Try
            Dim adp As New SqlDataAdapter("Select * from Tb_Student", con)
            Dim dt As New DataTable()
            adp.Fill(dt)
            GridView1.DataSource = dt
            GridView1.DataBind()
        Catch ex As Exception
        End Try
    End Sub

DropDownList SelectIndexChanged:
On DropDownList SelectIndexchnaged event write the below given code.
C#:
  protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        SqlDataAdapter adp = new SqlDataAdapter("Sp_GetStudentData", con);
        adp.SelectCommand.CommandType = CommandType.StoredProcedure;
        adp.SelectCommand.Parameters.AddWithValue("@city", DropDownList1.SelectedValue);
        DataTable dt = new DataTable();
        adp.Fill(dt);
        GridView1.DataSource = dt;
        GridView1.DataBind();      
    }

VB:
Protected Sub DropDownList1_SelectedIndexChanged(sender As Object, e As EventArgs) Handles DropDownList1.SelectedIndexChanged
        Dim adp As New SqlDataAdapter("Sp_GetStudentData", con)
        adp.SelectCommand.CommandType = CommandType.StoredProcedure
        adp.SelectCommand.Parameters.AddWithValue("@city", DropDownList1.SelectedValue)
        Dim dt As New DataTable()
        adp.Fill(dt)
        GridView1.DataSource = dt
        GridView1.DataBind()
    End Sub

PageIndexChanging:
Write the below given code on PageIndexChanging event of Gridview
C#:
protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        GridView1.PageIndex = e.NewPageIndex;
        BindGridview();
    }

VB:
  Protected Sub GridView1_PageIndexChanging(sender As Object, e As GridViewPageEventArgs) Handles GridView1.PageIndexChanging
        GridView1.PageIndex = e.NewPageIndex
        BindGridview()
    End Sub


Build, run the project and check out the result.
DEMO:
Display records in Gridview according to DropDown Selection in Asp.net
    In this article we have learn how to display records in Gridview according to Dropdown Selection in Asp.net (C#, VB). I hope you enjoyed this article. 

No comments:

Post a Comment