Ahmad Masykur

Share your knowledge although one function!

About the author

Ahmad Masykur is a Software Architecture Engineer at PT. Freeport Indonesia Jakarta Indonesia.
In this blog, I share things of interest to me. Most topics are likely to be related to software development, but don't hold me to it.

Certificates



Awards


Powered by

Widget Prayer Time not found.

There is an error in XML document (4, 16278).X

Page List

Validators


Ahmad Masykur

ASP.NET AJAX: UpdatePanel

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="form2" 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="form2" 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="form2" 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.


Categories: AJAX | ASP.NET AJAX
Permalink | Comments (31) | Post RSSRSS comment feed

Comments

uut Indonesia | Reply

Wednesday, May 30, 2007 6:38 AM

uut

Bagus, bermanfaat, menarik, berisi ilmu2 yg ada yg blm kt tau.
tengkyu mbah, maju terus, buat kerajaan elektro UNDIp

adnan Indonesia | Reply

Friday, June 01, 2007 8:39 AM

adnan

Durung mudeng mbah..., but tengkeyu. Terus diisi ben aku iso melu-melu pinter Laughing

Yogi Indonesia | Reply

Tuesday, July 03, 2007 1:58 AM

Yogi

Wah aku masih menggunakan Atlas nigh.. ternyata pada ASP.NET AJAX ini terjadi banyak perubahan... yang pasti tambah mudah penggunaannya juga lebih sederhana frameworknya tidak sekompleks Atlas.. walau ASP.NET AJAX ini merupakan release terbaru setelah Atlas...

Saya masih bingung nih masalah keberadaan komponen-komponen  dengan Kontrol-kontrol yang ada di ASP.NET AJAX / Atlas...
Setau saya itu ada kontrol server dan client... kalo untuk komponen seperti apa yah..?

Mohon bombingannya yah, aku masih belajar nih...

busvy seo test Indonesia | Reply

Sunday, November 16, 2008 10:13 PM

busvy seo test

oalah ga mudeng aku mas....Frown

temporary insurance United States | Reply

Friday, November 21, 2008 4:08 AM

temporary insurance

Thank you sir
for sharing such a informative concept

web hosting Slovakia | Reply

Wednesday, November 26, 2008 1:05 PM

web hosting

Hello ahmed, can i run this application in php??
If not can you please provide this in php ??
thanks

Ahmad Masykur Indonesia | Reply

Wednesday, November 26, 2008 1:10 PM

Ahmad Masykur

Nope. This code only run on ASP.NET.

Essay Norway | Reply

Wednesday, November 26, 2008 1:11 PM

Essay

Yup, you can run this applications in php sites.. There are few softwares which covers asp code to php..you just run this code in that software..

Reverse Phone Czech Republic | Reply

Monday, December 01, 2008 1:12 AM

Reverse Phone

Essay you are right.. All softwares are not 100% accurate...We have to take care in few locations..
thanks

SSN Locator Tunisia | Reply

Wednesday, December 03, 2008 12:16 PM

SSN Locator

NO NO..reverse phone, you wrong...
Ahmed was exactly right..we cannot convert this application into php..
thanks..

gel nails Slovakia | Reply

Wednesday, December 10, 2008 1:41 AM

gel nails

i appreciate this post..
Thank you sir
for sharing such a informative concept

bear hunting Singapore | Reply

Thursday, December 11, 2008 3:30 PM

bear hunting

thanks a lot ahmed..i tried alot in converting this code in php..but i failed Frown

nicole scherzinger United States | Reply

Sunday, December 14, 2008 1:10 AM

nicole scherzinger

oalah ga mudeng aku mas....

Corporate training Norway | Reply

Tuesday, December 16, 2008 11:30 PM

Corporate training

This is really an excellent code mate..really thanks a lot for sharing..

adult friendfinder United Kingdom | Reply

Thursday, January 08, 2009 2:36 PM

adult friendfinder

ASP.NET supports creating reusable components through the creation of User Controls. A User Control follows the same structure as a Web Form, except that such controls are derived from the System.Web.UI.UserControl class, and are stored in ASCX files. Like ASPX files, a ASCX contains static HTML or XHTML markup, as well as markup defining web control and other User Controls. The code-behind model can be used.

wow accounts Slovenia | Reply

Wednesday, January 21, 2009 12:14 PM

