Memahami Updates Halaman Parsial dengan ASP.NET AJAX

oleh Scott Cate

Mungkin fitur yang paling terlihat dari ekstensi AJAX ASP.NET adalah kemampuan untuk melakukan pembaruan halaman parsial atau bertahap tanpa melakukan postback penuh ke server, tanpa perubahan kode dan perubahan markup minimal. Keuntungannya luas - keadaan multimedia Anda (seperti Adobe Flash atau Windows Media) tidak berubah, biaya bandwidth berkurang, dan klien tidak mengalami kedipan yang biasanya terkait dengan postback.

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:

• Pembaruan halaman memerlukan perjalanan pulang-pergi ke server, yang memerlukan refresh halaman.
• Round-trip tidak mempertahankan efek apa pun yang dihasilkan oleh Javascript atau teknologi sisi klien lainnya (seperti Adobe Flash)
• Selama postback, browser selain Microsoft Internet Explorer tidak mendukung pemulihan posisi gulir secara otomatis. Dan bahkan di Internet Explorer, masih ada kedipan karena halaman disegarkan.
• Postback mungkin melibatkan sejumlah besar bandwidth karena bidang formulir __VIEWSTATE dapat tumbuh, terutama ketika berhadapan dengan kontrol seperti kontrol GridView atau pengulang.
• Tidak ada model terpadu untuk mengakses Layanan Web melalui JavaScript atau teknologi sisi klien lainnya.

Masukkan ekstensi AJAX ASP.NET Microsoft. AJAX, yang merupakan singkatan dari J avaScript A nd X ML sinkron, adalah kerangka kerja terintegrasi untuk menyediakan pembaruan halaman inkremental melalui JavaScript lintas platform, terdiri dari kode sisi server yang terdiri dari Microsoft AJAX Framework, dan komponen skrip yang disebut Pustaka Skrip Microsoft AJAX. Ekstensi AJAX ASP.NET juga menyediakan dukungan lintas platform untuk mengakses ASP.NET Web Services melalui JavaScript.

Laporan resmi ini memeriksa fungsionalitas pembaruan halaman parsial dari ekstensi AJAX ASP.NET, yang mencakup komponen ScriptManager, kontrol UpdatePanel, dan kontrol UpdateProgress, dan mempertimbangkan skenario di mana mereka harus atau tidak boleh digunakan.

Whitepaper ini didasarkan pada rilis Beta 2 Visual Studio 2008 dan .NET Framework 3.5, yang mengintegrasikan Ekstensi AJAX ASP.NET ke dalam Pustaka Kelas Dasar (di mana sebelumnya merupakan komponen add-on yang tersedia untuk ASP.NET 2.0). Laporan resmi ini juga mengasumsikan bahwa Anda menggunakan Visual Studio 2008 dan bukan Visual Web Developer Express Edition; beberapa templat proyek yang dirujuk mungkin tidak tersedia untuk pengguna Visual Web Developer Express.

Updates Halaman Parsial

Mungkin fitur yang paling terlihat dari ekstensi AJAX ASP.NET adalah kemampuan untuk melakukan pembaruan halaman parsial atau bertahap tanpa melakukan postback penuh ke server, tanpa perubahan kode dan perubahan markup minimal. Keuntungannya luas - status multimedia Anda (seperti Adobe Flash atau Windows Media) tidak berubah, biaya bandwidth berkurang, dan klien tidak mengalami kedipan yang biasanya terkait dengan postback.

Kemampuan untuk mengintegrasikan penyajian halaman parsial diintegrasikan ke dalam ASP.NET dengan perubahan minimal pada proyek Anda.

Panduan: Mengintegrasikan Penyajian Parsial ke dalam Proyek yang Ada

1. Di Microsoft Visual Studio 2008, buat proyek ASP.NET Web Site baru dengan masuk ke File-> Baru-> Situs Web dan pilih situs web ASP.NET dari dialog. Anda dapat menamainya apa pun yang Anda suka, dan Anda dapat menginstalnya baik ke sistem file atau ke Internet Information Services (IIS).
2. Anda akan disajikan dengan halaman default kosong dengan markup ASP.NET dasar (formulir sisi server dan arahan @Page ). Letakkan Label yang disebut Label1 dan Tombol yang dipanggil Button1 ke halaman dalam elemen formulir. Anda dapat mengatur properti teks mereka ke apa pun yang Anda suka.
3. Dalam tampilan Desain, klik Button1 dua kali untuk menghasilkan penanganan aktivitas di belakang kode. Dalam penanganan aktivitas ini, atur Label1.Text ke Anda mengklik tombol ! .

Daftar 1: Markup untuk default.aspx sebelum penyajian parsial diaktifkan

<%@ 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">
 <div>
 <asp:Label ID="Label1" runat="server" Text="This is a label!"></asp:Label>
 <asp:Button ID="Button1" runat="server" Text="Click Me" OnClick="Button1_Click" />
 </div>
 </form>
 </body>
</html>

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 = "You clicked the button!";
    }
}

1. Tekan F5 untuk meluncurkan situs web Anda. Visual Studio akan meminta Anda untuk menambahkan file web.config untuk mengaktifkan penelusuran kesalahan; lakukan. Saat Anda mengklik tombol, perhatikan bahwa halaman di-refresh untuk mengubah teks dalam label, dan ada kedipan singkat saat halaman digambar ulang.
2. Setelah menutup jendela browser Anda, kembali ke Visual Studio dan ke halaman markup. Gulir ke bawah di kotak alat Visual Studio, dan temukan tab berlabel Ekstensi AJAX. (Jika Anda tidak memiliki tab ini karena Anda menggunakan versi ekstensi AJAX atau Atlas yang lebih lama, lihat panduan untuk mendaftarkan item kotak alat Ekstensi AJAX nanti di laporan resmi ini, atau instal versi saat ini dengan Penginstal Windows yang dapat diunduh dari situs web).

(Klik untuk melihat gambar ukuran penuh)

1. Masalah Yang Diketahui:Jika Anda menginstal Visual Studio 2008 ke komputer yang sudah menginstal Visual Studio 2005 dengan Ekstensi AJAX ASP.NET 2.0, Visual Studio 2008 akan mengimpor item kotak alat Ekstensi AJAX. Anda dapat menentukan apakah ini masalahnya dengan memeriksa tipsalat komponen; mereka harus mengatakan Versi 3.5.0.0. Jika mereka mengatakan Versi 2.0.0.0, maka Anda telah mengimpor item kotak alat lama Anda, dan harus mengimpornya secara manual dengan menggunakan dialog Pilih Item Kotak Alat di Visual Studio. Anda tidak akan dapat menambahkan kontrol Versi 2 melalui perancang.

2. <asp:Label> Sebelum tag dimulai, buat baris spasi kosong, dan klik dua kali pada kontrol UpdatePanel di kotak alat. Perhatikan bahwa direktif baru @Register disertakan di bagian atas halaman, menunjukkan bahwa kontrol dalam namespace System.Web.UI harus diimpor menggunakan asp: awalan.

3. Seret tag penutup </asp:UpdatePanel> melewati akhir elemen Tombol, sehingga elemen terbentuk dengan baik dengan kontrol Label dan Tombol dibungkus.

4. Setelah tag pembuka <asp:UpdatePanel> , mulailah membuka tag baru. Perhatikan bahwa IntelliSense meminta Anda dengan dua opsi. Dalam hal ini, buat <ContentTemplate> tag. Pastikan untuk membungkus tag ini di sekitar Label dan Tombol Anda sehingga markup terbentuk dengan baik.

(Klik untuk melihat gambar ukuran penuh)

1. Di mana saja dalam <form> elemen , sertakan kontrol ScriptManager dengan mengklik dua kali pada ScriptManager item di kotak alat.
2. <asp:ScriptManager> Edit tag sehingga menyertakan atribut EnablePartialRendering= true.

Daftar 3: Markup untuk default.aspx dengan penyajian parsial diaktifkan

<%@ Page Language="C#" AutoEventWireup="true"
 CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
 PublicKeyToken=31bf3856ad364e35"
 Namespace="System.Web.UI" TagPrefix="asp" %>
<!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">
 <ContentTemplate>
 <asp:Label ID="Label1" runat="server"
 Text="This is a label!"></asp:Label>
 <asp:Button ID="Button1" runat="server"
 Text="Click Me" OnClick="Button1_Click" />
 </ContentTemplate>
 </asp:UpdatePanel>
 </div>
 </form>
 </body>
</html>

1. Buka file web.config Anda. Perhatikan bahwa Visual Studio telah secara otomatis menambahkan referensi kompilasi ke System.Web.Extensions.dll.

2. Apa yang Baru di Visual Studio 2008: web.config yang disertakan dengan templat proyek ASP.NET Web Site secara otomatis menyertakan semua referensi yang diperlukan ke ekstensi AJAX ASP.NET, dan menyertakan bagian informasi konfigurasi yang dikomentari yang dapat tidak dikomentari untuk mengaktifkan fungsionalitas tambahan. Visual Studio 2005 memiliki templat serupa saat ekstensi AJAX ASP.NET 2.0 diinstal. Namun, di Visual Studio 2008, Ekstensi AJAX menolak secara default (yaitu, mereka dirujuk secara default, tetapi dapat dihapus sebagai referensi).

(Klik untuk melihat gambar ukuran penuh)

1. Tekan F5 untuk meluncurkan situs web Anda. Perhatikan bagaimana tidak ada perubahan kode sumber yang diperlukan untuk mendukung penyajian parsial - hanya markup yang diubah.

Ketika Anda meluncurkan situs web Anda, Anda akan melihat bahwa penyajian parsial sekarang diaktifkan, karena ketika Anda mengklik tombol tidak akan ada kedipan, juga tidak akan ada perubahan dalam posisi gulir halaman (contoh ini tidak menunjukkan itu). Jika Anda melihat sumber halaman yang dirender setelah mengklik tombol, itu akan mengonfirmasi bahwa sebenarnya post-back belum terjadi - teks label asli masih menjadi bagian dari markup sumber, dan label telah berubah melalui JavaScript.

Visual Studio 2008 tampaknya tidak disertakan dengan templat yang telah ditentukan sebelumnya untuk situs web ASP.NET AJAX-Enabled. Namun, templat tersebut tersedia dalam Visual Studio 2005 jika Ekstensi AJAX Visual Studio 2005 dan ASP.NET 2.0 diinstal. Akibatnya, mengonfigurasi situs web dan memulai dengan templat Situs Web AJAX-Enabled kemungkinan akan lebih mudah, karena templat harus menyertakan file web.config yang dikonfigurasi sepenuhnya (mendukung semua ekstensi AJAX ASP.NET, termasuk akses Layanan Web dan serialisasi JSON - Notasi Objek JavaScript) dan menyertakan UpdatePanel dan ContentTemplate dalam halaman Formulir Web utama secara default. Mengaktifkan penyajian parsial dengan halaman default ini semampunya dengan mengunjungi kembali Langkah 10 panduan ini dan menghilangkan kontrol ke halaman.

Kontrol ScriptManager

Referensi Kontrol ScriptManager

Properti Markup-Enabled:

Nama Properti	Jenis	Deskripsi
AllowCustomErrors-Redirect	Bool	Menentukan apakah akan menggunakan bagian kesalahan kustom dari file web.config untuk menangani kesalahan.
AsyncPostBackError-Message	String	Mendapatkan atau mengatur pesan kesalahan yang dikirim ke klien jika kesalahan dimunculkan.
AsyncPostBack-Timeout	Int32	Mendapatkan atau mengatur jumlah waktu default klien harus menunggu permintaan asinkron selesai.
EnableScript-Globalization	Bool	Mendapatkan atau mengatur apakah globalisasi skrip diaktifkan.
EnableScript-Localization	Bool	Mendapatkan atau mengatur apakah pelokalan skrip diaktifkan.
ScriptLoadTimeout	Int32	Menentukan jumlah detik yang diizinkan untuk memuat skrip ke klien
ScriptMode	Enum (Otomatis, Debug, Rilis, Warisi)	Mendapatkan atau mengatur apakah akan merender versi rilis skrip
ScriptPath	String	Mendapatkan atau mengatur jalur akar ke lokasi file skrip yang akan dikirim ke klien.

Properti Code-Only:

