Bagikan melalui

Memahami ASP.NET Pemicu UpdatePanel AJAX

oleh Scott Cate

Saat bekerja di editor markup di Visual Studio, Anda mungkin melihat (dari IntelliSense) bahwa ada dua elemen anak dari kontrol UpdatePanel. Salah satunya adalah elemen Pemicu, yang menentukan kontrol pada halaman (atau kontrol pengguna, jika Anda menggunakannya) yang akan memicu render parsial kontrol UpdatePanel tempat elemen berada.

Pengantar

Teknologi ASP.NET Microsoft menghadirkan model pemrograman berorientasi objek dan berbasis peristiwa dan menyatukannya dengan manfaat kode yang dikompilasi. Namun, model pemrosesan sisi servernya memiliki beberapa kelemahan yang melekat pada teknologi, banyak di antaranya dapat diatasi oleh fitur baru yang disertakan dalam Ekstensi AJAX Microsoft ASP.NET 3.5. Ekstensi ini memungkinkan banyak fitur klien kaya baru, termasuk penyajian sebagian halaman tanpa memerlukan refresh halaman penuh, kemampuan untuk mengakses Layanan Web melalui skrip klien (termasuk API pembuatan profil ASP.NET), dan API sisi klien ekstensif yang dirancang untuk mencerminkan banyak skema kontrol yang terlihat dalam set kontrol sisi server ASP.NET.

Laporan resmi ini memeriksa fungsionalitas Pemicu XML dari komponen AJAX UpdatePanel ASP.NET. Pemicu XML memberikan kontrol terperinci atas komponen yang dapat menyebabkan penyajian parsial untuk kontrol UpdatePanel tertentu.

Laporan resmi ini didasarkan pada rilis Beta 2 dari .NET Framework 3.5 dan Visual Studio 2008. Ekstensi AJAX ASP.NET, sebelumnya merupakan rakitan add-on yang ditargetkan pada ASP.NET 2.0, sekarang diintegrasikan ke dalam Pustaka Kelas Dasar .NET Framework. Laporan resmi ini juga mengasumsikan bahwa Anda akan bekerja dengan Visual Studio 2008, bukan Visual Web Developer Express, dan akan memberikan panduan sesuai dengan antarmuka pengguna Visual Studio (meskipun daftar kode akan sepenuhnya kompatibel terlepas dari lingkungan pengembangan).

Pemicu

Pemicu untuk UpdatePanel tertentu, secara default, secara otomatis menyertakan kontrol anak apa pun yang memanggil postback, termasuk (misalnya) kontrol TextBox yang propertinya AutoPostBack diatur ke true. Namun, pemicu juga dapat disertakan secara deklaratif menggunakan markup; ini dilakukan dalam bagian <triggers> dari deklarasi kontrol UpdatePanel. Meskipun pemicu dapat diakses melalui Triggers properti koleksi, disarankan agar Anda mendaftarkan pemicu render parsial pada run-time (misalnya, jika kontrol tidak tersedia pada waktu desain) dengan menggunakan RegisterAsyncPostBackControl(Control) metode objek ScriptManager untuk halaman Anda, dalam peristiwa tersebut Page_Load . Ingatlah bahwa Pages tidak memiliki status, sehingga Anda harus mendaftarkan ulang kontrol ini setiap kali dibuat.

Penyertaan pemicu anak otomatis juga dapat dinonaktifkan (sehingga kontrol anak yang membuat postback tidak secara otomatis memicu render parsial) dengan mengatur ChildrenAsTriggers properti ke false. Ini memungkinkan Anda fleksibilitas terbesar dalam menetapkan kontrol tertentu mana yang dapat memanggil render halaman, dan disarankan, sehingga pengembang akan ikut serta untuk menanggapi suatu peristiwa, daripada menangani peristiwa apa pun yang mungkin muncul.

Perhatikan bahwa ketika kontrol UpdatePanel ditumpuk, ketika UpdateMode diatur ke Kondisional, jika UpdatePanel anak dipicu, tetapi induknya tidak, maka hanya UpdatePanel turunan yang akan disegarkan. Namun, jika UpdatePanel induk di-refresh, maka UpdatePanel turunan juga akan di-refresh.

<Elemen Pemicu>

Saat bekerja di editor markup di Visual Studio, Anda mungkin melihat (dari IntelliSense) bahwa ada dua elemen anak kontrol UpdatePanel . Elemen yang paling sering dilihat adalah <ContentTemplate> elemen , yang pada dasarnya merangkum konten yang akan dipegang oleh panel pembaruan (konten yang kami aktifkan penyajian parsial). Elemen lainnya adalah <Triggers> elemen , yang menentukan kontrol pada halaman (atau kontrol pengguna, jika Anda menggunakannya) yang akan memicu render parsial> kontrol UpdatePanel tempat <elemen Pemicu berada.

Elemen <Triggers> dapat berisi angka apa pun yang masing-masing dari dua node anak: <asp:AsyncPostBackTrigger> dan <asp:PostBackTrigger>. Keduanya menerima dua atribut, ControlID dan , dan EventNamedapat menentukan Kontrol apa pun dalam unit enkapulasi saat ini (misalnya, jika kontrol UpdatePanel Anda berada dalam Kontrol Pengguna Web, Anda tidak boleh mencoba mereferensikan Kontrol pada Halaman tempat Kontrol Pengguna akan berada).

Elemen <asp:AsyncPostBackTrigger> ini sangat berguna karena dapat menargetkan peristiwa apa pun dari Kontrol yang ada sebagai anak dari kontrol UpdatePanel apa pun di unit enkaplasi, bukan hanya UpdatePanel di mana pemicu ini adalah anak. Dengan demikian, kontrol apa pun dapat dilakukan untuk memicu pembaruan halaman parsial.

Demikian pula, <asp:PostBackTrigger> elemen dapat digunakan untuk memicu render halaman parsial, tetapi elemen yang memerlukan round-trip penuh ke server. Elemen pemicu ini juga dapat digunakan untuk memaksa render halaman penuh ketika kontrol biasanya akan memicu render halaman parsial (misalnya, ketika Button kontrol ada di <ContentTemplate> elemen kontrol UpdatePanel). Sekali lagi, elemen PostBackTrigger dapat menentukan kontrol apa pun yang merupakan turunan dari kontrol UpdatePanel apa pun di unit enkapsulasi saat ini.

< > Referensi Elemen Pemicu

Turunan Markup:

Menandai Deskripsi
<asp:AsyncPostBackTrigger> Menentukan kontrol dan peristiwa yang akan menyebabkan pembaruan halaman parsial untuk UpdatePanel yang berisi referensi pemicu ini.
<asp:PostBackTrigger> Menentukan kontrol dan peristiwa yang akan menyebabkan pembaruan halaman penuh (refresh halaman penuh). Tag ini dapat digunakan untuk memaksa refresh penuh ketika kontrol akan memicu penyajian parsial.

Panduan: Pemicu Cross-UpdatePanel

  1. Buat halaman ASP.NET baru dengan objek ScriptManager yang diatur untuk mengaktifkan penyajian parsial. Tambahkan dua UpdatePanel ke halaman ini - di halaman pertama, sertakan kontrol Label ( Label1 ) dan dua kontrol Tombol ( Button1 dan Button2 ). Tombol1 harus mengatakan Klik untuk Memperbarui Dan Tombol2 harus mengatakan Klik untuk Memperbarui Ini, atau sesuatu di sepanjang baris tersebut. Di UpdatePanel kedua, hanya sertakan kontrol Label ( Label2 ), tetapi atur properti ForeColor-nya ke sesuatu selain default untuk membedakannya.
  2. Atur properti UpdateMode dari kedua tag UpdatePanel ke Kondisional.

Daftar 1: Markup untuk default.aspx:



<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
   <head runat="server">
      <title>Untitled Page</title>
   </head>
   <body>
      <form id="form1" runat="server">
         <asp:ScriptManager EnablePartialRendering="true"
            ID="ScriptManager1" runat="server"></asp:ScriptManager>
         <div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server"
               UpdateMode="Conditional">
               <ContentTemplate>
                  <asp:Label ID="Label1" runat="server" />
                  <br />
                  <asp:Button ID="Button1" runat="server"
                     Text="Update Both Panels" OnClick="Button1_Click" />
                  <asp:Button ID="Button2" runat="server"
                     Text="Update This Panel" OnClick="Button2_Click" />
               </ContentTemplate>
            </asp:UpdatePanel>
            <asp:UpdatePanel ID="UpdatePanel2" runat="server"
               UpdateMode="Conditional">
               <ContentTemplate>
                  <asp:Label ID="Label2" runat="server" ForeColor="red" />
               </ContentTemplate>
               <Triggers>
                  <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
               </Triggers>
            </asp:UpdatePanel>
         </div>
      </form>
   </body>
</html>
  1. Di Klik penanganan aktivitas untuk Button1, atur Label1.Text dan Label2.Text ke sesuatu yang bergantung pada waktu (seperti DateTime.Now.ToLongTimeString()). Untuk Klik penanganan aktivitas untuk Button2, atur hanya Label1.Text ke nilai yang bergantung pada waktu.

Daftar 2: Codebehind (dipangkas) di default.aspx.cs:

public partial class _Default : System.Web.UI.Page
{
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = DateTime.Now.ToLongTimeString();
        Label2.Text = DateTime.Now.ToLongTimeString();
    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        Label1.Text = DateTime.Now.ToLongTimeString();
    }
}
  1. Tekan F5 untuk membangun dan menjalankan proyek. Perhatikan bahwa, ketika Anda mengklik Perbarui Kedua Panel, kedua label mengubah teks; namun, ketika Anda mengklik Perbarui Panel Ini, hanya pembaruan Label1.

Cuplikan layar yang memperlihatkan tombol pertama yang menyatakan Perbarui Kedua Panel dan tombol kedua yang menyatakan Perbarui Panel Ini.

(Klik untuk melihat gambar ukuran penuh)

Di bawah Tenda

Dengan menggunakan contoh yang baru saja kita buat, kita dapat melihat apa yang ASP.NET AJAX lakukan dan bagaimana pemicu lintas panel UpdatePanel bekerja. Untuk melakukannya, kita akan bekerja dengan HTML sumber halaman yang dihasilkan, serta ekstensi Mozilla Firefox yang disebut FireBug - dengan itu, kita dapat dengan mudah memeriksa postback AJAX. Kami juga akan menggunakan alat .NET Reflector oleh Lutz Roeder. Kedua alat ini tersedia secara bebas online, dan dapat ditemukan dengan pencarian internet.

Pemeriksaan kode sumber halaman menunjukkan hampir tidak ada yang luar biasa; kontrol UpdatePanel dirender sebagai <div> kontainer, dan kita dapat melihat sumber daya skrip termasuk yang disediakan oleh <asp:ScriptManager>. Ada juga beberapa panggilan khusus AJAX baru ke PageRequestManager yang internal ke pustaka skrip klien AJAX. Terakhir, kita melihat dua kontainer UpdatePanel - satu dengan tombol yang dirender <input> dengan dua <asp:Label> kontrol yang dirender sebagai <span> kontainer. (Jika Anda memeriksa pohon DOM di FireBug, Anda akan melihat bahwa label redup untuk menunjukkan bahwa mereka tidak menghasilkan konten yang terlihat).

