Mengisi Daftar Menggunakan CascadingDropDown (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. (Misalnya, satu daftar menyediakan daftar status AS, dan daftar berikutnya kemudian diisi dengan kota-kota besar di negara bagian tersebut.) Tantangan pertama untuk dipecahkan adalah benar-benar mengisi daftar dropdown menggunakan kontrol ini.

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.) Tantangan pertama untuk dipecahkan adalah benar-benar mengisi daftar dropdown menggunakan kontrol ini.

Langkah-langkah

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" />

Kemudian, kontrol DropDownList diperlukan:

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

Untuk daftar ini, extender CascadingDropDown ditambahkan. Ini akan mengirim permintaan asinkron ke layanan web yang kemudian akan mengembalikan daftar entri yang akan ditampilkan dalam daftar. Agar ini berfungsi, atribut CascadingDropDown berikut perlu 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

Berikut adalah markup untuk CascadingDropDown elemen . Satu-satunya perbedaan antara C# dan VB adalah nama layanan web terkait:

<ajaxToolkit:CascadingDropDown ID="ccd1" runat="server"
 ServicePath="CascadingDropdown0.cs.asmx" ServiceMethod="GetVendors"
 TargetControlID="VendorsList" Category="Vendor" />

Kode JavaScript yang berasal dari extender CascadingDropDown memanggil metode layanan web dengan tanda tangan berikut:

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

Jadi aspek pentingnya adalah bahwa metode perlu mengembalikan array jenis CascadingDropDownNameValue (didefinisikan oleh ASP.NET AJAX Control Toolkit). CascadingDropDownNameValue Di konstruktor, pertama-tama teks entri daftar dan kemudian nilainya harus disediakan, seperti yang <option value="VALUE">NAME</option> akan dilakukan dalam HTML. Berikut adalah beberapa data sampel:

<%@ WebService Language="C#" Class="CascadingDropdown0" %>
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;
[ScriptService]
public class CascadingDropdown0 : System.Web.Services.WebService
{
 [WebMethod]
 public CascadingDropDownNameValue[] GetVendors(string knownCategoryValues, 
 string category)
 {
 List<CascadingDropDownNameValue> l = new List<CascadingDropDownNameValue>();
 l.Add(new CascadingDropDownNameValue("International", "1"));
 l.Add(new CascadingDropDownNameValue("Electronic Bike Repairs & Supplies", "2"));
 l.Add(new CascadingDropDownNameValue("Premier Sport, Inc.", "3"));
 return l.ToArray();
 }
}

Memuat halaman di browser akan memicu daftar diisi dengan tiga vendor.

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

Berikutnya