کار با Dropdown List های تو در تو درASP

دراین مقاله میخواهیم کار با Multiple Dropdown List (لیستهای کشویی چند گانه ) , و نحوه استفاده از آنها در صفحات ثبت نام و ارتباط DropDownList با داده های پویا را بصورت مرحله به مرحله پیش ببریم.

Multiple Dropdown List به هم مرتبط هستند، به این صورت که اطلاعات لیست دوم بستگی به انتخاب در لیست اول دارد.به عنوان مثال، با استفاده از این لیستها، با انتخاب کشور مورد نظر در بخش country ، در قسمت state استانهای آن کشور را نشان میدهد و با انتخاب استان مورد نظر شهرهای موجود در آن استان را درقسمتcity به نمایش میگذارد.

برای درک بهتر با مثالی شروع میکنیم.

نگاهی به عکس بالا بیندازید ، در شکل 1 ، زمانی که کشور ایران را انتخاب میکنید ،در لیست کشویی دوم نام استانهای ایران را نمایش میدهد.در شکل 2 وقتی استان تهران را انتخاب کردید تمام شهرهای استان تهران نمایش داده میشود.

گام به گام طراحی را انجام میدهیم.

در مرحله اول باید بانک اطلاعاتی طراحی کنیم.

در حال حاضر یک دیتابیس با نام "CsharpCorner" ایجاد میکینم.

جدولی به نام tbl_country ایجاد میکنیم

نام کشورها را وارد این جدول میکنیم.

مانند شکل زیر دومین جدول را بنام "table_stats" طراحی میکنیم

وارد کردن داده ها به جدول 2:

طراحی جدول 3:

واردکردن داده ها به جدول 3:

در حال حاضر طراحی جداول به پایان رسیده و، باید ارتباط بین جداول را با کلید اصلی (primary key) و کلید خارجی (foreign key) برقرار کنیم.

درحال حاضر قسمت دیتابیس کامل شده.اینک کدهای مربوط را برای آنها مینویسیم.

پروژه empty جدیدی در ASP.NET با نام "DinamicDD"ایجاد میکنیم.

یک وب فرم جدید با نام DinamicDDL اضافه کرده و کدهای زیر را در آن وارد میکینیم.

Design View: (DynamicDDL.aspx)

<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server"> 
    
    <link href="Content/css/bootstrap-rtl.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <title></title>  
</head>  
<body dir="rtl">  
    <form id="form1" runat="server">  
    <div class="list-group-item    ">  
    <table>  
            <tr>  
                <th width="18%">کشور</th>  
                <th width="3%">:</th>  
                <td>  
                    <asp:DropDownList ID="ddlCountry" runat="server" Width="185px" Height="30px" AutoPostBack="true" OnSelectedIndexChanged="ddlCountry_SelectedIndexChanged" >  
                        <asp:ListItem>--انتخاب کنید--</asp:ListItem>  
                        <asp:ListItem>Iran</asp:ListItem>  
                        <asp:ListItem>USA</asp:ListItem>  
                        <asp:ListItem>German</asp:ListItem>  
                        <asp:ListItem>France</asp:ListItem>  
                    </asp:DropDownList>  
                </td>  
            </tr>  
            <tr>  
                <th>استان</th>  
                <th>:</th>  
                <td>  
                  <asp:DropDownList ID="ddlState" runat="server" Width="185px" Height="30px" AutoPostBack="true" OnSelectedIndexChanged="ddlState_SelectedIndexChanged" />  
                </td>  
            </tr>  
            <tr>  
                <th>شهر</th>  
                <th>:</th>  
                <td>  
                    <asp:DropDownList ID="ddlCity" runat="server" Width="185px" Height="30px" ></asp:DropDownList>  
                </td>  
            </tr>  
                </table>  
    </div>  
    </form>  
</body>  
</html>

Code View: (DynamicDDL.aspx.cs)

 public partial class DinamicDDL : System.Web.UI.Page
    {
        SqlConnection con = null;  
        SqlCommand cmd = null;  
        SqlDataReader dr = null;  
  
        string strSqlCmd = string.Empty;  
  
        protected void Page_Load(object sender, EventArgs e)  
        {  
             con = new SqlConnection(ConfigurationManager.ConnectionStrings["MyConStr"].ConnectionString);  
        }  
  
        protected void ddlCountry_SelectedIndexChanged(object sender, EventArgs e)  
        {  
            
            strSqlCmd = "select * from tbl_state where countryid=" + ddlCountry.SelectedIndex;  
            SqlCommand cmd = new SqlCommand(strSqlCmd,con);  
  
            if(con.State!=ConnectionState.Open)  
            {  
                con.Open();  
            }  
            dr = cmd.ExecuteReader();  
  
            ddlState.DataSource = dr;  
            ddlState.DataTextField = "state";  
            ddlState.DataValueField = "id";  
            ddlState.DataBind();  
            ddlState.Items.Insert(0, new ListItem("-انتخاب کنید-", "0"));  
  
            if (con.State != ConnectionState.Closed)  
                con.Close();  
        }  
  
        protected void ddlState_SelectedIndexChanged(object sender, EventArgs e)  
        {  
              
            strSqlCmd = "select * from tbl_city where stateid=" + ddlState.SelectedValue;  
            SqlCommand cmd = new SqlCommand(strSqlCmd, con);  
  
            if (con.State != ConnectionState.Open)  
            {  
                con.Open();  
            }  
            dr = cmd.ExecuteReader();  
  
            ddlCity.DataSource = dr;  
            ddlCity.DataTextField = "city";  
            ddlCity.DataBind();
            ddlCity.Items.Insert(0, new ListItem("-انتخاب کنید-", "0"));  
  
            if (con.State != ConnectionState.Closed)  
                con.Close();  
        }  
    }

Web.config:

<configuration>  
  <connectionStrings >  
    <add name="MyConStr" connectionString="Server=(local);Database=CSharpCorner;User Id=sa ;Password=123"/>  
  </connectionStrings>  
    <system.web>  
      <compilation debug="true" targetFramework="4.5.1" />  
      <httpRuntime targetFramework="4.5.1" />  
    </system.web>  
  
</configuration>

ما میتوانیم هنگام ایجاد صفحات ثبت نام از از این کدها استفاده کنیم.

فایل های ضمیمه

4585_DinamicDDL.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

کار با Dropdown List های تو در تو درASP

فایل های ضمیمه

برنامه نویسان

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید