Menggunakan CascadingDropDown dengan Database (VB)

oleh Christian Wenz

Unduh PDF

Kontrol CascadingDropDown di Toolkit Kontrol AJAX memperluas kontrol DropDownList sehingga perubahan dalam satu DropDownList memuat nilai terkait di DropDownList lain. Agar ini berfungsi, layanan web khusus harus dibuat.

Gambaran Umum

Kontrol CascadingDropDown di Toolkit Kontrol AJAX memperluas kontrol DropDownList sehingga perubahan dalam satu DropDownList memuat nilai terkait di DropDownList lain. (Misalnya, satu daftar menyediakan daftar status AS, dan daftar berikutnya kemudian diisi dengan kota-kota besar di negara bagian tersebut.) Agar ini berfungsi, layanan web khusus harus dibuat.

Langkah-langkah

Pertama-tama, sumber data diperlukan. Sampel ini menggunakan database AdventureWorks dan microsoft SQL Server 2005 Express Edition. Database adalah bagian opsional dari penginstalan Visual Studio (termasuk edisi ekspres) dan juga tersedia sebagai unduhan terpisah di bawah https://go.microsoft.com/fwlink/?LinkId=64064. Database AdventureWorks adalah bagian dari Sampel SQL Server 2005 dan Database Sampel (unduh di https://www.microsoft.com/download/details.aspx?id=10679). Cara termudah untuk menyiapkan database adalah dengan menggunakan Microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) dan melampirkan AdventureWorks.mdf file database.

Untuk sampel ini, kami berasumsi bahwa instans SQL Server 2005 Express Edition dipanggil SQLEXPRESS dan berada di komputer yang sama dengan server web; ini juga merupakan pengaturan default. Jika penyetelan Anda berbeda, Anda harus menyesuaikan informasi koneksi untuk database.

Untuk mengaktifkan fungsionalitas ASP.NET AJAX dan Control Toolkit, ScriptManager kontrol harus diletakkan di mana saja di halaman (tetapi dalam <form> elemen ):

<asp:ScriptManager ID="asm" runat="server" />

Pada langkah berikutnya, diperlukan dua kontrol DropDownList. Dalam sampel ini, kami menggunakan vendor dan informasi kontak dari AdventureWorks, sehingga kami membuat satu daftar untuk vendor yang tersedia dan satu untuk kontak yang tersedia:

<div>
 Vendor: <asp:DropDownList ID="VendorsList" runat="server"/><br />
 Contacts: <asp:DropDownList ID="ContactsList" runat="server"/><br />
</div>

Kemudian, dua extender CascadingDropDown harus ditambahkan ke halaman. Satu mengisi daftar (vendor) pertama, dan yang lain mengisi daftar kedua (kontak). Atribut berikut harus diatur:

• ServicePath: URL layanan web yang mengirimkan entri daftar
• ServiceMethod: Metode web yang mengirimkan entri daftar
• TargetControlID: ID daftar dropdown
• Category: Informasi kategori yang dikirimkan ke metode web ketika dipanggil
• PromptText: Teks ditampilkan saat memuat data daftar secara asinkron dari server
• ParentControlID: (opsional) daftar dropdown induk yang memicu pemuatan daftar saat ini

Bergantung pada bahasa pemrograman yang digunakan, nama layanan web yang dimaksud berubah, tetapi semua nilai atribut lainnya sama. Berikut adalah elemen CascadingDropDown untuk daftar dropdown pertama:

<ajaxToolkit:CascadingDropDown ID="ccd1" runat="server"
 ServicePath="CascadingDropdown1.vb.asmx" ServiceMethod="GetVendors"
 TargetControlID="VendorsList" Category="Vendor"
 PromptText="Select Vendor" />

Extender kontrol untuk daftar kedua perlu mengatur ParentControlID atribut sehingga memilih entri di daftar vendor memicu pemuatan elemen terkait dalam daftar kontak.

<ajaxToolkit:CascadingDropDown ID="ccd2" runat="server"
 ServicePath="CascadingDropdown1.vb.asmx" ServiceMethod="GetContactsForVendor"
 TargetControlID="ContactsList" ParentControlID="VendorsList"
 Category="Contact"
 PromptText="Select Contact" />

Pekerjaan aktual kemudian dilakukan di layanan web, yang disiapkan sebagai berikut. Perhatikan bahwa [ScriptService] atribut digunakan, jika tidak, ASP.NET AJAX tidak dapat membuat proksi JavaScript untuk mengakses metode web dari kode skrip sisi klien.

