توضیحات و دانلود

نحوه پیاده سازی Cascading DropdownList با استفاده از jquery در asp.net
0 0
نحوه پیاده سازی Cascading DropdownList با استفاده از jquery در asp.net

 با سلام در این مقاله از JQuery جاوا اسکریپت کتابخانه برای ایجاد رابط کاربری  با استفاده از JQuery AJAX برای عملکرد Cascading DropDownList استفاده میکنیم .
Cascading DropDownList به معنای مجموعه ای از DropDownLists وابسته است که یکی از DropDownList وابسته به  DropDownList بعدی یا قبلی است و براساس آیتم انتخاب شده توسط کاربر ذخیره می شود. در بسیاری از موارد ما باید از Cascading DropDownLists استفاده کنیم .
قاره - کشور - شهر
شهر به کشور وابسته است و به نوبه خود کشور به قاره وابسته است بنابراین ما به یک سری از Cascading DropDownList نیاز داریم.
طراحی پایگاه داده
برای این آموزش، سه جدول ایجاد میکنیم که طرح های آنها در زیر آمده است
جدول قاره ها

جدول کشورها

جدول شهرها

رشته اتصال

<connectionStrings>
 <addname="conString"connectionString="Data Source=.\SQLEXPRESS;
    database=CascadingDDL;Integrated Security=true"/>
</connectionStrings>

طرح Front End
از 3 DropDownLists برای هر نهاد استفاده میکنیم که نقشه برداری را در زیر نشان داده شده است :
1. ddlContinents - لیست قاره ها
2. ddlCountries - لیست کشورها
3. ddlCities - لیست شهرها

Continents:<asp:DropDownList ID="ddlContinents" runat="server" AppendDataBoundItems="true"
             onchange = "PopulateContinents();">
    <asp:ListItem Text = "Please select" Value = "0"></asp:ListItem>                
</asp:DropDownList>
<br /><br />
Country:<asp:DropDownList ID="ddlCountries" runat="server"
             onchange = "PopulateCities();">
    <asp:ListItem Text = "Please select" Value = "0"></asp:ListItem>                
</asp:DropDownList>
<br /><br />
City:<asp:DropDownList ID="ddlCities" runat="server">
    <asp:ListItem Text = "Please select" Value = "0"></asp:ListItem>                
</asp:DropDownList>
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick = "Submit" /> 

جمع آوری قاره ها DropDownList
در رویداد Page_Load صفحه DropDownList قاره ها را پر می کنیم .
C #

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        this.PopulateContinents();
    }
}
 