Nama Properti	Jenis	Deskripsi
AuthenticationService	AuthenticationService-Manager	Mendapatkan detail tentang proksi layanan autentikasi ASP.NET yang akan dikirim ke klien.
IsDebuggingEnabled	Bool	Mendapatkan apakah skrip dan penelusuran kesalahan kode diaktifkan.
IsInAsyncPostback	Bool	Mendapatkan apakah halaman saat ini berada dalam permintaan post back asinkron.
ProfileService	ProfileService-Manager	Mendapatkan detail tentang proksi ASP.NET Profiling Service yang akan dikirim ke klien.
Skrip	Referensi Skrip Koleksi<>	Mendapatkan kumpulan referensi skrip yang akan dikirim ke klien.
Layanan	Referensi Layanan Koleksi<>	Mendapatkan kumpulan referensi proksi Layanan Web yang akan dikirim ke klien.
SupportsPartialRendering	Bool	Mendapatkan apakah klien saat ini mendukung penyajian parsial. Jika properti ini mengembalikan false, maka semua permintaan halaman akan menjadi postback standar.

Metode Kode Publik:

Nama Metode	Jenis	Deskripsi
SetFocus(string)	Kekosongan	Mengatur fokus klien ke kontrol tertentu ketika permintaan telah selesai.

Turunan Markup:

Menandai	Deskripsi
<AuthenticationService>	Menyediakan detail tentang proksi ke layanan autentikasi ASP.NET.
<ProfileService>	Menyediakan detail tentang proksi ke layanan pembuatan profil ASP.NET.
<Skrip>	Menyediakan referensi skrip tambahan.
<asp:ScriptReference>	Menunjukkan referensi skrip tertentu.
<Layanan>	Menyediakan referensi Layanan Web tambahan yang akan memiliki kelas proksi yang dihasilkan.
<asp:ServiceReference>	Menunjukkan referensi Layanan Web tertentu.

Kontrol ScriptManager adalah inti penting untuk Ekstensi AJAX ASP.NET. Ini menyediakan akses ke pustaka skrip (termasuk sistem jenis skrip sisi klien yang luas), mendukung penyajian parsial, dan memberikan dukungan ekstensif untuk layanan ASP.NET tambahan (seperti autentikasi dan pembuatan profil, tetapi juga Layanan Web lainnya). Kontrol ScriptManager juga menyediakan dukungan globalisasi dan pelokalan untuk skrip klien.

Menyediakan Skrip Alternatif dan Tambahan

Meskipun Ekstensi AJAX Microsoft ASP.NET 2.0 menyertakan seluruh kode skrip dalam edisi debug dan rilis sebagai sumber daya yang disematkan dalam rakitan yang direferensikan, pengembang bebas mengalihkan ScriptManager ke file skrip yang disesuaikan, serta mendaftarkan skrip tambahan yang diperlukan.

Untuk mengganti pengikatan default untuk skrip yang biasanya disertakan (seperti yang mendukung namespace layanan Sys.WebForms dan sistem pengetikan kustom), Anda dapat mendaftar untuk ResolveScriptReference peristiwa kelas ScriptManager. Ketika metode ini dipanggil, penanganan aktivitas memiliki kesempatan untuk mengubah jalur ke file skrip yang dimaksud; manajer skrip kemudian akan mengirim salinan skrip yang berbeda atau disesuaikan ke klien.

Selain itu, referensi skrip (diwakili oleh ScriptReference kelas) dapat disertakan secara terprogram atau melalui markup. Untuk melakukannya, ubah ScriptManager.Scripts koleksi secara terprogram, atau sertakan <asp:ScriptReference> tag di bawah <Scripts> tag , yang merupakan anak tingkat pertama dari kontrol ScriptManager.

Penanganan Kesalahan Kustom untuk UpdatePanels

Meskipun pembaruan ditangani oleh pemicu yang ditentukan oleh kontrol UpdatePanel, dukungan untuk penanganan kesalahan dan pesan kesalahan kustom ditangani oleh instans kontrol ScriptManager halaman. Ini dilakukan dengan mengekspos peristiwa, AsyncPostBackError, ke halaman yang kemudian dapat memberikan logika penanganan pengecualian kustom.

Dengan menggunakan peristiwa AsyncPostBackError, Anda dapat menentukan AsyncPostBackErrorMessage properti , yang kemudian menyebabkan kotak pemberitahuan dinaikkan setelah menyelesaikan panggilan balik.

Penyesuaian sisi klien juga dimungkinkan alih-alih menggunakan kotak pemberitahuan default; misalnya, Anda mungkin ingin menampilkan elemen yang disesuaikan <div> daripada dialog modal browser default. Dalam hal ini, Anda dapat menangani kesalahan dalam skrip klien:

Daftar 5: Skrip sisi klien untuk menampilkan kesalahan kustom

<script type= text/javascript >
 <!--
 Sys.WebForms.PageRequestManager.getInstance().add_EndRequest(Request_End);
 function Request_End(sender, args)
 {
 if (args.get_error() != undefined)
 {
 var errorMessage =  ;
 if (args.get_response().get_statusCode() ==  200 )
 {
 errorMessage = args.get_error().message;
 }
 else
 {
 // the server wasn't the problem...
 errorMessage =  An unknown error occurred... ;
 }
 // do something with the errorMessage here.
 // now make sure the system knows we handled the error.
 args.set_errorHandled(true);
 }
 }
 // -->
</script>

Cukup sederhana, skrip di atas mendaftarkan panggilan balik dengan runtime AJAX sisi klien ketika permintaan asinkron telah selesai. Kemudian memeriksa untuk melihat apakah kesalahan dilaporkan, dan jika demikian, memproses detailnya, akhirnya menunjukkan kepada runtime bahwa kesalahan ditangani dalam skrip kustom.

Dukungan Globalisasi dan Pelokalan

Kontrol ScriptManager menyediakan dukungan ekstensif untuk pelokalan string skrip dan komponen antarmuka pengguna; namun, topik itu berada di luar cakupan laporan resmi ini. Untuk informasi selengkapnya, lihat laporan resmi, Dukungan Globalisasi di ekstensi AJAX ASP.NET.

Kontrol UpdatePanel

Referensi Kontrol UpdatePanel

Properti Markup-Enabled:

Nama Properti	Jenis	Deskripsi
ChildrenAsTriggers	bool	Menentukan apakah kontrol anak secara otomatis memanggil refresh pada postback.
RenderMode	enum (Blok, Sebaris)	Menentukan cara konten akan disajikan secara visual.
UpdateMode	enum (Always, Conditional)	Menentukan apakah UpdatePanel selalu disegarkan selama render parsial atau hanya di-refresh saat pemicu tertembak.

Properti Code-Only:

Nama Properti	Jenis	Deskripsi
IsInPartialRendering	bool	Mendapatkan apakah UpdatePanel mendukung penyajian parsial untuk permintaan saat ini.
ContentTemplate	ITemplate	Mendapatkan templat markup untuk permintaan pembaruan.
ContentTemplateContainer	Kontrol	Mendapatkan templat terprogram untuk permintaan pembaruan.
Pemicu	UpdatePanel- TriggerCollection	Mendapatkan daftar pemicu yang terkait dengan UpdatePanel saat ini.

Metode Kode Publik:

Nama Metode	Jenis	Deskripsi
Update()	Kekosongan	Updates UpdatePanel yang ditentukan secara terprogram. Memungkinkan permintaan server untuk memicu render parsial dari UpdatePanel yang tidak diambil.

Turunan Markup:

Menandai	Deskripsi
<ContentTemplate>	Menentukan markup yang akan digunakan untuk merender hasil penyajian parsial. Anak dari <asp:UpdatePanel>.
<Pemicu>	Menentukan kumpulan kontrol n yang terkait dengan pembaruan UpdatePanel ini. Anak dari <asp:UpdatePanel>.
<asp:AsyncPostBackTrigger>	Menentukan pemicu yang memanggil render halaman parsial untuk UpdatePanel yang diberikan. Ini mungkin atau mungkin bukan kontrol sebagai turunan dari UpdatePanel yang dimaksud. Terperinci ke nama peristiwa. Anak dari <Pemicu>.
<asp:PostBackTrigger>	Menentukan kontrol yang menyebabkan seluruh halaman di-refresh. Ini mungkin atau mungkin bukan kontrol sebagai turunan dari UpdatePanel yang dimaksud. Granular ke objek . Anak dari <Pemicu>.

Kontrol UpdatePanel adalah kontrol yang memisahkan konten sisi server yang akan mengambil bagian dalam fungsionalitas penyajian parsial Ekstensi AJAX. Tidak ada batasan jumlah kontrol UpdatePanel yang dapat berada di halaman, dan dapat ditumpuk. Setiap UpdatePanel diisolasi, sehingga masing-masing dapat bekerja secara independen (Anda dapat memiliki dua UpdatePanel yang berjalan pada saat yang sama, merender bagian halaman yang berbeda, terlepas dari postback halaman).

