Menggunakan DynamicPopulate dengan Kontrol Pengguna Dan JavaScript (VB)

oleh Christian Wenz

Unduh PDF

Kontrol DynamicPopulate di ASP.NET AJAX Control Toolkit memanggil layanan web (atau metode halaman) dan mengisi nilai yang dihasilkan ke dalam kontrol target di halaman, tanpa refresh halaman. Dimungkinkan juga untuk memicu populasi menggunakan kode JavaScript sisi klien kustom. Namun perawatan khusus harus diambil ketika extender berada dalam kontrol pengguna.

Gambaran Umum

DynamicPopulate Kontrol di ASP.NET AJAX Control Toolkit memanggil layanan web (atau metode halaman) dan mengisi nilai yang dihasilkan ke dalam kontrol target di halaman, tanpa refresh halaman. Dimungkinkan juga untuk memicu populasi menggunakan kode JavaScript sisi klien kustom. Namun perawatan khusus harus diambil ketika extender berada dalam kontrol pengguna.

Langkah-langkah

Pertama-tama, Anda memerlukan Layanan Web ASP.NET yang mengimplementasikan metode yang akan dipanggil oleh DynamicPopulateExtender kontrol. Layanan web mengimplementasikan metode getDate() yang mengharapkan satu argumen string jenis, yang disebut contextKey, karena DynamicPopulate kontrol mengirimkan satu bagian informasi konteks dengan setiap panggilan layanan web. Berikut adalah kode (file DynamicPopulate.vb.asmx) yang mengambil tanggal saat ini dalam salah satu dari tiga format:

<%@ WebService Language="VB" Class="DynamicPopulate" %>
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Web.Script.Services
<ScriptService()> _
Public Class DynamicPopulate
 Inherits System.Web.Services.WebService
 <WebMethod()> _
 Public Function getDate(ByVal contextKey As String) As String
 Dim myDate As String = ""
 Select Case contextKey
 Case "format1"
 myDate = String.Format("{0:MM}-{0:dd}-{0:yyyy}", DateTime.Now)
 Case "format2"
 myDate = String.Format("{0:dd}.{0:MM}.{0:yyyy}", DateTime.Now)
 Case "format3"
 myDate = String.Format("{0:yyyy}/{0:MM}/{0:dd}", DateTime.Now)
 End Select
 Return myDate
 End Function
End Class

Pada langkah berikutnya, buat kontrol pengguna baru (.ascx file), ditandai dengan deklarasi berikut di baris pertamanya:

<%@ Control Language="C#" ClassName="DynamicPopulate2" %>

< label > Elemen akan digunakan untuk menampilkan data yang berasal dari server.

<label id="myDate" runat="server" />

Juga dalam file kontrol pengguna, kita akan menggunakan tiga tombol radio, masing-masing mewakili salah satu dari tiga format tanggal yang mungkin didukung oleh layanan web. Ketika pengguna mengklik salah satu tombol radio, browser akan menjalankan kode JavaScript yang terlihat seperti ini:

$find("mcd1_dpe1").populate(this.value)

Kode ini mengakses DynamicPopulateExtender (jangan khawatir tentang ID aneh, ini akan dibahas nanti) dan memicu populasi dinamis dengan data. Dalam konteks tombol radio saat ini, this.value mengacu pada nilainya yaitu format1, format2 atau format3 persis apa yang diharapkan metode web.

Satu-satunya hal yang hilang dalam kontrol pengguna adalah DynamicPopulateExtender kontrol yang menghubungkan tombol radio ke layanan web.

<ajaxToolkit:DynamicPopulateExtender ID="dpe1" runat="server"
 ClearContentsDuringUpdate="true"
 TargetControlID="mcd1$myDate"
 ServicePath="DynamicPopulate.vb.asmx" ServiceMethod="getDate"/>

Sekali lagi Anda mungkin mencatat ID aneh yang digunakan dalam kontrol: mcd1$myDate bukan myDate. Sebelumnya, kode JavaScript yang digunakan mcd1_dpe1 untuk mengakses DynamicPopulateExtender alih-alih dpe1. Strategi penamaan ini adalah persyaratan khusus saat menggunakan DynamicPopulateExtender dalam kontrol pengguna. Selain itu, Anda harus menyematkan kontrol pengguna dengan cara tertentu untuk membuatnya berfungsi. Buat halaman ASP.NET baru dan daftarkan awalan tag untuk kontrol pengguna yang baru saja Anda terapkan:

<%@ Register TagPrefix="uc1" TagName="myCustomDate" Src="~/DynamicPopulate2.vb.ascx"%>

Kemudian, sertakan kontrol AJAX ScriptManager ASP.NET pada halaman baru:

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

Terakhir, tambahkan kontrol pengguna ke halaman. Anda hanya perlu mengatur atributnya ID (dan runat="server", tentu saja), tetapi Anda juga harus mengaturnya ke nama tertentu: mcd1 karena ini adalah awalan yang digunakan dalam kontrol pengguna untuk mengaksesnya menggunakan JavaScript.

<div>
 <uc1:myCustomDate ID="mcd1" runat="server" />
</div>

Dan itu saja! Halaman berprilaku seperti yang diharapkan: Pengguna mengklik salah satu tombol radio, kontrol di Toolkit memanggil layanan web dan menampilkan tanggal saat ini dalam format yang diinginkan.

Tombol radio berada di kontrol pengguna (Klik untuk melihat gambar ukuran penuh)

Sebelumnya