private void PopulateContinents()
{
    String strConnString = ConfigurationManager
        .ConnectionStrings["conString"].ConnectionString;
    String strQuery = "select ID, ContinentName from Continents";
    using (SqlConnection con = new SqlConnection(strConnString))
    {
        using (SqlCommand cmd = new SqlCommand())
        {
            cmd.CommandType = CommandType.Text;
            cmd.CommandText = strQuery;
            cmd.Connection = con;
            con.Open();
            ddlContinents.DataSource = cmd.ExecuteReader();
            ddlContinents.DataTextField = "ContinentName";
            ddlContinents.DataValueField = "ID";
            ddlContinents.DataBind();
            con.Close();
        }
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Me.PopulateContinents()
        End If
End Sub
 
Private Sub PopulateContinents()
        Dim strConnString As String = ConfigurationManager.ConnectionStrings("conString").ConnectionString
        Dim strQuery As String = "select ID, ContinentName from Continents"
        Dim con As SqlConnection = New SqlConnection(strConnString)
        Dim cmd As SqlCommand = New SqlCommand
        cmd.CommandType = CommandType.Text
        cmd.CommandText = strQuery
        cmd.Connection = con
        con.Open()
        ddlContinents.DataSource = cmd.ExecuteReader
        ddlContinents.DataTextField = "ContinentName"
        ddlContinents.DataValueField = "ID"
        ddlContinents.DataBind()
        con.Close()
End Sub

جمعیت کشور
 DropDownList کشورها را بر اساس ID قاره ای که توسط کاربر انتخاب شده است، می گیریم. روش زیر به روش Web و Static (C #) Shared (VB) اعلام شده است تا بتوان آن را با استفاده از jQuery انجام داد .
C #

[System.Web.Services.WebMethod]
public static ArrayList PopulateCountries(int continentId)
{
    ArrayList list = new ArrayList();
    String strConnString = ConfigurationManager
        .ConnectionStrings["conString"].ConnectionString;
    String strQuery = "select ID, CountryName from Countries where ContinentID=@ContinentID";
    using (SqlConnection con = new SqlConnection(strConnString))
    {
        using (SqlCommand cmd = new SqlCommand())
        {
            cmd.CommandType = CommandType.Text;
            cmd.Parameters.AddWithValue("@ContinentID", continentId);
            cmd.CommandText = strQuery;
            cmd.Connection = con;
            con.Open();
            SqlDataReader sdr = cmd.ExecuteReader();
            while (sdr.Read())
            {
                list.Add(new ListItem(
               sdr["CountryName"].ToString(),
               sdr["ID"].ToString()
                ));
            }
            con.Close();
            return list;
        }
    }
}

VB.Net

<System.Web.Services.WebMethod()> _
Public Shared Function PopulateCountries(ByVal continentId As Integer) As ArrayList
        Dim list As ArrayList = New ArrayList
        Dim strConnString As String = ConfigurationManager.ConnectionStrings("conString").ConnectionString
        Dim strQuery As String = "select ID, CountryName from Countries where ContinentID=@ContinentID"
        Dim con As SqlConnection = New SqlConnection(strConnString)
        Dim cmd As SqlCommand = New SqlCommand
        cmd.CommandType = CommandType.Text
        cmd.Parameters.AddWithValue("@ContinentID", continentId)
        cmd.CommandText = strQuery
        cmd.Connection = con
        con.Open()
        Dim sdr As SqlDataReader = cmd.ExecuteReader
       While sdr.Read
            list.Add(New ListItem(sdr("CountryName").ToString, sdr("ID").ToString))
        End While
        con.Close()
        Return list
End Function

شما متوجه خواهید شد که ID قاره را به عنوان پارامتر به Query با استفاده از Property of SelectedItemValue از DropDownList می گذارم در نتیجه پرس و جو پرونده ها (Countries) را برای این Continental ID باز می گرداند و سپس به Country DropDownList
 
جمعیت شهرها
 در انتخاب کشور پرچم شهرهای آن کشور را به DropDownList شهراضافه میکنیم . روش زیر نیز یک روش وب است تا استفاده از jQuery AJAX فراخوانی شود.
C #

[System.Web.Services.WebMethod]
public static ArrayList PopulateCities(int countryId)
{
    ArrayList list = new ArrayList();
    String strConnString = ConfigurationManager
        .ConnectionStrings["conString"].ConnectionString;
    String strQuery = "select ID, CityName from Cities where CountryID=@CountryID";
    using (SqlConnection con = new SqlConnection(strConnString))
    {
        using (SqlCommand cmd = new SqlCommand())
        {
            cmd.CommandType = CommandType.Text;
            cmd.Parameters.AddWithValue("@CountryID", countryId);
            cmd.CommandText = strQuery;
            cmd.Connection = con;
            con.Open();
            SqlDataReader sdr = cmd.ExecuteReader();
            while (sdr.Read())
            {
                list.Add(new ListItem(
               sdr["CityName"].ToString(),
               sdr["ID"].ToString()
                ));
            }
            con.Close();
            return list;
        }
    }
}

VB.Net

<System.Web.Services.WebMethod()> _
    Public Shared Function PopulateCities(ByVal countryId As Integer) As ArrayList
        Dim list As ArrayList = New ArrayList
        Dim strConnString As String = ConfigurationManager.ConnectionStrings("conString").ConnectionString
        Dim strQuery As String = "select ID, CityName from Cities where CountryID=@CountryID"
        Dim con As SqlConnection = New SqlConnection(strConnString)
        Dim cmd As SqlCommand = New SqlCommand
        cmd.CommandType = CommandType.Text
        cmd.Parameters.AddWithValue("@CountryID", countryId)
        cmd.CommandText = strQuery
        cmd.Connection = con
        con.Open()
        Dim sdr As SqlDataReader = cmd.ExecuteReader
        While sdr.Read
            list.Add(New ListItem(sdr("CityName").ToString, sdr("ID").ToString))
        End While
        con.Close()
        Return list
End Function

 

در بالا query در جدول شهرها را ایجاد میکنیم و تمام شهرهایی که متعلق به آن کشور هستند  توسط کاربر انتخاب میشوند .
جمعیت  کشورهای عضو DropDownList Client Side
تابع زیر در رویداد exchange of Continents DropDownList فراخوانی می شود. شما در کد زیرمتوجه خواهید شد که این تابع با استفاده از روش PopulateCountries با شناسه قاره به عنوان پارامتربا استفاده از jQuery AJAX انتخاب شده  که قبلا توضیح داده شده است، ارتباط می گیرد . در رویداد OnSuccess ارتباط جی کوئری AJAX کشورهای DropDownList جمعیت است. متغیر pageUrl نشانی اینترنتی صفحه ای را که ارتباط های جی کوئری AJAX را مدیریت می کند، ذخیره می کند. توجه داشته باشید VB.Net URL به VB.aspx تنظیم خواهد شد

<script type = "text/javascript">
var pageUrl = '<%=ResolveUrl("~/CS.aspx")%>'
function PopulateContinents() {
    $("#<%=ddlCountries.ClientID%>").attr("disabled", "disabled");
    $("#<%=ddlCities.ClientID%>").attr("disabled", "disabled");
    if ($('#<%=ddlContinents.ClientID%>').val() == "0") {
        $('#<%=ddlCountries.ClientID %>').empty().append('<option selected="selected" value="0">Please select</option>');
        $('#<%=ddlCities.ClientID %>').empty().append('<option selected="selected" value="0">Please select</option>');
    }
    else {
        $('#<%=ddlCountries.ClientID %>').empty().append('<option selected="selected" value="0">Loading...</option>');
        $.ajax({
            type: "POST",
            url: pageUrl + '/PopulateCountries',
            data: '{continentId: ' + $('#<%=ddlContinents.ClientID%>').val() + '}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnCountriesPopulated,
            failure: function(response) {
                alert(response.d);
            }
        });
    }
}
 
function OnCountriesPopulated(response) {
    PopulateControl(response.d, $("#<%=ddlCountries.ClientID %>"));
}
</script>

 جمعیت شهرها DropDownList Client Side
به همان شیوه، شهر DropDownList را در رویداد مبادله کشور DropDownList پر می کنیم،  از روش PopulateCities که قبلا با کشور به عنوان پارامتر انتخاب شده  توصیف می کند، ارتباط می گیریم. و در رویداد OnSuccess ازارتباط جی کوئری AJAX  شهر DropDownList را پر می کنیم .

<script type = "text/javascript">
function PopulateCities() {
    $("#<%=ddlCities.ClientID%>").attr("disabled", "disabled");
    if ($('#<%=ddlCountries.ClientID%>').val() == "0") {
        $('#<%=ddlCities.ClientID %>').empty().append('<option selected="selected" value="0">Please select</option>');
    }
    else {
        $('#<%=ddlCities.ClientID %>').empty().append('<option selected="selected" value="0">Loading...</option>');
        $.ajax({
            type: "POST",
            url: pageUrl + '/PopulateCities',
            data: '{countryId: ' + $('#<%=ddlCountries.ClientID%>').val() + '}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnCitiesPopulated,
            failure: function(response) {
                alert(response.d);
            }
        });
    }
}
 
function OnCitiesPopulated(response) {
    PopulateControl(response.d, $("#<%=ddlCities.ClientID %>"));
}
</script>

 جمع آوری DropDownLists با داده ها
روش زیر برای پر کردن DropDownList با داده های بازگشتی از سرور استفاده می شود. لیستی از اطلاعات را همراه با مرجع کنترل که نیاز به جمعیت دارد را می پذیرد.

<script type = "text/javascript">
function PopulateControl(list, control) {
    if (list.length > 0) {
        control.removeAttr("disabled");
        control.empty().append('<option selected="selected" value="0">Please select</option>');
        $.each(list, function() {
            control.append($("<option></option>").val(this['Value']).html(this['Text']));
        });
    }
    else {
        control.empty().append('<option selected="selected" value="0">Not available<option>');
    }
}
</script>

دریافت گزینه های انتخاب شده
 وقتی که روی دکمه کلیک میکنیم اطلاعات به سمت سرور ارسال می شود . از آنجا که کشور ها و شهرهای DropDownLists client side هستند، انتخاب ها به طور مستقیم در دسترس نیست و بنابراین برای به دست آوردن مقادیر بازگشت ما باید مانند زیر انجام دهیم .
C #

protected void Submit(object sender, EventArgs e)
{
    string continent = Request.Form[ddlContinents.UniqueID];
    string country = Request.Form[ddlCountries.UniqueID];
    string city = Request.Form[ddlCities.UniqueID];
 
    // Repopulate Countries and Cities
    PopulateDropDownList(PopulateCountries(int.Parse(continent)), ddlCountries);
    PopulateDropDownList(PopulateCities(int.Parse(country)), ddlCities);
    ddlCountries.Items.FindByValue(country).Selected = true;
    ddlCities.Items.FindByValue(city).Selected = true;
}

VB.Net

Protected Sub Submit(ByVal sender As Object, ByVal e As EventArgs)
        Dim continent As String = Request.Form(ddlContinents.UniqueID)
        Dim country As String = Request.Form(ddlCountries.UniqueID)
        Dim city As String = Request.Form(ddlCities.UniqueID)
 
        ' Repopulate Countries and Cities
        PopulateDropDownList(PopulateCountries(Integer.Parse(continent)), ddlCountries)
        PopulateDropDownList(PopulateCities(Integer.Parse(country)), ddlCities)
        ddlCountries.Items.FindByValue(country).Selected = True
        ddlCities.Items.FindByValue(city).Selected = True
End Sub

در بالا متوجه شدیم که دوباره به DropDownLists می رویم و سپس ارزش ها را مجددا انتخاب می کنیم تا بتوانیم انتخاب های کاربر را در پشت پیگیری ها حفظ کنیم. در زیر روشی است که server side DropDownLists را اشغال می کند.
C #

private void PopulateDropDownList(ArrayList list, DropDownList ddl)
{
    ddl.DataSource = list;
    ddl.DataTextField = "Text";
    ddl.DataValueField = "Value";
    ddl.DataBind();
}

VB.Net

Private Sub PopulateDropDownList(ByVal list As ArrayList, ByVal ddl As DropDownList)
        ddl.DataSource = list
        ddl.DataTextField = "Text"
        ddl.DataValueField = "Value"
        ddl.DataBind()
End Sub

خروجی در تصویر زیر نشان داده شده است

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :