Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

RIAへの第一歩としてのjQuery

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2012/12/05 14:00

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

目次

RIAの必要性

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

図1:カレンダーからの日付選択
図1:カレンダーからの日付選択
図2:ドロップダウンリストの動的変更
図2:ドロップダウンリストの動的変更

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

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

図3: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" />

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 高野 将(タカノ ショウ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

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

もっと読む

All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5