DropDownList های تودرتو در ASP.NET

در این مثال 3 عدد dropdownlist داریم که محتوای آنها از جداول بانک اطلاعاتی خوانده می شوند. تا زمانیکه از dropdownlist اول گزینه ای انتخاب نکرده ایم dropdownlist دوم فعال نمی شود و به محض انتخاب dropdownlist دوم dropdownlist سوم هم فعال می شود.

راه حل

مرحله 1

یک پروژه Web Application در ASP.NET ساخته و 3 DropDownList به آن اضافه می کنیم. فرمی مطابق شکل زیر :

یا کدهای زیر را در صفحه Html فایل Aspx کپی نمایید.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="CascadingDDLDemo.index" %>  
  
<!DOCTYPE html>  
  
<html>  
<head runat="server">  
    <title></title>  
</head>  
<body>  
    <form id="form1" runat="server">  
        <div>  
            <asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" AutoPostBack="True" DataTextField="CountryName" DataValueField="CountryID"></asp:DropDownList>  
            <br />  
            <br />  
            <br />  
            <asp:DropDownList ID="DropDownList2" runat="server" OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged" AutoPostBack="True" DataTextField="StateName" DataValueField="StateID"></asp:DropDownList>  
            <br />  
            <br />  
            <br />  
            <asp:DropDownList ID="DropDownList3" runat="server" DataTextField="CityName" DataValueField="CityID"></asp:DropDownList>  
        </div>  
    </form>  
</body>  
</html>

مرحله 2

SQL Server Management Studio را باز کنید و کوئری های زیر را اجرا نمایید.

Create Database CascadingDDLDemo

Use CascadingDDLDemo  
  
Create Table tblCountries(CountryID int Primary Key, CountryName nvarchar(50))  
Create Table tblStates(StateID int Primary Key, StateName nvarchar(50), CountryID int FOREIGN KEY REFERENCES tblCountries(CountryID))  
Create Table tblCities(CityID int Primary Key, CityName nvarchar(50), StateID int FOREIGN KEY REFERENCES tblStates(StateID))  
  
Insert Into tblCountries Values (1,'USA')  
Insert Into tblCountries Values (2,'Europe')  
Insert Into tblCountries Values (3,'India')  
  
Insert Into tblStates Values (1,'New York',1)  
Insert Into tblStates Values (2,'California',1)  
Insert Into tblStates Values (3,'Albania',2)  
Insert Into tblStates Values (4,'Austria',2)  
Insert Into tblStates Values (5,'Uttar Pradesh',3)  
Insert Into tblStates Values (6,'Maharashtra',3)  
  
Insert Into tblCities Values (1,'Bufflo',1)  
Insert Into tblCities Values (2,'Yonkers',1)  
Insert Into tblCities Values (3,'Richmond',2)  
Insert Into tblCities Values (4,'Norwalk',2)  
Insert Into tblCities Values (5,'Tirana',3)  
Insert Into tblCities Values (6,'Fier',3)  
Insert Into tblCities Values (7,'Hard',4)  
Insert Into tblCities Values (8,'Enns',4)  
Insert Into tblCities Values (9,'Allahbad',5)  
Insert Into tblCities Values (10,'Lucknow',5)  
Insert Into tblCities Values (11,'Aurangabad',6)  
Insert Into tblCities Values (12,'Akola',6)

Create Procedure spGetCountries  
As  
Begin  
    Select CountryName,CountryID from tblCountries  
End

Create Procedure spGetStates @CountryID int  
As  
Begin  
    Select StateName,StateID from tblStates where CountryID = @CountryID  
End

Create Procedure spGetCities @StateID int  
As  
Begin  
    Select CityName,CityID from tblCities where StateID = @StateID  
End

در صورتیکه فیلدهای جدول شما با علامت سوال پر شده بود باید آنها را به صورت دستی ویرایش نمایید تا فارسی شوند.

به ویژوال استادیو برگشته و کدهای زیر را در صفحه Aspx.cs کپی نمایید.

using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.UI.WebControls;

namespace CascadingDDLDemo
{
    public partial class index : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DropDownList2.Enabled = false;
                DropDownList3.Enabled = false;
                DropDownList1.DataSource = getData("spGetCountries", null);
                DropDownList1.DataBind();

