استخدام اداة AJAX Cascading DropDownList  

w
في هذه المقالة سوف أشرح كيفية الاستفادة من السيطرة على اداة DropDownlist  باستخدام احد ادوات أجاكس CascadingDropDown في ASP.Net .
في البداية سوف نشرح كيفية استخدام اداة AJAX Cascading DropDown مع اداة DropDownlist مع ربطها بقاعدة بيانات ، الفكرة باختصار انه يوجد معنا ثلاث DropDownlist يتم تفعيل الثانية على حسب أختيار الاولى وكذلك يتم تفعيل الثالثة على حسب أختيار الثانية تابعوا معي خطوة خطوة 🙂

اولا : نقوم باضافة ثلاث اداوت DropDownlist  
25
ثانياً : نقوم بانشاء قاعدة بيانات فيها ثلاثة جدوال جدول الدولة والمدينة والولاية .
1- الجدول الاول الدولة Countries Table كما بالشكل التالي :
1 2- الجدول الثاني المدينة Cities Table كما بالشكل التالي:
2 3- الجدول الثالث الولاية States Table كما بالشكل التالي :
3
رابعاً : نقوم بتضمين هذا الكود التالي في اعلى الصفحة بمشروعك


<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="cc1" %>

خامساً : نقوم بادراج اداة مكتبه الاجاكس ToolScriptManager التي تعتمد عليها باقي اداوت اجاكس .

<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>

سادساً: نقوم بأدراج اداة Cascading DropDown بجانب كل DropDownlist  وربط كل واحده منها على حده .
6

<asp:DropDownList ID="ddlCountries" runat="server" Width = "150">
</asp:DropDownList>
<cc1:CascadingDropDown ID="cdlCountries"TargetControlID="ddlCountries"

PromptText="Select Country" PromptValue=""ServicePath="ServiceCS.asmx"

ServiceMethod="GetCountries" runat="server" Category="CountryId" />

سابعاً : للفائدة قوم باضافة كود ال HTML التالي الى صفحتك

<cc1:ToolkitScriptManager ID="ToolkitScriptManager1"runat="server">
</cc1:ToolkitScriptManager>
<table>
    <tr>
        <td style="width: 80px">
            Country:
        </td>
        <td>
            <asp:DropDownList ID="ddlCountries" runat="server" Width="150">
            </asp:DropDownList>
            <cc1:CascadingDropDown ID="cdlCountries"
TargetControlID="ddlCountries" PromptText="Select Country"
                PromptValue="" ServicePath="ServiceCS.asmx"
ServiceMethod="GetCountries" runat="server"
                Category="CountryId" LoadingText="Loading..." />
        </td>
    </tr>
    <tr>
        <td>
            State:
        </td>
        <td>
            <asp:DropDownList ID="ddlStates" runat="server" Width="150">
            </asp:DropDownList>
            <cc1:CascadingDropDown ID="cdlStates"
TargetControlID="ddlStates" PromptText="Select State"
                PromptValue="" ServicePath="ServiceCS.asmx"
ServiceMethod="GetStates" runat="server"
                Category="StateId" ParentControlID="ddlCountries"
LoadingText="Loading..." />
        </td>
    </tr>
    <tr>
        <td>
            City:
        </td>
        <td>
            <asp:DropDownList ID="ddlCities" runat="server" Width="150">
            </asp:DropDownList>
            <cc1:CascadingDropDown ID="cdlCities"
TargetControlID="ddlCities" PromptText="Select City"
                PromptValue="" ServicePath="ServiceCS.asmx"
ServiceMethod="GetCities" runat="server"
                Category="CityId" ParentControlID="ddlStates"
LoadingText="Loading..." />
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
            <asp:Button ID="btnSubmit" runat="server" Text="Submit"
OnClick="btnSubmit_Click" />
        </td>
    </tr>
</table>

شرح خصائص CascadingDropDown :
1- TargetControlID:-.
هذا الخاصية تخص المعرف الي سوف تقوم بربطها باداة ال DropDownList الي تمثل الاداة نفسها
2- ServicePath:-
هنا نضع مسار الWeb Service الذي يرجع البيانات المستخدمه في ال DropDownList ويجب الا تترك فارغة وهذه الخاصية معتمدة على الخاصية الي بعدها الServiceMethod لكي تعود بقيمة للصفحة .
3- ServiceMethod :-
هي الدالة التي قمنا بانشائها داخل ال Web Service نقوم باستداعائها من خلال هذة الخاصية وارجاع البيانات بال DropDownList
PromptText -4:-
النص الاختيار الي يظهر في اداة DropDownList عندما لا يوجد بيانات لعرضها.
PromptValue-5:-
القيمة الافتراضية للخاصية السابقة PromptText عندما تكون تريد ان تعرض PromptText في ال DropDownList كا بيانات افتراضية.
Category-6:-
تعني هذة الخاصية هي القيمه التي يتم تمريرها كاparameter الى ال DropDownList الثانية التي تسمى ابن من ال DropDownList الاولى الي تسمى اب ومرجع لباقي ال DropDownList
ParentControlID-7:-
نضع فيه قيمة المرجع الاساسي المعتمد عليه في حال وجود بيانات في الDropDownList الابن سيتم تفعليها بناءً على البيانات الموجودة في ال DropDownList الاب .
LoadingText -8:-
الرسالة الي تظهر عند تحميل البياناتت في اداة ال DropDownList.

