You must Sign In to post a response.
  • Category: ASP.NET

    Dynamically generated dropdown list

    Hello all,
    I have two dropdown lists viz State and City.
    Now I am trying to dynamically fill city's dropdown list according to state I have selected.
    Here's the code.

    Code of .cs file
    -------------------

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


    public partial class dropdownlist_dynamicdd : System.Web.UI.Page
    {
    SqlConnection conn = new SqlConnection(WebConfigurationManager.AppSettings["con"]);
    SqlDataAdapter ad = new SqlDataAdapter();
    DataSet ds = new DataSet();
    protected void Page_Load(object sender, EventArgs e)
    {
    if (!IsPostBack)
    {
    ad.SelectCommand = new SqlCommand("Select * from state_tbl", conn);
    ad.Fill(ds,"State");

    DropDownList1.DataSource = ds.Tables["State"];
    DropDownList1.Items.Insert(0, new ListItem("Select State", "0"));
    DropDownList1.DataTextField = "state_name";
    DropDownList1.DataValueField = "state_id";
    DropDownList1.DataBind();

    }
    }


    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
    Response.Redirect("HI");
    DropDownList2.Enabled = true;

    ad.SelectCommand = new SqlCommand("Select * from city_tbl where state_id=@state_id", conn);

    SqlParameter p1 = new SqlParameter("@state_id", SqlDbType.Int);
    p1.Value = DropDownList1.SelectedIndex;
    ad.SelectCommand.Parameters.Add(p1);

    ad.Fill(ds,"City");

    DropDownList2.DataSource = ds.Tables["City"];
    DropDownList2.Items.Insert(0, new ListItem("----Select City----", "0"));
    DropDownList2.DataTextField = "city_name";
    DropDownList2.DataValueField = "city_id";
    DropDownList2.DataBind();
    }
    }

    Code of .aspx file
    --------------------

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="dynamicdd.aspx.cs" Inherits="dropdownlist_dynamicdd" %>

    <!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>
    </head>
    <body>
    <form id="form1" runat="server">
    <div>

    <asp:DropDownList ID="DropDownList1" runat="server" AppendDataBoundItems="true"
    OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">

    </asp:DropDownList>
    <asp:DropDownList ID="DropDownList2" runat="server" Enabled="false" AppendDataBoundItems="true">

    </asp:DropDownList>
    </div>
    </form>
    </body>
    </html>


    Database Definition
    --------------------

    create state_tbl
    {
    state_id int not null primary key,
    state_name varchar(50)
    }

    create city_tbl
    {
    city_id int not null,
    city_name varchar(50),
    state_id int foreign key references state_tbl(state_id)
    }
  • #619886
    Hi Mohit,

    Nice piece of code, are you facing any issue with this code? Or you are just sharing the useful code to our members.

    Please use resource section if you wanted to share any articles/code snippet. It will be usefull for many members.


    Regards,
    Asheej T K

  • #619899
    Hello Asheej Sir,
    This code is not giving me desirable output.I observed that OnSelectedIndexChanged event of dropdown is not getting called.
    Help please.
    With Regards
    Mohit

  • #619929
    There are few issues in your code:

    1) You need to set the AutoPostBack property of the DropDownList1 to true. That is why your OnSelectedIndexChanged event is not executed.


    <asp:DropDownList ID="DropDownList1" runat="server" AppendDataBoundItems="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" AutoPostBack="true">
    </asp:DropDownList>


    2) You need to clear the items in DropDownList2 on the SelectedIndexChanged event of DropDownList1 and fill it again. Otherwise, there will be duplicate records.

    3) You also need enable or disable DropDownList2 on the basis of the SelectedIndex of DropDownList1


    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
    DropDownList2.Items.Clear();
    if (DropDownList1.SelectedIndex == 0)
    {
    DropDownList2.Enabled = false;
    }
    else
    {
    //Your code to bind DropDownList2 goes here...
    }
    }


    Thanks & Regards
    Paritosh Mohapatra
    Microsoft MVP (ASP.Net/IIS)
    DotNetSpider MVM

  • #619953
    hello,
    you need to set AutoPostBack property to true of DropDownList1. check below code :

    <asp:DropDownList ID="DropDownList1" runat="server" AppendDataBoundItems="true"
    OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" AutoPostBack="true">

    If it helps you then Rate this.

    Best Regards,
    Manoranjan Sahoo
    http://www.dotnetsquare.com
    Blog: http://blog.msahoo.net

  • #619968
    for that yo uhave to set AutoPostBack property of dropdownlist to true.
    Regards,
    Sugandha
    Microsoft Certified Technology Specialist
    MY Blog..

  • #619979
    I have a list generated with PHP.

    <ul data-role="listview" data-filter="true" data-inset="true">
    <?
    $qry = "SELECT jobname, jobsurname, LEFT(jobsurname, 1) AS first_char FROM clients WHERE UPPER(LEFT(jobsurname, 1)) BETWEEN 'A' AND 'Z' OR LEFT(jobsurname, 1) BETWEEN '0' AND '9' ORDER BY jobsurname";
    $result = mysql_query($qry);
    $current_char = '';

    while ($row = mysql_fetch_assoc($result)) {
    if ($row['first_char'] != $current_char) {
    $current_char = $row['first_char'];
    echo '<li data-role="list-divider">' . strtoupper($current_char) . '</li>';
    }
    echo '<li><a href="#">' . $row['jobsurname'] . ', ' . $row['jobname'] . '</a></li>';
    }

    ?>
    </ul>


  • This thread is locked for new responses. Please post your comments and questions as a separate thread.
    If required, refer to the URL of this page in your new post.