How to Show Records In a GridView Using DropDownList in Web Application

Alok Pandey
13y
188.6k
0
4

Article

Introduction

Here I am creating a web application to show records in a GridView on the basis of a value selected from a DropDownList. A user will select a name from the DropDownList and records related to that name will be shown in the GridView. In my previous article, I have created the same application using a wizard (using SqlDataSource). Here I am doing it without using the wizard. We are going to show records so we should have records. Let's create a database and insert some records into the database table.

Create Database

CREATE DATABASE EMP

USE EMP

CREATE TABLE EMP_DETAIL
(
E_ID INT PRIMARY KEY,
E_NAME VARCHAR(30),
E_AGE INT,
E_CITY VARCHAR(30),
E_DEPARTMENT VARCHAR(20)
)

INSERT INTO EMP_DETAIL VALUES(11,'ALOK KUMAR',24,'DELHI','IT')
INSERT INTO EMP_DETAIL VALUES(12,'RAJESH TRIPATHI',22,'ALLAHABAD','SALES')
INSERT INTO EMP_DETAIL VALUES(13,'SATISH KUMAR',23,'JHANSI','PRODUCT')
INSERT INTO EMP_DETAIL VALUES(14,'MANOJ SINGH',22,'NOIDA','MARKETING')
INSERT INTO EMP_DETAIL VALUES(15,'AMIT MAHESHWARI',25,'ALLIGARH','IT')
INSERT INTO EMP_DETAIL VALUES(16,'DEEPAK DWIJ',24,'NOIDA','IT')

I am showing a screen shot of all records of an EMP_DETAIL table so that it can become easy to understand.

SELECT * FROM EMP_DETAIL

Now, take an ASP.NET web application -> Take one DropDownList control and one GridView control. Your form will look as in the following figure.

Now set the AutoPostBack property of the DropDownList to "True".

Code

Code on .aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
namespace SearchingRecord
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        SqlDataAdapter dadapter;
        DataSet dset;
        string connstring = "server=.;database=emp;user=sa;password=wintellect";
        string sql = "select * from emp_detail";

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                dadapter = new SqlDataAdapter(sql, connstring);
                dset = new DataSet();
                dadapter.Fill(dset);
                DropDownList1.DataSource = dset.Tables[0];
                DropDownList1.DataTextField = "e_name";
                DropDownList1.DataValueField = "e_id";
                DropDownList1.DataBind();
                GridViewBind();
            }
        }

        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            GridViewBind();
        }
        public void GridViewBind()
        {
            dadapter = new SqlDataAdapter("select * from emp_detail where e_id=" + DropDownList1.SelectedValue + "", connstring);
            dset = new DataSet();
            dadapter.Fill(dset);
            GridView1.DataSource = dset.Tables[0];
            GridView1.DataBind();
        }
    }
}

Code on .aspx

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .style1
        {
            height: 3px;
        }        .style2
        {
            height: 24px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table style="height: 376px; width: 919px">
    <tr>
    <td class="style2">
        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"
            Font-Size="10pt" Height="17px"
            onselectedindexchanged="DropDownList1_SelectedIndexChanged" Width="162px">
        </asp:DropDownList>
        </td>
    <td class="style2"></td>
    <td class="style2"></td>
    </tr>
    <tr>
    <td class="style1"></td>
    <td class="style1"></td>
    <td class="style1"></td>
    </tr>
    <tr>
    <td>
        <asp:GridView ID="GridView1" runat="server" BackColor="White"
            BorderColor="#336666" BorderStyle="Double" BorderWidth="3px" CellPadding="4"
            GridLines="Horizontal" Height="168px" Width="452px">
            <FooterStyle BackColor="White" ForeColor="#333333" />
            <HeaderStyle BackColor="#336666" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#336666" ForeColor="White" HorizontalAlign="Center" />
            <RowStyle BackColor="White" ForeColor="#333333" />
            <SelectedRowStyle BackColor="#339966" Font-Bold="True" ForeColor="White" />
            <SortedAscendingCellStyle BackColor="#F7F7F7" />
            <SortedAscendingHeaderStyle BackColor="#487575" />
            <SortedDescendingCellStyle BackColor="#E5E5E5" />
            <SortedDescendingHeaderStyle BackColor="#275353" />
        </asp:GridView>
        </td>
    <td></td>
    <td></td>
    </tr>
       </table>
    </div>
    </form>
</body>
</html>

Now run the application.
Output

Select another name from the DropDownList. Like I am selecting a name "SATISH KUMAR".

All records will be shown in the GridView related to "SATISH KUMAR"..