Bagikan melalui

Membuat AJAX Control Toolkit Control Extender (VB) Kustom

oleh Microsoft

Extender Kustom memungkinkan Anda menyesuaikan dan memperluas kemampuan kontrol ASP.NET tanpa harus membuat kelas baru.

Dalam tutorial ini, Anda mempelajari cara membuat extender kontrol AJAX Control Toolkit kustom. Kami membuat extender baru sederhana, tetapi berguna yang mengubah status Tombol dari dinonaktifkan menjadi diaktifkan saat Anda mengetik teks ke dalam Kotak Teks. Setelah membaca tutorial ini, Anda akan dapat memperluas ASP.NET AJAX Toolkit dengan extender kontrol Anda sendiri.

Anda dapat membuat extender kontrol kustom menggunakan Visual Studio atau Visual Web Developer (pastikan Anda memiliki versi terbaru Visual Web Developer).

Gambaran umum DisabledButton Extender

Extender kontrol baru kami diberi nama extender DisabledButton. Extender ini akan memiliki tiga properti:

  • TargetControlID - Kotak Teks yang diperluas kontrol.
  • TargetButtonIID - Tombol yang dinonaktifkan atau diaktifkan.
  • DisabledText - Teks yang awalnya ditampilkan di Tombol. Saat Anda mulai mengetik, Tombol menampilkan nilai properti Teks Tombol.

Anda menghubungkan extender DisabledButton ke kontrol Kotak Teks dan Tombol. Sebelum Anda mengetik teks apa pun, Tombol dinonaktifkan dan Kotak Teks dan Tombol terlihat seperti ini:

Gambar tombol yang dinonaktifkan

(Klik untuk melihat gambar ukuran penuh)

Setelah Anda mulai mengetik teks, Tombol diaktifkan dan Kotak Teks dan Tombol terlihat seperti ini:

Gambar tombol yang diaktifkan

(Klik untuk melihat gambar ukuran penuh)

Untuk membuat extender kontrol, kita perlu membuat tiga file berikut:

  • DisabledButtonExtender.vb - File ini adalah kelas kontrol sisi server yang akan mengelola pembuatan extender Anda dan memungkinkan Anda mengatur properti pada waktu desain. Ini juga mendefinisikan properti yang dapat diatur pada extender Anda. Properti ini dapat diakses melalui kode dan pada waktu desain dan properti yang cocok yang ditentukan dalam file DisableButtonBehavior.js.
  • DisabledButtonBehavior.js -- File ini adalah tempat Anda akan menambahkan semua logika skrip klien Anda.
  • DisabledButtonDesigner.vb - Kelas ini memungkinkan fungsionalitas waktu desain. Anda memerlukan kelas ini jika Anda ingin extender kontrol berfungsi dengan benar dengan Designer Visual Studio/Visual Web Developer.

Jadi, extender kontrol terdiri dari kontrol sisi server, perilaku sisi klien, dan kelas desainer sisi server. Anda mempelajari cara membuat ketiga file ini di bagian berikut.

Membuat Situs Web dan Proyek Extender Kustom

Langkah pertama adalah membuat proyek dan situs web pustaka kelas di Visual Studio/Visual Web Developer. Kita akan membuat extender kustom di proyek pustaka kelas dan menguji extender kustom di situs web.

Mari kita mulai dengan situs web. Ikuti langkah-langkah berikut untuk membuat situs web:

  1. Pilih opsi menu File, Situs Web Baru.
  2. Pilih templat Situs Web ASP.NET .
  3. Beri nama situs web baru Situs Web1.
  4. Klik tombol Ok.

Selanjutnya, kita perlu membuat proyek pustaka kelas yang akan berisi kode untuk extender kontrol:

  1. Pilih opsi menu File, Tambahkan, Proyek Baru.
  2. Pilih templat Pustaka Kelas .
  3. Beri nama pustaka kelas baru dengan nama CustomExtenders.
  4. Klik tombol Ok.

Setelah Anda menyelesaikan langkah-langkah ini, jendela Penjelajah Solusi Anda akan terlihat seperti Gambar 1.

Solusi dengan proyek pustaka situs web dan kelas

Gambar 01: Solusi dengan situs web dan proyek pustaka kelas (Klik untuk melihat gambar ukuran penuh)

Selanjutnya, Anda perlu menambahkan semua referensi perakitan yang diperlukan ke proyek pustaka kelas:

  1. Klik kanan proyek CustomExtenders dan pilih opsi menu Tambahkan Referensi.

  2. Pilih tab .NET.

  3. Tambahkan referensi ke rakitan berikut:

    1. System.Web.dll
    2. System.Web.Extensions.dll
    3. System.Design.dll
    4. System.Web.Extensions.Design.dll

  4. Pilih tab Telusuri.

  5. Tambahkan referensi ke rakitan AjaxControlToolkit.dll. Rakitan ini terletak di folder tempat Anda mengunduh Toolkit Kontrol AJAX.

Anda dapat memverifikasi bahwa Anda telah menambahkan semua referensi yang tepat dengan mengklik kanan proyek Anda, memilih Properti, dan mengklik tab Referensi (lihat Gambar 2).

Folder referensi dengan referensi yang diperlukan

Gambar 02: Mereferensikan folder dengan referensi yang diperlukan (Klik untuk melihat gambar ukuran penuh)

Membuat Extender Kontrol Kustom

Sekarang setelah kita memiliki perpustakaan kelas kita, kita dapat mulai membangun kontrol extender kita. Mari kita mulai dengan tulang telanjang dari kelas kontrol extender kustom (lihat Daftar 1).

Daftar 1 - MyCustomExtender.vb

Imports AjaxControlToolkit
Imports System.ComponentModel
Imports System.Web.UI
Imports System.Web.UI.WebControls

<Assembly: System.Web.UI.WebResource("CustomExtenders.MyControlBehavior.js", "text/javascript")> 

<ClientScriptResource("CustomExtenders.MyControlBehavior", "CustomExtenders.MyControlBehavior.js")> _
<TargetControlType(GetType(TextBox))> _
Public Class MyControlExtender
    Inherits ExtenderControlBase

    <ExtenderControlProperty()> _
    <DefaultValue("")> _
    Public Property MyProperty() As String
        Get
            Return GetPropertyValue("MyProperty", "")
        End Get
        Set(ByVal value As String)
            SetPropertyValue("MyProperty", value)
        End Set
    End Property
End Class

Ada beberapa hal yang Anda perhatikan tentang kelas extender kontrol di Listing 1. Pertama, perhatikan bahwa kelas mewarisi dari kelas ExtenderControlBase dasar. Semua kontrol extender Toolkit Kontrol AJAX berasal dari kelas dasar ini. Misalnya, kelas dasar menyertakan properti TargetID yang merupakan properti yang diperlukan dari setiap extender kontrol.

Selanjutnya, perhatikan bahwa kelas menyertakan dua atribut berikut yang terkait dengan skrip klien:

  • WebResource - Menyebabkan file disertakan sebagai sumber daya yang disematkan dalam perakitan.
  • ClientScriptResource - Menyebabkan sumber daya skrip diambil dari perakitan.

Atribut WebResource digunakan untuk menyematkan file JavaScript MyControlBehavior.js ke dalam rakitan saat extender kustom dikompilasi. Atribut ClientScriptResource digunakan untuk mengambil skrip MyControlBehavior.js dari rakitan saat extender kustom digunakan di halaman web.

Agar atribut WebResource dan ClientScriptResource berfungsi, Anda harus mengkompilasi file JavaScript sebagai sumber daya yang disematkan. Pilih file di jendela Penjelajah Solusi, buka lembar properti, dan tetapkan nilai Sumber Daya Tersemat ke properti Tindakan Build .

Perhatikan bahwa extender kontrol juga menyertakan atribut TargetControlType. Atribut ini digunakan untuk menentukan jenis kontrol yang diperluas oleh extender kontrol. Dalam kasus Daftar 1, extender kontrol digunakan untuk memperluas Kotak Teks.

Terakhir, perhatikan bahwa extender kustom menyertakan properti bernama MyProperty. Properti ditandai dengan atribut ExtenderControlProperty. Metode GetPropertyValue() dan SetPropertyValue() digunakan untuk meneruskan nilai properti dari extender kontrol sisi server ke perilaku sisi klien.

Mari kita lanjutkan dan terapkan kode untuk extender DisabledButton kami. Kode untuk extender ini dapat ditemukan di Listing 2.

Daftar 2 - DisabledButtonExtender.vb

Imports System.ComponentModel
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports AjaxControlToolkit

<Assembly: System.Web.UI.WebResource("CustomExtenders.DisabledButtonBehavior.js", "text/javascript")> 