                ListItem LICountry = new ListItem("----انتخاب----", "-1");
                DropDownList1.Items.Insert(0, LICountry);
                ListItem LIState = new ListItem("----انتخاب----", "-1");
                DropDownList2.Items.Insert(0, LIState);
                ListItem LICity = new ListItem("----انتخاب----", "-1");
                DropDownList3.Items.Insert(0, LICity);

            }
        }
        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            if (DropDownList1.SelectedValue == "-1")
            {
                DropDownList2.SelectedIndex = 0;
                DropDownList3.SelectedIndex = 0;
                DropDownList2.Enabled = false;
                DropDownList3.Enabled = false;
            }
            else
            {
                DropDownList2.Enabled = true;
                SqlParameter Parameter = new SqlParameter("@CountryID", DropDownList1.SelectedValue);
                DropDownList2.DataSource = getData("spGetStates", Parameter);
                DropDownList2.DataBind();

                ListItem LIState = new ListItem("----انتخاب----", "-1");
                DropDownList2.Items.Insert(0, LIState);

                DropDownList3.SelectedIndex = 0;
                DropDownList3.Enabled = false;
            }
        }

        protected void DropDownList2_SelectedIndexChanged(object sender, EventArgs e)
        {
            if (DropDownList2.SelectedValue == "-1")
            {
                DropDownList3.SelectedIndex = 0;
                DropDownList3.Enabled = false;
            }
            else
            {
                DropDownList3.Enabled = true;
                SqlParameter Parameter = new SqlParameter("@StateID", DropDownList2.SelectedValue);
                DropDownList3.DataSource = getData("spGetCities", Parameter);
                DropDownList3.DataBind();

                ListItem LICity = new ListItem("----انتخاب----", "-1");
                DropDownList3.Items.Insert(0, LICity);
            }
        }
        private DataSet getData(string Proc, SqlParameter Parameter)
        {
            string CS = ConfigurationManager.ConnectionStrings["CS"].ConnectionString;
            using (SqlConnection con = new SqlConnection(CS))
            {
                con.Open();
                SqlDataAdapter DA = new SqlDataAdapter(Proc, con);
                DA.SelectCommand.CommandType = CommandType.StoredProcedure;
                if (Parameter != null)
                {
                    DA.SelectCommand.Parameters.Add(Parameter);
                }
                DataSet DS = new DataSet();
                DA.Fill(DS);
                return DS;
            }
        }
    }
}

مرحله 4

connectionStrings را در قسمت Web.config با توجه به سرور (کامپیوتر) خود تنظیم نمایید.

مرحله 5

لازم به ذکر است در صورتی که از کدهای این مثال استفاده می نمایید باید نام پروژه خود را CascadingDDLDemo نامگذاری کرده باشید.

شرح مراحل

شرح مرحله 1

در این جا 3 کنترل DropDownList از Toolbox اضافه کردیم.
تمرکز اصلی روی DropDownList اول و دوم بود چرا که وقتی مقداری از آنها انتخاب می شود آن مقدار به سرور برگردانده می شود و بر اساس آنها مقدار کنترل DropDownList بعدی جمع آوری می شود. بنابراین خاصیت AutoPostBack این 2 کنترل باید True شود.

شرح مرحله 2

3 جدول Country ، State و City را ساختیم. همه آنها به یکدیگر وابسته اند.

بر اساس انتخاب از جدول Country مقادیر جدول states پر می شوند و بر اساس انتخاب از جدول states مقادیر جدول cities پر می شوند. بنابراین ما با کلید اصلی و کلید فرعی میان آنها ارتیاط برقرار می نماییم. اگر با این مباحث آشنایی ندارید لطفا اینجا کلیک نمایید.

سپس اطلاعاتی را برای نمونه درون جداول درج می نماییم.(insert)

سپس 3 عدد Stored Procedures برای واکشی اطلاعات بر اساس مقادیر جداول برای پر کردن DropDownList ها می سازیم.

شرح مرحله 3

در ابتدا یک متد Private می سازیم که داده ها را بر اساس 2 آرگومان Stored Procedure که در SQL ساختیم (این Stored Procedure پارامترهایی را قبول می کند) واکشی می کند. نام این متد را getData نامگذاری می نماییم.

از یک کد ADO.NET ساده برای واکشی داده ها با استفاده از Stored Procedure استفاده کردیم. پس از واکشی داده مقادیر را در Dataset ذخیره می کند. این بهره وری برنامه را بالا می برد.

در متد Page_Load دو DropDownList (دومی و سومی) را غیر فعال کردیم و DropDownList اول را با استفده از متد Private پر می کنیم. درون index صفر listItem مقدار “----انتخاب----” را درج می نماییم. بنابراین Data Source را برای واکشی داده ها تنظیم می کنیم و سپس از DataBind() برای اتصال داده به کنترل استفاده می نماییم.

همین کارها برای DropDownList های دوم و سوم انجام می گیرد.

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

3039_CascadingDDLDemo.rar

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

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

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

DropDownList های تودرتو در ASP.NET

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

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

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