Klik tombol Perbarui Panel Ini, dan perhatikan updatePanel teratas akan diperbarui dengan waktu server saat ini. Di FireBug, pilih tab Konsol sehingga Anda dapat memeriksa permintaan. Periksa parameter permintaan POST terlebih dahulu:

Cuplikan layar yang memperlihatkan dialog Firebug dengan Konsol dipilih.

(Klik untuk melihat gambar ukuran penuh)

Perhatikan bahwa UpdatePanel telah menunjukkan kode AJAX sisi server dengan tepat pohon kontrol mana yang diaktifkan melalui parameter ScriptManager1: Button1 dari UpdatePanel1 kontrol. Sekarang, klik tombol Perbarui Kedua Panel. Kemudian, memeriksa respons, kita melihat serangkaian variabel yang dibatasi pipa yang diatur dalam string; secara khusus, kita melihat UpdatePanel teratas, UpdatePanel1, memiliki keseluruhan HTML-nya yang dikirim ke browser. Pustaka skrip klien AJAX menggantikan konten HTML asli UpdatePanel dengan konten baru melalui .innerHTML properti , sehingga server mengirim konten yang diubah dari server sebagai HTML.

Sekarang, klik tombol Perbarui Kedua Panel dan periksa hasilnya dari server. Hasilnya sangat mirip - kedua UpdatePanels menerima HTML baru dari server. Seperti halnya panggilan balik sebelumnya, status halaman tambahan dikirim.

Seperti yang kita lihat, karena tidak ada kode khusus yang digunakan untuk melakukan postback AJAX, pustaka skrip klien AJAX dapat mencegat postback formulir tanpa kode tambahan. Kontrol server secara otomatis menggunakan JavaScript sehingga mereka tidak secara otomatis mengirimkan formulir - ASP.NET secara otomatis menyuntikkan kode untuk validasi formulir dan status yang sudah ada, terutama dicapai oleh penyertaan sumber daya skrip otomatis, kelas PostBackOptions, dan kelas ClientScriptManager.

Misalnya, pertimbangkan kontrol CheckBox; memeriksa pembbongkaran kelas di .NET Reflector. Untuk melakukannya, pastikan bahwa rakitan System.Web Anda terbuka, dan navigasikan System.Web.UI.WebControls.CheckBox ke kelas , membuka RenderInputTag metode . Cari kondisi yang memeriksa AutoPostBack properti:

Cuplikan layar yang memperlihatkan kode yang dimulai dengan pada Klik sama dengan.

(Klik untuk melihat gambar ukuran penuh)

Ketika postback otomatis diaktifkan pada CheckBox kontrol (melalui properti AutoPostBack yang benar), tag yang dihasilkan <input> oleh karena itu dirender dengan skrip penanganan peristiwa ASP.NET dalam atributnya onclick . Intersepsi pengiriman formulir, kemudian, memungkinkan ASP.NET AJAX untuk disuntikkan ke halaman secara nonintrusif, membantu menghindari potensi perubahan mencolok yang mungkin terjadi dengan menggunakan penggantian string yang mungkin tidak tepat. Selain itu, ini memungkinkan kontrol ASP.NET kustom untuk menggunakan kekuatan ASP.NET AJAX tanpa kode tambahan untuk mendukung penggunaannya dalam kontainer UpdatePanel.

Fungsionalitas <triggers> sesuai dengan nilai yang diinisialisasi dalam panggilan PageRequestManager ke _updateControls (perhatikan bahwa pustaka skrip klien AJAX ASP.NET menggunakan konvensi bahwa metode, peristiwa, dan nama bidang yang dimulai dengan garis bawah ditandai sebagai internal, dan tidak dimaksudkan untuk digunakan di luar pustaka itu sendiri). Dengan itu, kita dapat mengamati kontrol mana yang dimaksudkan untuk menyebabkan postback AJAX.