<Designer(GetType(DisabledButtonExtender))> _
<ClientScriptResource("CustomExtenders.DisabledButtonBehavior", "CustomExtenders.DisabledButtonBehavior.js")> _
<TargetControlType(GetType(TextBox))> _
Public Class DisabledButtonExtender
    Inherits ExtenderControlBase

    <ExtenderControlProperty()> _
    <DefaultValue("")> _
    <IDReferenceProperty(GetType(Button))> _
    Public Property TargetButtonID() As String
        Get
            Return GetPropertyValue("TargetButtonID", "")
        End Get
        Set(ByVal value As String)
            SetPropertyValue("TargetButtonID", value)
        End Set
    End Property

    <ExtenderControlProperty(), DefaultValue("")> _
    Public Property DisabledText() As String
        Get
            Return GetPropertyValue("DisabledText", "")
        End Get
        Set(ByVal value As String)
            SetPropertyValue("DisabledText", value)
        End Set
    End Property

End Class

Extender DisabledButton di Listing 2 memiliki dua properti bernama TargetButtonID dan DisabledText. IDReferenceProperty yang diterapkan ke properti TargetButtonID mencegah Anda menetapkan apa pun selain ID kontrol Tombol ke properti ini.

Atribut WebResource dan ClientScriptResource mengaitkan perilaku sisi klien yang terletak di file bernama DisabledButtonBehavior.js dengan extender ini. Kami membahas file JavaScript ini di bagian berikutnya.

Membuat Perilaku Extender Kustom

Komponen sisi klien dari extender kontrol disebut perilaku. Logika aktual untuk menonaktifkan dan mengaktifkan Tombol terkandung dalam perilaku DisabledButton. Kode JavaScript untuk perilaku disertakan dalam Daftar 3.

Daftar 3 - DisabledButton.js

Type.registerNamespace('CustomExtenders');

CustomExtenders.DisabledButtonBehavior = function(element) {

    CustomExtenders.DisabledButtonBehavior.initializeBase(this, [element]);

    this._targetButtonIDValue = null;
    this._disabledTextValue = null;

}

CustomExtenders.DisabledButtonBehavior.prototype = {

    initialize : function() {
        CustomExtenders.DisabledButtonBehavior.callBaseMethod(this, 'initialize');

        // Initalization code
        $addHandler(this.get_element(), 'keyup', 
        Function.createDelegate(this, this._onkeyup));
        this._onkeyup();
    },

    dispose : function() {
        // Cleanup code 

        CustomExtenders.DisabledButtonBehavior.callBaseMethod(this, 'dispose');
    },

    // Property accessors 
    //
    get_TargetButtonID : function() {
        return this._targetButtonIDValue;
    },

    set_TargetButtonID : function(value) {
        this._targetButtonIDValue = value;
    },

    get_DisabledText : function() {
        return this._disabledTextValue;
    },

    set_DisabledText : function(value) {
        this._disabledTextValue = value;
    },

  _onkeyup : function() {
  
    var e = $get(this._targetButtonIDValue);
    if (e) {
      var disabled = ("" == this.get_element().value);
      e.disabled = disabled;
      if ( this._disabledTextValue) {
        if (disabled) {
          this._oldValue = e.value;
          e.value = this._disabledTextValue;
        }
        else
        {
          if(this._oldValue){
            e.value = this._oldValue;
          }
        }
      }
    }
  }

}

CustomExtenders.DisabledButtonBehavior.registerClass('CustomExtenders.DisabledButtonBehavior', AjaxControlToolkit.BehaviorBase);

File JavaScript di Listing 3 berisi kelas sisi klien bernama DisabledButtonBehavior. Kelas ini, seperti kembar sisi servernya, mencakup dua properti bernama TargetButtonID dan DisabledText yang dapat Anda akses menggunakan get_TargetButtonID/set_TargetButtonID dan get_DisabledText/set_DisabledText.

Metode initialize() mengaitkan penanganan aktivitas keyup dengan elemen target untuk perilaku tersebut. Setiap kali Anda mengetik huruf ke dalam Kotak Teks yang terkait dengan perilaku ini, handler keyup dijalankan. Handler keyup mengaktifkan atau menonaktifkan Tombol tergantung pada apakah TextBox yang terkait dengan perilaku berisi teks apa pun.

Ingat bahwa Anda harus mengkompilasi file JavaScript di Daftar 3 sebagai sumber daya yang disematkan. Pilih file di jendela Penjelajah Solusi, buka lembar properti, dan tetapkan nilai Sumber Daya Tersemat ke properti Tindakan Build (lihat Gambar 3). Opsi ini tersedia di Visual Studio dan Visual Web Developer.

Menambahkan file JavaScript sebagai sumber daya yang disematkan

Gambar 03: Menambahkan file JavaScript sebagai sumber daya yang disematkan (Klik untuk melihat gambar ukuran penuh)

Membuat Designer Extender Kustom

