RIAへの第一歩としてのjQuery

CodeZine / 2012年12月5日 14時0分

図4:AJAXを用いたドロップダウンリストの動的変更

 本連載ではツールやフレームワークの機能を最大限利用しつつ、保守、開発効率を意識したWebフォームアプリケーションを開発する方法を学んでいきます。連載の最後に、今回と次回で昨今のWebアプリケーション開発では欠かせないものとなった、jQuery、AJAXを活用したRich Internet Application(RIA)の作成方法について学んでいきます。今回はjQueryについてです。

■RIAの必要性

 業務アプリケーションを作成していくと、画面内の項目を動的に変更させたいというケースが出てくることがよくあります。今回使用しているサンプルでいえば、日付をカレンダーから選択させたり、「場所」ドロップダウンリストを変更したら、「会議室」ドロップダウンリストを選択した場所の会議室に絞り込む、といったものです。

図1:カレンダーからの日付選択


図2:ドロップダウンリストの動的変更


●従来のWebアプリケーション

 ASP.NETが初めて世に登場した2002年は、Webアプリケーションといえば一度表示したページの内容は変えずに、動的に変えたい部分があればそのたびにPostBackを発生させて再表示するというのが当たり前でした。つまり、「場所」を変更するとPostBackが発生し、「会議室」だけでなくすべての項目を再表示していたわけです。

図3:PostBackによる動的変更


 しかし、ユーザーからは「画面がちらつく」、「スクロール位置が先頭に戻ってしまう」といった苦情が寄せられることも多く、いまいち使い勝手の良くないものでした。

 この問題を解決するためにPage.MaintainScrollPositionOnPostBackプロパティを使うという方法もありましたが、根本的な解決ではありませんでした。

Page.MaintainScrollPositionOnPostBackプロパティとは?
 上述の「スクロール位置が先頭に戻ってしまう」現象を回避するために用意されたプロパティで、@PageディレクティブでTrueに設定すると、PostBack後にPostBack前のスクロール位置を復元します。

<@Page Title="Default" Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" MaintainScrollPositionOnPostBack="True" />
Page.MaintainScrollPositionOnPostBack プロパティ - MSDN ライブラリ



■関連記事
RIAへの第一歩としてのjQuery
グラフを表示するjQueryプラグイン 後編
Adobe Edge Animateを触ってみよう!
【ADC MEETUP 06】インタラクティブなリッチコンテンツの制作を支援するライブラリ「CreateJS」
【ADC MEETUP 06】Webとアドビの切っても切れない関係

■記事全文へ

CodeZine

トピックスRSS

ランキング