Misalnya, mari kita tambahkan dua kontrol tambahan ke halaman, meninggalkan satu kontrol di luar UpdatePanels sepenuhnya, dan membiarkannya dalam UpdatePanel. Kami akan menambahkan kontrol CheckBox dalam UpdatePanel atas, dan menghilangkan DropDownList dengan sejumlah warna yang ditentukan dalam daftar. Berikut adalah markup baru:

Daftar 3: Markup Baru

<%@ Page Language="C#" AutoEventWireup="true"
 CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
 <head id="Head1" runat="server">
 <title>Untitled Page</title>
 </head>
 <body>
 <form id="form1" runat="server">
 <asp:ScriptManager EnablePartialRendering="true"
 ID="ScriptManager1" runat="server"></asp:ScriptManager>
 <div>
 <asp:UpdatePanel ID="UpdatePanel1" runat="server"
 UpdateMode="Conditional">
 <ContentTemplate>
 <asp:Label ID="Label1" runat="server" /><br />
 <asp:Button ID="Button1" runat="server"
 Text="Update Both Panels" OnClick="Button1_Click" />
 <asp:Button ID="Button2" runat="server"
 Text="Update This Panel" OnClick="Button2_Click" />
 <asp:CheckBox ID="cbDate" runat="server"
 Text="Include Date" AutoPostBack="false"
 OnCheckedChanged="cbDate_CheckedChanged" />
 </ContentTemplate>
 </asp:UpdatePanel>
 <asp:UpdatePanel ID="UpdatePanel2" runat="server"
 UpdateMode="Conditional">
 <ContentTemplate>
 <asp:Label ID="Label2" runat="server"
 ForeColor="red" />
 </ContentTemplate>
 <Triggers>
 <asp:AsyncPostBackTrigger ControlID="Button1" 
 EventName="Click" />
 <asp:AsyncPostBackTrigger ControlID="ddlColor" 
 EventName="SelectedIndexChanged" />
 </Triggers>
 </asp:UpdatePanel>
 <asp:DropDownList ID="ddlColor" runat="server"
 AutoPostBack="true"
 OnSelectedIndexChanged="ddlColor_SelectedIndexChanged">
 <asp:ListItem Selected="true" Value="Red" />
 <asp:ListItem Value="Blue" />
 <asp:ListItem Value="Green" />
 </asp:DropDownList>
 </div>
 </form>
 </body>
</html>

Dan berikut adalah kode baru di belakang:

Daftar 4: Codebehind

public partial class _Default : System.Web.UI.Page
{
    protected void Button1_Click(object sender, EventArgs e)
    {
        if (cbDate.Checked)
        {
            Label1.Text = DateTime.Now.ToString("MM/dd/yyyy hh:mm:ss");
            Label2.Text = DateTime.Now.ToString("MM/dd/yyyy hh:mm:ss");
        }
        else
        {
            Label1.Text = DateTime.Now.ToLongTimeString();
            Label2.Text = DateTime.Now.ToLongTimeString();
        }
    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        if (cbDate.Checked)
        {
            Label1.Text = DateTime.Now.ToString("MM/dd/yyyy hh:mm:ss");
        }
        else
        {
            Label1.Text = DateTime.Now.ToLongTimeString();
        }
    }
    protected void cbDate_CheckedChanged(object sender, EventArgs e)
    {
        cbDate.Font.Bold = cbDate.Checked;
    }
    protected void ddlColor_SelectedIndexChanged(object sender, EventArgs e)
    {
        Color c = Color.FromName(ddlColor.SelectedValue);
        Label2.ForeColor = c;
    }
}

Ide di balik halaman ini adalah bahwa daftar drop-down memilih salah satu dari tiga warna untuk memperlihatkan label kedua, bahwa kotak centang menentukan apakah itu tebal, dan apakah label menampilkan tanggal serta waktu. Kotak centang tidak boleh menyebabkan pembaruan AJAX, tetapi daftar drop-down harus, meskipun tidak ditempatkan dalam UpdatePanel.

