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 | Select Command

ASP.NET Ajax client template juga memiliki fitur menarik yaitu select command sebagaimana GridView pada ASP.NET server control. Pada contoh post sebelumnya, saya telah tunjukkan bagaimana membuat sebuah client template pada sebuah table. Pada post kali ini saya akan buat baris pada table tersebut dapat dipilih dengan melakukan klik pada salah satu baris. Ada dua cara untuk melakukan hal ini, secara declarative dan imperative (JavaScript).

Object control DataView memiliki property selecteditemclass yang dapat diisi dengan class element yang dipilih. Property tersebut dapat diset secara declarative maupun imperative (JavaScript). Sebelum membuat DataView dapat dipilih, buat dulu class yang ditampilkan saat row terpilih. Class tersebut diberi nama selected-row

<style type="text/css"> .sys-template { display:none; visibility:hidden; } .selected-row { background: #ffff7f; color: Green; } </style>
Select Command secara Declarative

Untuk membuat DataView dapat dipilih secara declarative, tambahkan property sys:command="select" pada table row (TR) dan selecteditemclass property pada dataview seperti pada contoh berikut.

<tbody id="stockListView" class="sys-template" sys:attach="dataview" dataview:serviceuri="StockService.svc" dataview:query="GetStocks" dataview:selecteditemclass="selected-row"> <tr sys:command="select" style="cursor: pointer" > <td>{{Symbol}}</td> <td>{{Quote}}</td> <td>{{Change}}</td> <td>{{Day}}</td> <td>{{Time}}</td> </tr> </tbody>

Dengan hanya menambahkan property tersebut, sekarang table dapat dipilih (select) dan warna pada baris yang dipilih akan berubah.

Select Command secara Imperative

Penggunaan select command juga dapat dilakukan secara imperative dengan JavaScript. Perlakuannya sama antara declarative dan imperative. Pada cara imperative, row template ditambahkan attribute sys:command="select".

<tbody id="stockListView" class="sys-template"> <tr sys:command="select" style="cursor: pointer"> <td>{{Symbol}}</td> <td>{{Quote}}</td> <td>{{Change}}</td> <td>{{Day}}</td> <td>{{Time}}</td> </tr> </tbody>

Jangan lupa pada tag body juga ditambahkan namespace sys untuk supaya attribute sys dikenali dalam body html.

<body xmlns:sys="javascript:Sys">

Setelah semua attribute disiapkan, tinggal menambahkan property selectedItemClass pada object DataView.

var dataview = $create( Sys.UI.DataView, { serviceUri: "StockService.svc", query: "GetStocks", selectedItemClass: "selected-row" }, {}, {}, $get("stockListView") );

Tampilan baris yang dipilih akan seperti pada gambar di bawah

image

Dengan client template, pemprograman halaman html yang interactive menjadi lebih mudah.

Source-code contoh program ini dapat diunduh pada link di bawah.


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

ASP.NET Ajax Client Template | JavaScript Client Binding

Dari post sebelumnya, telah saya bahas mengenai ASP.NET Ajax 4.0 Client Template. Pada tulisan tersebut, saya bahas binding data tanpa koding javascript sedikitpun. Dengen client template memang sangat membatu dalam proses binding di sisi client. Binding tidak hanya bisa dilakukan secara declarative seperti pada post sebelumnya. Ada kalanya perlu dilakukan binding secara programming dengan JavaScript. Untuk melakukan binding dengan JavaScript, langkah persiapan yang dilakukan sama seperti pada declarative binding. Perbedaannya pada bagaimana cara membinding data dari datasource ke template.

Berikut saya jelaskan apa yang harus dilakukan untuk client binding dengan JavaScript. Kita asumsikan service dan template yang digunakan sama seperti pada post sebelumnya.

Pada halaman HTMl tidak perlu dideklarasikan XML namespace baru seperti pada metode declarative binding. Template masih tetap sama, hanya attribute sys:attach, dataview:serviceuri dan dataview:query tidak perlu ditulis lagi.

<body> <div> <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"> <tr> <td>{{Symbol}}</td> <td>{{Quote}}</td> <td>{{Change}}</td> <td>{{Day}}</td> <td>{{Time}}</td> </tr> </tbody> </table> </div> </body>

Selanjutnya tinggal  buat binding data dengan JavaScript. Attribute sys:attach, dataview:serviceuri dan dataview:query yang sebelumnya ditulis di deklarasi tag, sekarang digantikan dengan JavaScript object.

<script type="text/javascript"> function pageLoad() { $create( Sys.UI.DataView, { serviceUri: "StockService.svc", query: "GetStocks" }, {}, {}, $get("stockListView") ); } </script>

Kita dapat melakukan binding kapan saja apakah setelah menekan tombol tertentu atau pada waktu pageLoad seperti contoh di atas. Contoh kode untuk client binding dengan JavaScript ini dapat diunduh dari link di bawah.


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

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