このサンプルは、マイクロソフトのAjax Client TemplatesとjQueryのAjax APIを利用して書籍データをul/li要素にバインドして表示します。書籍データは、ズームインしたりショッピングカートに追加できるようにします。書籍のカバー左下の拡大鏡のアイコンをクリックするとサムネイルを拡大表示します。右下の[+]のアイコンをクリックするとショッピングカートに追加します。書籍のカバーをドラッグ&ドロップしてカートに入れることもできます。[Switch Theme]をクリックするとテーマ(スタイルシート)を書き換えることができます。選択したテーマは、クッキーに保存して再訪問したときに復元します。
それから、カートはドラッグして任意の場所に移動したり、リサイズすることができます。
このサンプルは、ul/li要素にバインドする書籍データをWebサービス経由(非同期)で取得しますので、Webページのロードが格段に高速化されます。Webサービスのリクエストが完了すると書籍データが表示されます。
// DataViewを作成する
var tableView = Sys.create.dataView('#books');
// 非同期で書籍データをリクエストする
$.ajax({
type: 'POST',
url: 'msAjax/ajaxBookshop/BookService.asmx/GetBooks',
data: '{}',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function(books) {
// JSON形式の書籍データをul/li要素にバインドする
tableView.set_data(books);
// 書籍をカートに入れる機能を追加する
shoppingCart();
},
error: function(obj, err) {
alert(err);
}
});