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