Cuplikan layar yang memperlihatkan browser web yang disebut Halaman Tanpa Judul dan daftar drop-down dengan warna Biru dipilih di bawah tombol yang bertuliskan Perbarui Kedua Panel.

(Klik untuk melihat gambar ukuran penuh)

Seperti yang terlihat dalam cuplikan layar di atas, tombol terbaru yang akan diklik adalah tombol kanan Perbarui Panel Ini, yang memperbarui waktu teratas secara independen dari waktu bawah. Tanggal juga dinonaktifkan di antara klik, karena tanggal terlihat di label bawah. Akhirnya yang menarik adalah warna label bawah: diperbarui lebih baru daripada teks label, yang menunjukkan bahwa status kontrol penting, dan pengguna mengharapkannya dipertahankan melalui postback AJAX. Namun, waktu tidak diperbarui. Waktu secara otomatis diisi ulang melalui persistensi bidang __VIEWSTATE halaman yang ditafsirkan oleh runtime ASP.NET ketika kontrol dirender ulang di server. Kode server AJAX ASP.NET tidak mengenali metode mana kontrol berubah status; itu hanya mengisi kembali dari status tampilan dan kemudian menjalankan peristiwa yang sesuai.

Namun, harus ditunjukkan, bahwa seandainya saya menginisialisasi waktu dalam peristiwa Page_Load, waktu akan dinaikkan dengan benar. Akibatnya, pengembang harus waspada bahwa kode yang sesuai dijalankan selama penanganan aktivitas yang sesuai, dan menghindari penggunaan Page_Load ketika penanganan aktivitas kontrol akan sesuai.

Ringkasan

Kontrol UpdatePanel Ekstensi AJAX ASP.NET serbaguna, dan dapat menggunakan sejumlah metode untuk mengidentifikasi peristiwa kontrol yang harus menyebabkannya diperbarui. Ini mendukung pembaruan secara otomatis oleh kontrol turunannya, tetapi juga dapat merespons peristiwa kontrol di tempat lain di halaman.

Untuk mengurangi potensi beban pemrosesan server, disarankan agar ChildrenAsTriggers properti UpdatePanel diatur ke false, dan peristiwa tersebut diikutsertakan daripada disertakan secara default. Ini juga mencegah peristiwa yang tidak diperlukan menyebabkan efek yang berpotensi tidak diinginkan, termasuk validasi, dan perubahan pada bidang input. Jenis bug ini mungkin sulit diisolasi, karena halaman diperbarui secara transparan kepada pengguna, dan oleh karena itu penyebabnya mungkin tidak segera jelas.

Dengan memeriksa pekerjaan dalam model penyadapan pos formulir AJAX ASP.NET, kami dapat menentukan bahwa ia menggunakan kerangka kerja yang sudah disediakan oleh ASP.NET. Dengan demikian, ia mempertahankan kompatibilitas maksimum dengan kontrol yang dirancang menggunakan kerangka kerja yang sama, dan mengganggu secara minimal pada JavaScript tambahan yang ditulis untuk halaman.

Bio

Rob Paveza adalah pengembang aplikasi .NET senior di Terralever (www.terralever.com), sebuah perusahaan pemasaran interaktif terkemuka di Tempe, AZ. Dia dapat dijangkau di robpaveza@gmail.com, dan blognya terletak di http://geekswithblogs.net/robp/.

Scott Cate telah bekerja dengan teknologi Microsoft Web sejak 1997 dan merupakan Presiden myKB.com (www.myKB.com) di mana ia mengkhususkan diri dalam menulis aplikasi berbasis ASP.NET yang berfokus pada solusi Perangkat Lunak Pangkalan Pengetahuan. Scott dapat dihubungi melalui email di scott.cate@myKB.com atau blognya di ScottCate.com

SebelumnyaBerikutnya

  • Last updated on