Ada satu kelas terakhir yang perlu kita buat untuk menyelesaikan extender kita. Kita perlu membuat kelas desainer di Listing 4. Kelas ini diperlukan untuk membuat extender berkinerja dengan benar dengan Designer Visual Studio/Visual Web Developer.

Daftar 4 - DisabledButtonDesigner.vb

Imports AjaxControlToolkit.Design

Public Class DisabledButtonDesigner
    Inherits ExtenderControlBaseDesigner(Of DisabledButtonExtender)

End Class

Anda mengaitkan perancang di Daftar 4 dengan extender DisabledButton dengan atribut Designer. Anda perlu menerapkan atribut Designer ke kelas DisabledButtonExtender seperti ini:

<Designer(GetType(DisabledButtonDesigner))> _
<ClientScriptResource("CustomExtenders.DisabledButtonBehavior", "CustomExtenders.DisabledButtonBehavior.js")> _
<TargetControlType(GetType(TextBox))> _
Public Class DisabledButtonExtender
   Inherits ExtenderControlBase

Menggunakan Extender Kustom

Sekarang setelah kami selesai membuat extender kontrol DisabledButton, saatnya untuk menggunakannya di situs web ASP.NET kami. Pertama, kita perlu menambahkan extender kustom ke kotak alat. Ikuti langkah-langkah berikut:

  1. Buka halaman ASP.NET dengan mengklik dua kali halaman di jendela Penjelajah Solusi.
  2. Klik kanan kotak alat dan pilih opsi menu Pilih Item.
  3. Dalam dialog Pilih Item Kotak Alat, telusuri ke rakitan CustomExtenders.dll.
  4. Klik tombol OK untuk menutup dialog.

Setelah Anda menyelesaikan langkah-langkah ini, extender kontrol DisabledButton akan muncul di kotak alat (lihat Gambar 4).

DisabledButton di kotak alat

Gambar 04: DisabledButton di kotak alat (Klik untuk melihat gambar ukuran penuh)

Selanjutnya, kita perlu membuat halaman ASP.NET baru. Ikuti langkah-langkah berikut:

  1. Buat halaman ASP.NET baru bernama ShowDisabledButton.aspx.
  2. Seret ScriptManager ke halaman.
  3. Seret kontrol Kotak Teks ke halaman.
  4. Seret kontrol Tombol ke halaman.
  5. Di jendela Properti, ubah properti ID Tombol menjadi nilai btnSave dan properti Teks ke nilai Simpan*.

Kami membuat halaman dengan ASP.NET TextBox standar dan kontrol Tombol.

Selanjutnya, kita perlu memperluas kontrol TextBox dengan extender DisabledButton:

  1. Pilih opsi Tambahkan tugas Extender untuk membuka dialog Extender Wizard (lihat Gambar 5). Perhatikan bahwa dialog menyertakan extender DisabledButton kustom kami.
  2. Pilih extender DisabledButton dan klik tombol OK .

Dialog Wizard Extender

Gambar 05: Dialog Wizard Extender (Klik untuk melihat gambar ukuran penuh)

Terakhir, kita dapat mengatur properti extender DisabledButton. Anda dapat mengubah properti extender DisabledButton dengan memodifikasi properti kontrol TextBox:

  1. Pilih Kotak Teks di Designer.
  2. Di jendela Properti, perluas simpul Extender (lihat Gambar 6).
  3. Tetapkan nilai Simpan ke properti DisabledText dan nilai btnSave ke properti TargetButtonID.

Mengatur properti extender

Gambar 06: Mengatur properti extender (Klik untuk melihat gambar ukuran penuh)

Saat Anda menjalankan halaman (dengan menekan F5), kontrol Tombol awalnya dinonaktifkan. Segera setelah Anda mulai memasukkan teks ke dalam Kotak Teks, kontrol Tombol diaktifkan (lihat Gambar 7).

Extender DisabledButton sedang beraksi

Gambar 07: Extender DisabledButton beraksi (Klik untuk melihat gambar ukuran penuh)

Ringkasan

Tujuan dari tutorial ini adalah untuk menjelaskan bagaimana Anda dapat memperluas Toolkit Kontrol AJAX dengan kontrol extender kustom. Dalam tutorial ini, kami membuat extender kontrol DisabledButton sederhana. Kami menerapkan extender ini dengan membuat kelas DisabledButtonExtender, perilaku JavaScript DisabledButtonBehavior, dan kelas DisabledButtonDesigner. Anda mengikuti serangkaian langkah serupa setiap kali Anda membuat extender kontrol kustom.

Sebelumnya