RIAへの第一歩としてのjQuery

実例で学ぶASP.NET Webフォーム業務アプリケーション開発のポイント 第7回

　本連載ではツールやフレームワークの機能を最大限利用しつつ、保守、開発効率を意識した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 ライブラリ