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

Gunakan jQuery untuk Mendapatkan Client ID ASP.NET Server Control

jQuery merupakan salah satu library JavaScript yang sangat handal. Berdasarkan informasi dari blog ScottGu di http://weblogs.asp.net/scottgu/archive/2008/09/28/jquery-and-microsoft.aspx, menyatakan bahwa jQuery akan diintegrasikan dengan ASP.NET Ajax. Kemampuan jQuery untuk melakukan query terhadap DOM sangat membantu dalam penulisan kode JavaScript. Dengan jQuery tidak perlu lagi hawatir terhadap perbedaan penulisan pada beberapa browser, cukup dengan satu syntax akan berjalan dengan baik di beberapa browser populer.

Dalam tulisan ini saya akan menunjukkan kemampuan jQuery dalam melakukan query DOM yang di-generate oleh ASP.NET Server Control. Permasalahan utama adalah server control akan membangkitkan client ID secara dynamic jika control tersebut berada di dalam control lain.

Contoh, jika kita membuat page di dalam Master Page, kode server control dalam page berada di dalam Content place holder di berikut:

<asp:Content ID="DefaultContainer" ContentPlaceHolderID="cpMain" runat="server"> <asp:TextBox ID="TextBox1" runat="server" Text="Test"></asp:TextBox> </asp:Content>

akan terender di browser menjadi

<input name="ctl00$cpMainTextBox1" type="text" value="Test" id="ctl00_cpMain_TextBox1" />

Untuk mendapatkan DOM dari input box di atas dari JavaScript tidak dapat dilakukan dengan menyebutkan ID control secara langsung dengan code berikut.

<script type="text/javascript"> <!-- var textBox1 = document.getElementById('TextBox1'); // --> </script>

Control ID akan secara otomatis berubah menjadi unique ID seperti terlihat pada hasil render code di atas sehingga kode getElementById tidak akan pernah menemukan DOM yang dimaksud. Untuk menangani masalah ini dapat dilakukan dengan menuliskan kode JavaScript dalam satu file dengan halaman (file .aspx). Contoh:

<script type="text/javascript"> <!-- var textBox1 = document.getElementById('<%= TextBox1.ClientID %>'); // --> </script>

Dengan cara tersebut memang bisa tapi halaman jadi tampak semrawut karena campur aduk antara tag HTML dan JavaScript. Proses debugging JavaScript dengan metode tersebut juga lebih sulit karena break point tidak bisa diset sebelum halaman dijalankan. Dengan menggunakan jQuery, untuk mendapatkan client ID dari server control dapat dilakukan dengan cara:

<script type="text/javascript"> <!-- var textBox1 = $("input[name$='TextBox1']"); // --> </script>

Kode di atas artinya melakukan query terhadap semua element INPUT yang memiliki attribute name dengan akhiran "TextBox1". Apapun prefix yang dirender oleh ASP.NET, TextBox1 akan selalu terender sebagai akhiran client ID. Dengan menggunakan jQuery, tidak perlu lagi kode JavaScript menjadi satu dalam halaman HTML. Hal ini mempermudah proses debugging dan meningkatkan performance karena kode JavaScript dapat di-cache oleh browser / server.


Tags:
Categories: ASP.NET | JavaScript
Permalink | Comments (12) | Post RSSRSS comment feed

Comments

Dityo Nurasto India | Reply

Friday, October 10, 2008 12:02 PM

Dityo Nurasto

Hehe property .ClientID adalah penyelamat hidup developer Smile. Denger - denger, katanya team Microsoft mau integrasi jQuery ke dalam Visual Studio yah mas?

Oh yah, belum lebaran nih. Mohon maaf lahir dan batin.

Thanks for share.

European Toxic Clan United States | Reply

Sunday, January 11, 2009 12:05 AM

European Toxic Clan

Walkthrough: Developing and Using a Custom Server Control

This walkthrough shows you how to create and compile a custom ASP.NET server control and use it in a page.

During this walkthrough you will learn how to:

    *

      Create an ASP.NET server control.
    *

      Add metadata to the control and its members to control security and design-time behavior.
    *

      Use the App_Code directory in an ASP.NET Web site to test your control without manual compilation steps.
    *

      Specify a tag prefix in a configuration file and in the control's assembly.
    *

      Compile the control into an assembly and add it to the Bin directory.
    *

      Embed a bitmap into the control's assembly as the toolbox icon for a visual designer.
    *

      Use the compiled control in a page.

Charlotte Internet Marketing United States | Reply

Monday, January 26, 2009 1:06 AM

Charlotte Internet Marketing

Although best known for its use in websites (as client-side JavaScript), JavaScript is also used to enable scripting access to objects embedded in other applications

Grace United States | Reply

Monday, January 26, 2009 4:08 PM

Grace

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.

dafie Indonesia | Reply

Sunday, February 01, 2009 8:38 AM

dafie

makasih mas..

Rockaway, NJ Mercedes Benz Repairs United Kingdom | Reply

Friday, February 06, 2009 12:55 AM

Rockaway, NJ Mercedes Benz Repairs

The query string  “List={GUID}” has corresponden SPContext.List , and query string “List={GUID}&ID={ItemID}” has the corresponden SPContext.Item. SPContext.List is SPList and SPContext.Item is SPListItem that can be obtained easily if you follow the convention.

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

Gift Ideas United States | Reply

Tuesday, February 10, 2009 1:13 AM

Gift Ideas

A fast, concise, library that simplifies how to traverse HTML documents, handle events, perform animations, and add AJAX.

Birch Tire and Auto Service United Kingdom | Reply

Tuesday, February 10, 2009 3:25 AM

Birch Tire and Auto Service

Good Year, Toyo, Kumho and other great tire brands in stock.  All common factory maintenance services are available.

Nutria Eko Indonesia | Reply

Friday, May 15, 2009 5:04 PM

Nutria Eko

Salam kenal, klo ke timika kita bisa ketemu mas?

Ahmad Masykur Indonesia | Reply

Wednesday, June 17, 2009 6:17 PM

Ahmad Masykur

Salam kenal juga. Wah... saya belum ada kesempatan ke Timika.

Sagi Arsyad Indonesia | Reply

Wednesday, June 17, 2009 5:52 PM

Sagi Arsyad

terima kasih mas, artikenya sangat membatu saya yang kebetulan mencari info ini Smile

Ahmad Masykur Indonesia | Reply

Wednesday, June 17, 2009 6:19 PM

Ahmad Masykur

BTW, lagi bikin apa mas? Pake ASP.NET 4.0 bisa diatur client-ID-nya sesuai kebutuhan.

Add comment




  Country flag

biuquote
  • Comment
  • Preview
Loading