UpdatePanel adalah salah satu control ASP.NET AJAX untuk melakukan partial rendering pada sebuah halaman. UpdatePanel bekerja bersama-sama dengan ScriptManager untuk membuat halaman web dengan rasa AJAX.
Partial Rendering
Partial-rendering adalah cara untuk memperbarui sebagian tampilan halaman, bukan keseluruhan halaman. Dibandingkan dengan melakukan postback dan reload keseluruhan halaman, partial-rendering memberikan banyak manfaat baik dari sisi kecepatan maupun efisiensi, karena hanya sebagian halaman saja yang diproses dan bukan keseluruhan halaman. Bagian halaman yang statis seperti logo dan beberapa teks statis lainnya tidak ikut diproses lagi.
Beberapa manfaat dari partial rendering adalah efisiensi sumberdaya (resources) baik di server maupun client dan efisiensi bandwidth yang digunakan. Di sisi server, server hanya akan memproses bagian halaman yang akan dirender, bukan keseluruhan halaman sebagaimana halaman ASP.NET konvensional. Di sisi client, browser juga hanya akan memproses sebagian dari halaman sehingga akan tampak lebih cepat dibandingkan reload keseluruhan halaman. Dari sisi bandwidth yang digunakan jelas lebih efisien karena data yang dilewatkan hanya sebagian dari halaman, sehingga menghemat bandwidth dengan tidak megirimkan data yang sama tiap kali postback.
Control UpdatePanel
UpdatePanel adalah sebuah control server yang untuk melakukan partial-rendering. Bersama dengan ScriptManager control server dan class PageRequestManager di client, UpdatePanel akan melakukan update pada daerah tertentu di halaman secara asinkron. Dengan menggunakan UpdatePanel, hanya element yang berada di dalam UpdatePanel yang akan diproses.
Gambar di bawah ini mengilustrasikan halaman yang dimuat pertama kali dan melakukan postback secara asinkron untuk mengupdate isi dari control UpdatePanel.
Untuk melakukan partial-rendering sangatlah mudah, tempatkan semua control yang akan dibuat partial-rendering ke dalam UpdatePanel Control. Jangan lupa, tempatkan satu control ScriptManager pada halaman, UpdatePanel membutuhkan control ini untuk melakukan postback secara asinkron.
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToLongTimeString();
}
</script>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Label ID="Label2" runat="server" Text="Waktu server "></asp:Label><br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
Pada contoh di atas, semua control yang berada di dalam UpdatePanel bersifat partial-rendering. Semua postback dari control di dalam UpdatePanel dilakukan secara asinkron. Pada waktu Button1 di-click, dia akan memanggil method Button1_Click dan mengeset Label1.Text menjadi waktu server. Proses postback dilakukan secara asinkron, hanya control yang berada di dalam UpdatePanel yang berpengaruh.
Men-Trigger UpdatePanel dari Control di Luar UpdatePanel
Selain control yang berada di dalam UpdatePanel, UpdatePanel juga bisa di-trigger dari luar. Untuk melakukan hal ini, tambahkan element <asp:AsyncPostBackTrigger> yang ditempatkan di dalam element <Trigger> pada UpdatePanel. Set control ID dengan nama control yang akan mentrigger UpdatePanel tersebut. Element <Trigger> dapat berisi lebih dari satu element <asp:AsyncPostBackTrigger>
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToLongTimeString();
}
</script>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Label ID="Label2" runat="server" Text="Waktu server"></asp:Label><br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
</div>
</form>
Menampilkan Status Update dengan UpdateProgress
UpdateProgress digunakan untuk menampilkan informasi status dari UpdatePanel. Layout control UpdateProgress dapat diatur untuk mendapatkan tampilan yang menarik di dalam element <ProgressTemplate>. Kita dapat menempatkan element apapun (HTML element maupun control server ASP.NET) di dalam <ProgressTemplate>.
Untuk menerapkan UpdateProgress, cukup menempelkan control UpdateProgress pada halaman.
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(2000);
Label1.Text = DateTime.Now.ToLongTimeString();
}
</script>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Label ID="Label2" runat="server" Text="Waktu server"></asp:Label><br />
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
An update is in progress...
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
</div>
</form>
Pada contoh di atas, terdapat baris System.Threading.Thread.Sleep(2000) di method Button1_Click. Baris ini digunakan untuk simulasi bahwa proses update sedang berjalan dengan menghentikan sementara proses selama 2 detik. Jika baris ini dihilangkan, pesan pada UpdateProgress akan ditampilkan dalam waktu yang sangat singkat sehingga tidak dapat terlihat. Pada project nyata, baris ini sebaiknya tidak digunakan.
Control UpdateProgress juga bisa diset property AssociatedUpdatePanelID untuk menentukan UpdatePanel mana yang akan men-trigger UpdateProgress ini. Jika property ini tidak di-set, maka tiap posback asinkron akan men-trigger UpdateProgress ini.
Dengan menggunakan UpdatePanel dan UpdateProgress, kita tidak perlu mendalami JavaScript untuk membuat aplikasi AJAX. Hanya dengan menempatkan UpdatePanel, aplikasi kita sudah bisa memanfaatkan kemampuan AJAX yang ringan, cepat serasa aplikasi desktop.