Bagikan melalui

Menggunakan CascadingDropDown dengan Database (C#)

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 mengatur 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 lainnya 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 saat 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.cs.asmx" ServiceMethod="GetVendors"
 TargetControlID="VendorsList" Category="Vendor"
 PromptText="Select Vendor" />

Pemanjang 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.cs.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="C#" Class="CascadingDropdown1" %>
using System.Web.Script.Services;
using AjaxControlToolkit;
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Collections.Generic;
using System.Collections.Specialized;
using System.Data.SqlClient;
[ScriptService]
public class CascadingDropdown1 : System.Web.Services.WebService
{
 // ...
}

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

public CascadingDropDownNameValue[] MethodNameHere(string knownCategoryValues, 
    string category)

Jadi nilai yang dikembalikan harus berupa array jenis CascadingDropDownNameValue yang ditentukan oleh Control Toolkit. Metode GetVendors() ini cukup mudah diimplementasikan: 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 CascadingDropDownNameValue[] GetVendors(string knownCategoryValues, string category)
{
    SqlConnection conn = new SqlConnection("server=(local)\\SQLEXPRESS; 
    Integrated Security=true; Initial Catalog=AdventureWorks");
    conn.Open();
    SqlCommand comm = new SqlCommand("SELECT TOP 25 VendorID, Name 
    FROM Purchasing.Vendor",conn);
    SqlDataReader dr = comm.ExecuteReader();
    List<CascadingDropDownNameValue> l = new List<CascadingDropDownNameValue>();
    while (dr.Read())
    {
        l.Add(new CascadingDropDownNameValue(dr["Name"].ToString(),
        dr["VendorID"].ToString()));
    }
    conn.Close();
    return l.ToArray();
}

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 menentukan metode pembantu untuk tugas tersebut: Metode ParseKnownCategoryValuesString() mengembalikan StringDictionary elemen dengan data dropdown:

[WebMethod]
public CascadingDropDownNameValue[] GetContactsForVendor(string knownCategoryValues, 
    string category)
{
    int VendorID;
    CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);

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

if (!kv.ContainsKey("Vendor") || !Int32.TryParse(kv["Vendor"],out VendorID)) 
{
    throw new ArgumentException("Couldn't find vendor.");
};

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.

SqlConnection conn = new SqlConnection("server=(local)\\SQLEXPRESS; 
 Integrated Security=true; Initial Catalog=AdventureWorks");
 conn.Open();
 SqlCommand comm = 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);
 SqlDataReader dr = comm.ExecuteReader();
 List<CascadingDropDownNameValue> l = new List<CascadingDropDownNameValue>();
 while (dr.Read())
 {
 l.Add(new CascadingDropDownNameValue(
 dr["FirstName"].ToString() + " " + dr["LastName"].ToString(),
 dr["ContactID"].ToString()));
 }
 conn.Close();
 return l.ToArray();
}

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

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

Daftar kedua diisi sesuai dengan pilihan di daftar pertama

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

SebelumnyaBerikutnya