Kontrol UpdatePanel terutama menangani pemicu kontrol - secara default, kontrol apa pun yang terkandung dalam UpdatePanel ContentTemplate yang membuat postback terdaftar sebagai pemicu untuk UpdatePanel. Ini berarti bahwa UpdatePanel dapat bekerja dengan kontrol terikat data default (seperti GridView), dengan kontrol pengguna, dan dapat diprogram dalam skrip.

Secara default, ketika render halaman parsial dipicu, semua kontrol UpdatePanel pada halaman akan disegarkan, apakah kontrol UpdatePanel menentukan pemicu untuk tindakan tersebut atau tidak. Misalnya, jika satu UpdatePanel menentukan kontrol Tombol, dan kontrol Tombol diklik, semua kontrol UpdatePanel pada halaman tersebut akan disegarkan secara default. Ini karena, secara default, UpdateMode properti UpdatePanel diatur ke Always. Atau, Anda dapat mengatur properti UpdateMode ke Conditional, yang berarti bahwa UpdatePanel hanya akan di-refresh jika pemicu tertentu tertembak.

Catatan Kontrol Kustom

UpdatePanel dapat ditambahkan ke kontrol pengguna atau kontrol kustom apa pun; namun, halaman tempat kontrol ini disertakan juga harus menyertakan kontrol ScriptManager dengan properti EnablePartialRendering diatur ke true.

Salah satu cara Anda mungkin memperhitungkan hal ini saat menggunakan Kontrol Kustom Web adalah dengan mengambil alih metode kelas yang CompositeControl dilindungiCreateChildControls(). Dengan demikian, Anda dapat menyuntikkan UpdatePanel antara anak-anak kontrol dan dunia luar jika Anda menentukan halaman mendukung penyajian parsial; jika tidak, Anda cukup melapisi kontrol anak ke dalam instans kontainer Control .

Pertimbangan UpdatePanel

UpdatePanel beroperasi sebagai sesuatu dari kotak hitam, membungkus ASP.NET postback dalam konteks XMLHttpRequest JavaScript. Namun, ada pertimbangan performa yang signifikan yang perlu diingat, baik dalam hal perilaku maupun kecepatan. Untuk memahami cara kerja UpdatePanel, sehingga Anda dapat memutuskan kapan penggunaannya sesuai, Anda harus memeriksa pertukaran AJAX. Contoh berikut menggunakan situs yang ada dan, Mozilla Firefox dengan ekstensi Firebug (Firebug menangkap data XMLHttpRequest).

Pertimbangkan formulir yang, antara lain, memiliki kotak teks kode pos yang seharusnya mengisi bidang kota dan status pada formulir atau kontrol. Formulir ini pada akhirnya mengumpulkan informasi keanggotaan, termasuk nama, alamat, dan informasi kontak pengguna. Ada banyak pertimbangan desain yang perlu dipertimbangkan, berdasarkan persyaratan proyek tertentu.

(Klik untuk melihat gambar ukuran penuh)

(Klik untuk melihat gambar ukuran penuh)

Dalam iterasi asli aplikasi ini, kontrol dibangun yang menggabungkan keseluruhan data pendaftaran pengguna, termasuk kode pos, kota, dan negara bagian. Seluruh kontrol dibungkus dalam UpdatePanel dan dihilangkan ke Formulir Web. Saat kode pos dimasukkan oleh pengguna, UpdatePanel mendeteksi peristiwa (peristiwa TextChanged yang sesuai di back-end, baik dengan menentukan pemicu atau dengan menggunakan properti ChildrenAsTriggers yang diatur ke true). AJAX memposting semua bidang dalam UpdatePanel, seperti yang diambil oleh FireBug (lihat diagram di sebelah kanan).

Seperti yang ditunjukkan oleh tangkapan layar, nilai dari setiap kontrol dalam UpdatePanel dikirimkan (dalam hal ini, semuanya kosong), serta bidang ViewState. Semua diberitahu, lebih dari 9kb data dikirim, padahal sebenarnya hanya lima byte data yang diperlukan untuk membuat permintaan khusus ini. Responsnya bahkan lebih membengkak: secara total, 57kb dikirim ke klien, hanya untuk memperbarui bidang teks dan bidang drop-down.

