Menggunakan Postback Otomatis dengan CascadingDropDown (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. Namun saat menggunakan kontrol CascadingDropDown, ASP. Fitur AutoPostBack kontrol DropDownList NET tidak berfungsi, karena memuat data secara asinkron ke dalam daftar menghasilkan postback (tidak perlu) itu sendiri. Dengan beberapa kode JavaScript, efek ini dapat dihindari.

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.) Namun saat menggunakan kontrol CascadingDropDown, ASP. Fitur AutoPostBack kontrol DropDownList NET tidak berfungsi, karena memuat data secara asinkron ke dalam daftar menghasilkan postback (tidak perlu) itu sendiri. Dengan beberapa kode JavaScript, efek ini dapat dihindari.

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, menyediakan URL layanan web dan informasi metode:

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

Extender CascadingDropDown kemudian secara asinkron memanggil layanan web dengan tanda tangan metode berikut:

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

Metode mengembalikan array jenis nilai CascadingDropDown. Konstruktor jenis mengharapkan terlebih dahulu caption entri daftar dan kemudian nilai (atribut HTMLvalue).

<%@ WebService Language="VB" Class="CascadingDropDown3" %>
Imports System.Web.Script.Services
Imports AjaxControlToolkit
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Collections.Generic
<ScriptService()> _
Public Class CascadingDropDown3
 Inherits System.Web.Services.WebService
 <WebMethod()> _
 Public Function GetVendors(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()
 Dim l As New List(Of 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()
 End Function
End Class

Memuat halaman di browser akan mengisi daftar dropdown dengan tiga vendor, yang kedua telah dipilih sebelumnya. Selain itu, ASP.NET mendefinisikan __doPostBack() metode JavaScript. Setelah halaman dimuat, panggilan JavaScript ini ditambahkan ke daftar dropdown, tetapi hanya jika ada elemen di dalamnya. Jika tidak ada elemen dalam daftar, Control Toolkit saat ini memuatnya, sehingga kode JavaScript menggunakan batas waktu dan mencoba lagi dalam setengah detik.

<script type="text/javascript">
 function pageLoad()
 {
 addAutoPostBack();
 }
 function addAutoPostBack()
 {
 if ($get("VendorsList").options.length > 0)
 {
 $get("VendorsList").setAttribute("onchange","javascript:setTimeout('__doPostBack(\\'VendorsList\\',\\'\\')', 0)");
 }
 else
 {
 setTimeout("addAutoPostBack()", 500);
 }
 }
</script>

Dengan cara ini, postback hanya dijalankan ketika sebenarnya ada elemen dalam daftar dan pengguna memilih entri.

Memilih elemen daftar menyebabkan postback (Klik untuk melihat gambar ukuran penuh)

Sebelumnya