wow accounts

Saya masih bingung nih masalah keberadaan komponen-komponen  dengan Kontrol-kontrol yang ada di ASP.NET AJAX / Atlas...
Setau saya itu ada kontrol server dan client... kalo untuk komponen seperti apa yah..?

iklan baris Brunei Darussalam | Reply

Wednesday, January 21, 2009 2:00 PM

iklan baris

punya contoh ajax untuk validasi form ga mas

gmat Italy | Reply

Friday, January 23, 2009 5:20 AM

gmat

made me think alot

Games free Switzerland | Reply

Friday, January 23, 2009 11:50 AM

Games free

Durung mudeng mbah..., but tengkeyu. Terus diisi ben aku iso melu-melu pinter Laughing

CD Annuity United Kingdom | Reply

Saturday, January 24, 2009 6:42 PM

CD Annuity

Thanks for code ASP.net use ful for me to reuseable component throught the  creation of control.

Forsikring United States | Reply

Tuesday, January 27, 2009 7:14 PM

Forsikring

Thanks to all of you for Shairing reuseable component here.

gogi juice United States | Reply

Friday, January 30, 2009 12:18 AM

gogi juice


After an Ajax request, the HTML within some portions of the page (for ASP.NET Ajax this is the "update panel") are being completely re-rendered with new HTML and therefore it's impossible to keep client side state across Ajax Server Side event handlers. This can be seen by the fact that the Auto Completer in the ASP.NET Ajax Control library (which is an extension to ASP.NET Ajax) has to use WebServices to retrieve data instead of the far more intuitive way which would have been to use a server side event handler embedded as a method into the page the control resides within.

Gucci Clothes United Kingdom | Reply

Tuesday, February 03, 2009 6:49 PM

Gucci Clothes

Pada contoh di atas, terdapat baris System.

Rockaway, NJ Mercedes Benz Repairs United Kingdom | Reply

Thursday, February 05, 2009 9:01 PM

Rockaway, NJ Mercedes Benz Repairs

Great. It moved very fast, so i liked that i could pause it to catch up. I have watched several other AJAX presentations, but none that addressed the installation of the AJAX Control Toolkit for VS2008 so well. Thanks.


http://www.carserviceautorepair.com/
European maintenance and repairs from brakes, tune ups, front end alignment to engine overhaul, we do it all.

Precision Auto Services, Morris NJ United Kingdom | Reply

Thursday, February 05, 2009 9:35 PM

Precision Auto Services, Morris NJ

ASP.NET UpdatePanel controls enable you to build rich, client-centric Web applications. By using UpdatePanel controls, you can refresh selected parts of the page instead of refreshing the whole page with a postback. This is referred to as performing a partial-page update. A Web page that contains a ScriptManager control and one or more UpdatePanel controls can automatically participate in partial-page updates, without custom client script.


http://www.carserviceautorepair.com/
Experienced, certified mechanics for fine European cars and their owners.  

KVM Switches United States | Reply

Friday, February 06, 2009 12:54 PM

KVM Switches

I would like to say thanks to all of you shairing a useful information here. And want to know more about ASP.NET AJAX any information would be appriciated. Thanks in advance.

cheap calling cards United States | Reply

Saturday, February 07, 2009 3:08 AM

cheap calling cards

Ajax, or AJAX (Asynchronous JavaScript and XML), is a group of interrelated web development techniques used to create interactive web applications or rich Internet applications. With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page.

bolsa de trabajo Mexico | Reply

Saturday, February 07, 2009 11:36 AM

bolsa de trabajo

nice

dance wedding songs United States | Reply

Monday, February 09, 2009 3:57 PM

dance wedding songs

ASP.NET is built on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code using any supported .NET language.

Birch Tire and Auto Service United Kingdom | Reply

Tuesday, February 10, 2009 1:41 AM

Birch Tire and Auto Service

A class in the Microsoft AJAX Library that coordinates partial-page rendering in the browser. The PageRequestManager class asynchronously exchanges information with the server, and exposes events and methods for custom client script development.

Birch Tire and Auto Service United Kingdom | Reply

Tuesday, February 10, 2009 1:43 AM

Birch Tire and Auto Service

A major change since its inception includes the change of the root namespace from "Microsoft.Web" to "System.Web".

Add comment




  Country flag

biuquote
  • Comment
  • Preview
Loading