Mungkin juga menarik untuk melihat bagaimana AJAX ASP.NET memperbarui presentasi. Bagian respons dari permintaan pembaruan UpdatePanel ditampilkan di tampilan konsol Firebug di sebelah kiri; ini adalah string yang dibatasi pipa yang diformulasikan khusus yang dipecah oleh skrip klien dan kemudian disusun kembali di halaman. Secara khusus, ASP.NET AJAX mengatur properti innerHTML dari elemen HTML pada klien yang mewakili UpdatePanel Anda. Saat browser menghasilkan kembali DOM, ada sedikit keterlambatan, tergantung pada jumlah informasi yang perlu diproses.

Regenerasi DOM memicu sejumlah masalah tambahan:

(Klik untuk melihat gambar ukuran penuh)

• Jika elemen HTML yang berfokus berada dalam UpdatePanel, elemen tersebut akan kehilangan fokus. Jadi, bagi pengguna yang menekan tombol Tab untuk keluar dari kotak teks kode pos, tujuan mereka berikutnya adalah kotak teks Kota. Namun, setelah UpdatePanel menyegarkan tampilan, formulir tidak akan lagi memiliki fokus, dan menekan Tab akan mulai menyoroti elemen fokus (seperti tautan).
• Jika ada jenis skrip sisi klien kustom yang digunakan yang mengakses elemen DOM, referensi yang dipertahankan oleh fungsi dapat menjadi tidak berfungsi setelah postback parsial.

UpdatePanels tidak dimaksudkan untuk menjadi solusi catch-all. Sebaliknya, mereka memberikan solusi cepat untuk situasi tertentu, termasuk pembuatan prototipe, pembaruan kontrol kecil, dan menyediakan antarmuka yang akrab untuk ASP.NET pengembang yang mungkin terbiasa dengan model objek .NET tetapi kurang-jadi dengan DOM. Ada sejumlah alternatif yang dapat menghasilkan performa yang lebih baik, tergantung pada skenario aplikasi:

• Pertimbangkan untuk menggunakan PageMethods dan JSON (JavaScript Object Notation) memungkinkan pengembang untuk memanggil metode statis di halaman seolah-olah panggilan layanan web sedang dipanggil. Karena metodenya statis, tidak ada status yang diperlukan; pemanggil skrip memasok parameter, dan hasilnya dikembalikan secara asinkron.
• Pertimbangkan untuk menggunakan Layanan Web dan JSON jika satu kontrol perlu digunakan di beberapa tempat di seluruh aplikasi. Ini lagi membutuhkan sedikit pekerjaan khusus, dan bekerja secara asinkron.

Menggabungkan fungsionalitas melalui Layanan Web atau Metode Halaman juga memiliki kelemahan. Pertama dan teruntuk, ASP.NET pengembang biasanya cenderung membangun komponen kecil fungsionalitas ke dalam kontrol pengguna (file.ascx). Metode halaman tidak dapat dihosting dalam file-file ini; mereka harus dihosting dalam kelas halaman .aspx yang sebenarnya. Layanan web, demikian pula, harus dihosting dalam kelas .asmx. Tergantung pada aplikasi, arsitektur ini dapat melanggar Prinsip Tanggung Jawab Tunggal, karena fungsionalitas untuk satu komponen sekarang tersebar di dua komponen fisik atau lebih yang mungkin memiliki sedikit atau tanpa ikatan kohesif.

Terakhir, jika aplikasi mengharuskan UpdatePanels digunakan, panduan berikut harus membantu pemecahan masalah dan pemeliharaan.

• Nest UpdatePanels sesedikitan mungkin, tidak hanya dalam unit, tetapi juga di seluruh unit kode. Misalnya, memiliki UpdatePanel pada Halaman yang membungkus Kontrol, sementara Kontrol tersebut juga berisi UpdatePanel, yang berisi Kontrol lain yang berisi UpdatePanel, adalah bersarang lintas unit. Ini membantu untuk tetap jelas elemen mana yang harus disegarkan, dan mencegah refresh yang tidak terduga ke UpdatePanels anak.
• Atur properti ChildrenAsTriggers ke false, dan atur peristiwa pemicu secara eksplisit. Memanfaatkan <Triggers> koleksi adalah cara yang jauh lebih jelas untuk menangani peristiwa, dan dapat mencegah perilaku tak terduga, membantu tugas pemeliharaan dan memaksa pengembang untuk ikut serta dalam suatu acara.
• Gunakan unit sekecil mungkin untuk mencapai fungsionalitas. Seperti yang disebutkan dalam diskusi layanan kode pos, hanya membungkus minimum yang kosong mengurangi waktu ke server, pemrosesan total, dan jejak pertukaran server klien, meningkatkan performa.