ثامناً : نقوم باضافة Web Service للمشروع كما في الصورة التالية :
4

تاسعا: نقوم باضافة الكود التالي الي صفحة المشروع :

#C


using System;
using System.Web;
using System.Web.Services;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using AjaxControlToolkit;
using System.Collections.Generic;

///
/// Summary description for ServiceCS
///

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class ServiceCS : System.Web.Services.WebService
{
[WebMethod]
public CascadingDropDownNameValue[] GetCountries(string knownCategoryValues)
{
string query = "SELECT CountryName, CountryId FROM Countries";
List countries = GetData(query);
return countries.ToArray();
}

[WebMethod]
public CascadingDropDownNameValue[] GetStates(string knownCategoryValues)
{
string country = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)["CountryId"];
string query = string.Format("SELECT StateName, StateId FROM States WHERE CountryId = {0}", country);
List states = GetData(query);
return states.ToArray();
}

[WebMethod]
public CascadingDropDownNameValue[] GetCities(string knownCategoryValues)
{
string state = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)["StateId"];
string query = string.Format("SELECT CityName, CityId FROM Cities WHERE StateId = {0}", state);
List cities = GetData(query);
return cities.ToArray();
}

private List GetData(string query)
{
string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
SqlCommand cmd = new SqlCommand(query);
List values = new List();
using (SqlConnection con = new SqlConnection(conString))
{
con.Open();
cmd.Connection = con;
using (SqlDataReader reader = cmd.ExecuteReader())
{
while (reader.Read())
{
values.Add(new CascadingDropDownNameValue
{
name = reader[0].ToString(),
value = reader[1].ToString()
});
}
reader.Close();
con.Close();
return values;
}
}
}
}

VB


VB.Net
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Imports AjaxControlToolkit
Imports System.Collections.Generic

<WebService([Namespace]:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<System.Web.Script.Services.ScriptService()> _
Public Class ServiceVB
Inherits System.Web.Services.WebService
<WebMethod()> _
Public Function GetCountries(knownCategoryValues As String) As CascadingDropDownNameValue()
Dim query As String = "SELECT CountryName, CountryId FROM Countries"
Dim countries As List(Of CascadingDropDownNameValue) = GetData(query)
Return countries.ToArray()
End Function

<WebMethod()> _
Public Function GetStates(knownCategoryValues As String) As CascadingDropDownNameValue()
Dim country As String = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)("CountryId")
Dim query As String = String.Format("SELECT StateName, StateId FROM States WHERE CountryId = {0}", country)
Dim states As List(Of CascadingDropDownNameValue) = GetData(query)
Return states.ToArray()
End Function

<WebMethod()> _
Public Function GetCities(knownCategoryValues As String) As CascadingDropDownNameValue()
Dim state As String = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)("StateId")
Dim query As String = String.Format("SELECT CityName, CityId FROM Cities WHERE StateId = {0}", state)
Dim cities As List(Of CascadingDropDownNameValue) = GetData(query)
Return cities.ToArray()
End Function

Private Function GetData(query As String) As List(Of CascadingDropDownNameValue)
Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Dim cmd As New SqlCommand(query)
Dim values As New List(Of CascadingDropDownNameValue)()
Using con As New SqlConnection(conString)
con.Open()
cmd.Connection = con
Using reader As SqlDataReader = cmd.ExecuteReader()
While reader.Read()
values.Add(New CascadingDropDownNameValue() With { _
.name = reader(0).ToString(), _
.value = reader(1).ToString() _
})
End While
reader.Close()
con.Close()
Return values
End Using
End Using
End Function
End Clas

عاشرا نقوم باضافة كود زر الارسال هذا الكود ياخذ البيانات ويعرضها في رسالة تظهر للمستخدم .

#C

protected void btnSubmit_Click(object sender, EventArgs e)
{
    string message = "Country: " + ddlCountries.SelectedItem.Text;
    message += " State: " + ddlStates.SelectedItem.Text;
    message += " City: " + ddlCities.SelectedItem.Text;
    ClientScript.RegisterStartupScript(GetType(), "alert", "alert('" + message + "');", true);
}

VB.NET

Protected Sub btnSubmit_Click(sender As Object, e As EventArgs)
    Dim message As String = "Country: " + ddlCountries.SelectedItem.Text
    message += " State: " + ddlStates.SelectedItem.Text
    message += " City: " + ddlCities.SelectedItem.Text
    ClientScript.RegisterStartupScript(Me.GetType(), "alert", "alert('" + message + "');", True)
End Sub

AAAAA
عند الضغط على زر الارسال السابق سيظهر لك الخطا التالي
e
لحل هذة الخطا فقط قوم بتغيير قيمة خاصية EnableEventValidation = “true ” غير ها الى False كما في الصورة
Earth-in-hands-environment-concept
لتحميل المثال من هنا
الى هنا اتمنى ان تكونوا قد استفدتم من هذه المقاله اراكم في مقاله أخرى باذن الله 🙂