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

ASP.NET Ajax Client Template | Bener-bener Ajax

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.

  1. ASP.NET Ajax 4.0 Preview 3 (http://www.codeplex.com/aspnet)
  2. Ajax-Enabled WCF Service sebagai datasource
  3. 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="javascript:Sys" xmlns:dataview="javascript:Sys.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.

image

Dengan Web Development Helper dapat dilihat bahwa data yang dikirim dari server berupa JSON string, bukan html seperti pada UpdatePanel.

image

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


Categories: ASP.NET AJAX
Permalink | Comments (7) | Post RSSRSS comment feed

Comments

geeks.netindonesia.net | Reply

Monday, November 17, 2008 12:57 PM

pingback

Pingback from geeks.netindonesia.net

ASP.NET Ajax Client Template | JavaScript Client Binding - Ahmad Masykur

Busby SEO Test!!! United States | Reply

Wednesday, December 24, 2008 11:54 PM

Busby SEO Test!!!

mas, klo mo belajar BE.NET dari a-z dimana ya?

Plinian Webhotel United States | Reply

Tuesday, January 13, 2009 11:51 PM

Plinian Webhotel

ASP.NET is a web application framework developed and marketed by Microsoft to allow programmers to build dynamic web sites, web applications and web services. It was first released in January 2002 with version 1.0 of the .NET Framework, and is the successor to Microsoft's Active Server Pages (ASP) technology. ASP.NET is built on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code using any supported .NET language.

Malta Hotels United States | Reply

Tuesday, January 20, 2009 11:38 AM

Malta Hotels

My first attempt at using ASP.NET AJAX 4.0's proposed client-side templating to render JSON data onto a client-side HTML template, similar to my previous ...

College Football Tickets United Kingdom | Reply

Friday, January 23, 2009 1:53 PM

College Football Tickets

ASP.NET Ajax Client Template. Not to be verify this.

Busby SEO Test Post United States | Reply

Sunday, January 25, 2009 1:54 AM

Busby SEO Test Post

aku singgah lagi nih, tapi malah makin bingung belajar ASP.net Laughing

Kampanye Damai Pemilu Indonesia 2009 Indonesia | Reply

Friday, February 06, 2009 2:31 AM

Kampanye Damai Pemilu Indonesia 2009

tetep belum paham, harus banyak belajar lagi nih Frown

Add comment




  Country flag

biuquote
  • Comment
  • Preview
Loading