Kontrol UpdateProgress

Referensi Kontrol UpdateProgress

Properti Markup-Enabled:

Nama Properti	Jenis	Deskripsi
AssociatedUpdate-PanelID	String	Menentukan ID UpdatePanel yang harus dilaporkan oleh UpdateProgress ini.
DisplayAfter	Int	Menentukan batas waktu dalam milidetik sebelum kontrol ini ditampilkan setelah permintaan asinkron dimulai.
DynamicLayout	bool	Menentukan apakah kemajuan dirender secara dinamis.

Turunan Markup:

Menandai	Deskripsi
<ProgressTemplate>	Berisi set templat kontrol untuk isi yang akan ditampilkan dengan kontrol ini.

Kontrol UpdateProgress memberi Anda ukuran umpan balik untuk menjaga minat pengguna Anda sambil melakukan pekerjaan yang diperlukan untuk diangkut ke server. Ini dapat membantu pengguna Anda mengetahui bahwa Anda melakukan sesuatu meskipun mungkin tidak jelas, terutama karena sebagian besar pengguna terbiasa dengan halaman yang menyegarkan dan melihat sorotan bilah status.

Sebagai catatan, kontrol UpdateProgress dapat muncul di mana saja pada hierarki halaman. Namun, dalam kasus di mana postback parsial dimulai dari UpdatePanel anak (di mana UpdatePanel ditumpuk dalam UpdatePanel lain), postback yang memicu UpdatePanel turunan akan menyebabkan templat UpdateProgress ditampilkan untuk UpdatePanel anak serta UpdatePanel induk. Tetapi, jika pemicu adalah anak langsung dari UpdatePanel induk, maka hanya templat UpdateProgress yang terkait dengan induk yang akan ditampilkan.

Ringkasan

Ekstensi Microsoft ASP.NET AJAX adalah produk canggih yang dirancang untuk membantu membuat konten web lebih mudah diakses dan memberikan pengalaman pengguna yang lebih kaya ke aplikasi web Anda. Sebagai bagian dari ASP.NET Ekstensi AJAX, kontrol penyajian halaman parsial, termasuk kontrol ScriptManager, UpdatePanel, dan UpdateProgress adalah beberapa komponen toolkit yang paling terlihat.

Komponen ScriptManager mengintegrasikan penyediaan JavaScript klien untuk Ekstensi, serta memungkinkan berbagai komponen sisi server dan klien untuk bekerja sama dengan investasi pengembangan minimal.

Kontrol UpdatePanel adalah kotak ajaib yang jelas - markup dalam UpdatePanel dapat memiliki Codebehind sisi server dan tidak memicu refresh halaman. Kontrol UpdatePanel dapat ditumpuk, dan dapat bergantung pada kontrol di UpdatePanel lainnya. Secara default, UpdatePanels menangani postback apa pun yang dipanggil oleh kontrol turunannya, meskipun fungsi ini dapat disetel dengan baik, baik secara deklaratif maupun terprogram.

Saat menggunakan kontrol UpdatePanel, pengembang harus mengetahui dampak performa yang berpotensi muncul. Alternatif potensial termasuk layanan web dan metode halaman, meskipun desain aplikasi harus dipertimbangkan.

Kontrol UpdateProgress memungkinkan pengguna untuk mengetahui bahwa dia tidak diabaikan, dan bahwa permintaan di balik layar sedang berlangsung saat halaman sebaliknya tidak melakukan apa pun untuk menanggapi input pengguna. Ini juga termasuk kemampuan untuk membatalkan hasil penyajian parsial.

Bersama-sama, alat-alat ini membantu menciptakan pengalaman pengguna yang kaya dan mulus dengan membuat server bekerja kurang jelas bagi pengguna dan mengganggu alur kerja lebih sedikit.

Bio

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

Berikutnya