Mengisi Kontrol Secara Dinamis Menggunakan Kode JavaScript (C#)

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.

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.

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.cs.asmx) yang mengambil tanggal saat ini dalam salah satu dari tiga format:

<%@ WebService Language="C#" Class="DynamicPopulate" %>
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;
[ScriptService]
public class DynamicPopulate : System.Web.Services.WebService
{
 [WebMethod]
 public string getDate(string contextKey)
 {
 string myDate = "";
 switch (contextKey)
 {
 case "format1":
 myDate = String.Format("{0:MM}-{0:dd}-{0:yyyy}", DateTime.Now);
 break;
 case "format2":
 myDate = String.Format("{0:dd}.{0:MM}.{0:yyyy}", DateTime.Now);
 break;
 case "format3":
 myDate = String.Format("{0:yyyy}/{0:MM}/{0:dd}", DateTime.Now);
 break;
 }
 return myDate;
 }
}

Pada langkah berikutnya, buat situs ASP.NET baru dan mulailah dengan kontrol ASP.NET AJAX ScriptManager:

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

Kemudian, tambahkan kontrol label (misalnya menggunakan kontrol HTML dengan nama yang sama, atau <asp:Label /> kontrol web) yang nantinya akan menampilkan hasil panggilan layanan web.

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

Selanjutnya, sertakan DynamicPopulateExtender kontrol dan berikan informasi layanan web, kontrol target, tetapi bukan nama kontrol yang memicu populasi ini akan dilakukan nanti, menggunakan JavaScript kustom!

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

Sekarang ke bagian JavaScript. Fungsi , $find() yang didefinisikan oleh pustaka AJAX ASP.NET, mengembalikan referensi ke objek sisi server dari ASP.NET AJAX Control Toolkit seperti DynamicPopulateExtender. Dalam file saat ini, $find("dpe") mengembalikan referensi ke satu DynamicPopulateExtender kontrol di halaman. Ini mengekspos metode yang disebut populate() yang memicu proses populasi dinamis. Metode populate() ini memerlukan satu argumen: kunci konteks yang akan berfungsi sebagai argumen untuk getDate() metode web. Jadi misalnya, $find("dpe").populate("format1") akan mengisi label dengan tanggal saat ini dalam format bulan-hari-tahun.

Untuk membuat sampel sedikit lebih fleksibel, pengguna sekarang dapat memilih di antara beberapa format tanggal. Untuk masing-masing, tombol radio ditampilkan. Setelah pengguna mengklik tombol radio, kode JavaScript secara dinamis mengisi label dengan format tanggal yang dipilih. Berikut adalah tombol radio tersebut:

<asp:Panel ID="panel1" runat="server">
 <input type="radio" id="rb1" name="format" value="format1" runat="server"
 onclick="$find('dpe1').populate(this.value);" />m-d-y
 <input type="radio" id="rb2" name="format" value="format2" runat="server"
 onclick="$find('dpe1').populate(this.value);" />d.m.y
 <input type="radio" id="rb3" name="format" value="format3" runat="server"
 onclick="$find('dpe1').populate(this.value);" />y/m/d
</asp:Panel>

Perhatikan bahwa dalam konteks tombol radio, ekspresi this.value JavaScript mengacu pada nilai tombol saat ini, yang kebetulan merupakan informasi getDate() yang sama persis dengan yang dapat digunakan metode.

Klik tombol mengambil tanggal dari server, dalam format yang ditentukan (Klik untuk melihat gambar ukuran penuh)

SebelumnyaBerikutnya