Masih menggunakan UpdatePanel untuk membuat halaman web "seakan-akan" mendukung Ajax? UpdatePanel bukan Ajax yang sebenarnya tapi hanya partial rendering saja. Terdapat dua jenis template ajax pada teknologi Microsoft. Pertama server side template yang dibungkus oleh UpdatePanel. Dan yang kedua adalah client side template yang terdapat pada ASP.NET Ajax 4.0 (saat ini masih preview 3). Dalam tulisan kali ini saya akan menunjukkan bagaimana mudahnya bikin ajax dengan client template ASP.NET Ajax 4.0.
Untuk membuat client template, yang dibutuhkan adalah.
- ASP.NET Ajax 4.0 Preview 3 (http://www.codeplex.com/aspnet)
- Ajax-Enabled WCF Service sebagai datasource
- Html page
Langkah langkah pembuatan ASP.NET Client Template.
Buat class StockInfo.cs
using System.Runtime.Serialization;
namespace AjaxClientTemplate
{
[DataContract]
public class StockInfo
{
[DataMember]
public string Symbol { get; set; }
[DataMember]
public string Quote { get; set; }
[DataMember]
public string Change { get; set; }
[DataMember]
public string Day { get; set; }
[DataMember]
public string Time { get; set; }
}
}
Buat WCF Service
Buat Ajax-Enable WCF Service dengan add new item --> Ajax Enabled WCF Service dan ganti isinya dengan
using System.Collections.Generic;
using System.Linq;
using System.ServiceModel;
using System.ServiceModel.Activation;
namespace AjaxClientTemplate
{
[ServiceContract(Namespace = "contoh.com")]
[AspNetCompatibilityRequirements(
RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class StockService
{
// Add [WebGet] attribute to use HTTP GET
[OperationContract]
public IEnumerable<StockInfo> GetStocks()
{
var stocks = new List<StockInfo>
{
new StockInfo
{
Symbol = "FCX",
Quote = "Freeport McMoRan",
Change = "3.72 (16.69%)",
Day = "21.50 - 26.05",
Time = "Nov 13"
},
new StockInfo
{
Symbol = "YHOO",
Quote = "Yahoo! Inc",
Change = "0.81 (7.83%)",
Day = "9.76 - 11.17",
Time = "Nov 13"
},
new StockInfo
{
Symbol = "GOOG",
Quote = "Google Inc",
Change = "21.08 (7.24%)",
Day = "280.00 - 313.00",
Time = "Nov 13"
}
};
return stocks.AsEnumerable();
}
}
}
Buat Halaman Html
Pada halaman html tambahkan MicrosoftAjax.js (atau MicrosoftAjax.debug.js untuk versi debug) pada project dengan add new existing item. File ini biasanya terdapat di C:\Program Files\Microsoft ASP.NET 3.5 Extensions\MicrosoftAjaxLibrary\System.Web.Extensions\3.6.0.0\3.6.20830.0
Tambahkan juga file MicrosoftAjaxTemplates.js (atau MicrosoftAjaxTemplates.debug.js untuk versi debug) yang didownload dari http://www.codeplex.com/aspnet. Pada halaman html referensikan kedua file javascript tersebut pada bagian header.
<script type="text/javascript" src="MicrosoftAjaxAdoNet.debug.js" ></script>
<script type="text/javascript" src="MicrosoftAjaxTemplates.debug.js" ></script>
Buat style sys-template dengan style display: none untuk membuat template tidak ditampilkan sebelum di-bind.
<style type="text/css">
.sys-template { display:none; visibility:hidden; }
</style>
Tambahkan beberapa namespace pada body tag.
<body
xmlns:sys="BLOCKED SCRIPTSys"
xmlns:dataview="BLOCKED SCRIPTSys.UI.DataView"
sys:activate="*">
Terakhir buat template untuk menampilkan data.
<table border="1">
<thead>
<tr>
<td>Symbol</td>
<td>Quote</td>
<td>Change</td>
<td>Day</td>
<td>Time</td>
</tr>
</thead>
<tbody id="stockListView" class="sys-template" sys:attach="dataview"
dataview:serviceuri="StockService.svc"
dataview:query="GetStocks">
<tr>
<td>{{Symbol}}</td>
<td>{{Quote}}</td>
<td>{{Change}}</td>
<td>{{Day}}</td>
<td>{{Time}}</td>
</tr>
</tbody>
</table>
Hasil akhir halaman tersebut seperti terlihat pada gambar berikut.
Dengan Web Development Helper dapat dilihat bahwa data yang dikirim dari server berupa JSON string, bukan html seperti pada UpdatePanel.
Dengan menggunakan ASP.NET Ajax client template, aplikasi jauh lebih cepat daripada UpdatePanel karena hanya data yang ditransmisikan antara client dan server. Ini ajax sebenarnya, bukan ajax bohong-bohongan dengan UpdatePanel.
Source-code contoh tersebut dapat diunduh dari link di bawah