Pada tips kali ini kita akan membahas penggunaan JQuery untuk memanipulasi server control pada ASP.NET. Hasil yang diharapkan adalah pengalaman interaktivitas yang lebih baik untuk pengguna tanpa tambahan overhead di sisi server.
Untuk mendownload library JQuery anda dapat mengakses alamat http://jquery.com. Ada beberapa tipe file yang dapat didownload yaitu:
- Minified version : versi ini lebih disarankan untuk digunakan untuk lingkungan produksi karena memiliki ukuran file yang lebih kecil sehingga hanya dibutuhkan waktu yang sedikit untuk melakukan download.
- Uncompressed version : versi ini disarankan digunakan untuk lingkungan development, mempunyai ukuran yang lebih besar daripada minified version, tapi cocok untuk kebutuhan debugging pada fase development.
Ada dua cara untuk menggunakan JQuery library yaitu:
- Menggunakan library yang sudah dihosting seperti CDN (Community Development Networks) yang disediakan oleh vendor seperti Microsoft dan Google.
- Mendownload library JQuery dan menambahkan pada direktori aplikasi anda.
Penggunaan CDN lebih disarankan karena memiliki keuntungan dari segi performance karena mekanisme caching dan parallelism, namun jika anda hendak mendeploy aplikasi tersebut pada Intranet, maka disarankan mendownload dan mengkopi library tersebut pada direktori lokal aplikasi anda.
Berikut adalah beberapa contoh penggunaan JQuery dengan ASP.NET.
Menambahkan Default Teks pada TextBox
1. Buat ASP.NET Website dengan nama SampleJQuery1
2. Setelah website berhasil dibuat anda dapat melihat bahwa pada solution explorer sudah terdapat folder script yang berisi library JQuery.
3. Tambahkan web form baru tanpa memilih master page pada Website yang anda buat, beri nama halaman tersebut DefaultTeks.aspx. Kemudian tambahkan kode berikut:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Menambahkan Default Teks</title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var searchBox = $('#<%=txtSearch.ClientID %>');
searchBox.focus(function () {
if (searchBox.val() == this.title) {
searchBox.removeClass("teksDefault");
searchBox.val("");
}
});
searchBox.blur(function () {
if (searchBox.val() == "") {
searchBox.addClass("teksDefault");
searchBox.val(this.title);
}
});
searchBox.blur();
});
</script>
<style type="text/css">
.teksDefault { font-style:italic; color:#CCCCCC; }
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="text-align:center;">
<fieldset>
<asp:TextBox ID="txtSearch" ToolTip="Masukan Keyword disini"
CssClass="teksDefault" Width="200px" runat="server" />
<asp:Button ID="btnSearch" Text="Search" runat="server" />
</fieldset>
</div>
</form>
</body>
</html>
4. ClientID adalah id unik yang digenerate oleh ASP.NET untuk memberi nama server control ketika dirender agar tidak terjadi duplikasi ketika control tersebut diulang.
5. Pada saat event focus() akan dicek apakah textbox mempunyai nilai sama dengan title (tooltip akan dirender menjadi atribut title), jika nilai sama maka textbox akan dikosongkan.
6. Pada saat event blur() dicek apakah nilai pada textbox kosong, jika kosong maka nilai akan diset sama seperti nilai pada atribut title.
7. Jika halaman tersebut dijalankan maka anda akan melihat bahwa textbox control yang anda buat memiliki nilai default yang otomatis akan menghilang ketika user memasukan inputan.
Nantikan contoh penggunaan ASP.NET & JQuery pada tips berikutnya
Actual Training 