Kali ini saya akan sharing singkat saja mengenai bagaimana melakukan invoke ASP.NET Web Services menggunakan jQuery 1.5. Mungkin ada pertanyaan kenapa saya cantumkan versi jQuery. Di sini karena option yang digunakan spesifik untuk jQuery 1.5.x, untuk jQuery 1.4.x dapat menggunakan mekanisme yang mirip, namun tidak saya jelaskan di sini.
Pertanyaan lain kenapa kita harus menggunakan jQuery, toh bisa langnsung diregister di ScriptManager dan panggil selayaknya method biasa? Memang benar, dengan meregister service kita di ScriptManager, kita dengan mudah memanggil web services seperti memanggil method biasa. Namun ada ongkos yang harus dibayar dibalik kemudahan itu. ScriptManager akan membuat javascript proxy untuk membungkus web service method supaya bisa dipanggil selayaknya method di C#. Proxy ini akan didownload terpisah sehingga membutuhkan rountrip ke server yang tentu saja response time lebih lama.
Di jQuery, ada satu fungsi untuk melakukan panggilan ke AJAX services yaitu $.ajax. Sebagai contoh, kita buat WebService sebagai berikut.
[System.Web.Script.Services.ScriptService]
public class MyService : System.Web.Services.WebService
{
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public Employee GetEmployee(int employeeId)
{
return new Employee
{
EmployeeId = employeeId,
EmployeeName = "Fulan bin Fulan",
HireDate = new DateTime(2011, 1, 1)
};
}
}
public class Employee
{
public int EmployeeId { get; set; }
public string EmployeeName { get; set; }
public DateTime HireDate { get; set; }
}
Halaman HTML-nya kita buat sebagai berikut.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
<form>
<div>
<label for="">ID karyawan:</label>
<input type="text" id="EmployeeID" />
<input type="button" id="Tampilkan" value="Tampilkan"/>
<div id="Display">
<div id="EmpID"></div>
<div id="EmpName"></div>
<div id="EmpHireDate"></div>
</div>
<script type="text/javascript" src="Scripts/jquery-1.5.min.js"></script>
<script type="text/javascript">
$("#Tampilkan").click(function() {
var employeeId = parseInt($("#EmployeeID").val());
$.ajax("MyService.asmx/GetEmployee",
{
data: "{ \"employeeId\": " + employeeId + "}",
dataType: "json",
type: "POST",
contentType: "application/json",
success: function(result) {
$("#EmpID").text("ID : " + result.d.EmployeeId);
$("#EmpName").text("Nama :" + result.d.EmployeeName);
$("#EmpHireDate").text("Tanggal gabung : " + result.d.HireDate);
}
});
});
</script>
</div>
</form>
</body>
</html>
Kita simak contoh kode di atas. Pada property data, data harus dalam format JSON string, jika masih berupa JSON object, harus diserialize terlebih dahulu ke dalam string. Di bagian success: function(result), pembacaan data harus melalui property d, hal ini karena response dari ASP.NET Web Services selalu berada di dalam property d. Setelah dijalankan akan tampil sebagai berikut
Dari gambar di atas, kenapa tanggalnya berupa kode angka? Hal ini disebabkan karena tanggal dalam JSON format ASP.NET direpresentasikan dalam tick yang berupa integer. Untuk menterjemahkan ke dalam tanggal yang sebenarnya kita perlu converter. Ubah kodenya sedikit dengan menambahkan option converters menjadi seperti kode berikut. Dengan converters kita juga bisa menghilangkan property d untuk mempermudah pembacaan di bagian sucess.
$("#Tampilkan").click(function() {
var employeeId = parseInt($("#EmployeeID").val());
$.ajax("MyService.asmx/GetEmployee",
{
data: "{ \"employeeId\": " + employeeId + "}",
dataType: "json",
type: "POST",
contentType: "application/json",
converters: {
"text json": function(data) {
var msg;
// replace date pattern with date initialization
data = data.replace(/\"\\\/Date\((\d+)\)\\\/\"/g, "new Date($1)");
// use internal browser JSON function if available
if (typeof (JSON) !== 'undefined' && typeof (JSON.parse) === 'function') {
msg = JSON.parse(data);
} else {
msg = eval('(' + data + ')');
}
if (msg.hasOwnProperty('d'))
return msg.d;
else
return msg;
}
},
success: function(result) {
$("#EmpID").text("ID : " + result.EmployeeId);
$("#EmpName").text("Nama : " + result.EmployeeName);
$("#EmpHireDate").text("Tanggal gabung : " + result.HireDate);
}
});
});
Dengan cara tersebut kita bisa menghindari penggunaan ScriptManager di dalam page guna meningkatkan performance aplikasi web, karena hanya script yang diperlukan saja yang akan didownload ke client. Setelah diubah, hasilnya sebagai berikut.
Semoga bermanfaat