<%@ WebService Language="VB" Class="CascadingDropdown1" %>
Imports System.Web.Script.Services
Imports AjaxControlToolkit
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Collections.Generic
Imports System.Collections.Specialized
Imports System.Data.SqlClient
<ScriptService()> _
Public Class CascadingDropdown1
 Inherits System.Web.Services.WebService
 ' ...
End Class

Tanda tangan metode web yang dipanggil oleh CascadingDropDown adalah sebagai berikut:

Public Function MethodNameHere(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()

Jadi nilai yang dikembalikan harus berupa array jenis CascadingDropDownNameValue yang ditentukan oleh Control Toolkit. Metode GetVendors() ini cukup mudah diterapkan: Kode terhubung ke database AdventureWorks dan mengkueri 25 vendor pertama. Parameter pertama dalam CascadingDropDownNameValue konstruktor adalah caption entri daftar, yang kedua nilainya (atribut nilai dalam elemen HTMLoption<>). Berikut adalah kodenya:

<WebMethod()> _
Public Function GetVendors(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()
 Dim conn As New SqlConnection("server=(local)\SQLEXPRESS; Integrated Security=true; Initial Catalog=AdventureWorks")
 conn.Open()
 Dim comm As New SqlCommand( _
 "SELECT TOP 25 VendorID, Name FROM Purchasing.Vendor", conn)
 Dim dr As SqlDataReader = comm.ExecuteReader()
 Dim l As New List(Of CascadingDropDownNameValue)
 While (dr.Read())
 l.Add(New CascadingDropDownNameValue(dr("Name").ToString(),dr("VendorID").ToString()))
 End While
 conn.Close()
 Return l.ToArray()
End Function

Mendapatkan kontak terkait untuk vendor (nama metode: GetContactsForVendor()) sedikit lebih sulit. Pertama-tama, vendor yang telah dipilih dalam daftar dropdown pertama harus ditentukan. Control Toolkit mendefinisikan metode pembantu untuk tugas tersebut: Metode ParseKnownCategoryValuesString() mengembalikan StringDictionary elemen dengan data dropdown:

<WebMethod()> _
Public Function GetContactsForVendor(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()
 Dim VendorID As Integer
 CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)

Untuk alasan keamanan, data ini harus divalidasi terlebih dahulu. Jadi jika ada entri Vendor (karena Category properti dari elemen CascadingDropDown pertama diatur ke "Vendor"), ID vendor yang dipilih dapat diambil:

If Not kv.ContainsKey("Vendor") Or Not Int32.TryParse(kv("Vendor"),VendorID) Then
 Throw New ArgumentException("Couldn't find vendor.")
 End If

Sisa metode ini cukup lurus ke depan, kemudian. ID vendor digunakan sebagai parameter untuk kueri SQL yang mengambil semua kontak terkait untuk vendor tersebut. Sekali lagi, metode mengembalikan array jenis CascadingDropDownNameValue.

Dim conn As New SqlConnection("server=(local)\SQLEXPRESS; Integrated Security=true; Initial Catalog=AdventureWorks")
 conn.Open()
 Dim comm As New SqlCommand("SELECT Person.Contact.ContactID, FirstName, LastName FROM Person.Contact,Purchasing.VendorContact WHERE VendorID=@VendorID AND Person.Contact.ContactID=Purchasing.VendorContact.ContactID",conn)
 comm.Parameters.AddWithValue("@VendorID", VendorID)
 Dim dr As SqlDataReader = comm.ExecuteReader()
 Dim l As New List(Of CascadingDropDownNameValue)
 While (dr.Read())
 l.Add(New CascadingDropDownNameValue(dr("FirstName").ToString() & " " & dr("LastName").ToString(),dr("ContactID").ToString()))
 End While
 conn.Close()
 Return l.ToArray()
End Function

Muat halaman ASP.NET, dan setelah beberapa saat daftar vendor diisi dengan 25 entri. Pilih satu entri dan perhatikan bagaimana daftar dropdown kedua diisi dengan data.

Daftar pertama diisi secara otomatis (Klik untuk melihat gambar ukuran penuh)

Daftar kedua diisi sesuai dengan pilihan di daftar pertama (Klik untuk melihat gambar ukuran penuh)

SebelumnyaBerikutnya