Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

ASP.NET AJAXとSPREADの連携

SPREAD for .NET Web Forms EditionのAJAXエンジンを活用する

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

目次

ASP.NET AJAXとの連携で広がる可能性-SPREADにポップアップカレンダーを表示する

 ここではASP.NET AJAXが提供するUpdatePanelとSPREADを使用してSPREADのセルにポップアップカレンダーを表示するサンプルアプリケーションを作成していきたいと思います。

準備

 これから作成するサンプルアプリケーションの作成には次の環境が必要です。

  • Visual Studio 2005(以下、VS2005)
  • ASP.NET 2.0 AJAX Extensions 1.0(こちらからダウンロードできます)
  • SPREAD for .NET 3.0J Web Forms Ed.(トライアル版をこちらからダウンロードできます)
  • Internet Explorer 7.0または 6.0(以下、IE)
  • Firefox 2.0(※必須ではありません)

プロジェクトの作成

 ASP.NET 2.0 AJAX Extensions 1.0をインストールするとVS2005に「ASP.NET AJAX-Enabled Web Site」という新しいプロジェクトテンプレートが追加されます。VS2005の[ファイル|新しいWebサイト]から「ASP.NET AJAX-Enabled Web Site」を選択してプロジェクトを作成します。

 ここでは次の内容でWebサイトを作成します。

場所 ファイルシステム
Webサイト名 FpCalendar
言語 Visual BasicまたはC#を選択してください

UpdatePanelを配置

 プロジェクトテンプレートに「ASP.NET AJAX-Enabled Web Site」を選択するとASP.NET AJAXに必要な設定が追加されたWebサイトが作成されます。

ASP.NET AJAXを使用するための記述が追加されています。
WebフォームにASP.NET AJAXのScriptManagerが追加されています。
  • Web.config
  • Default.aspx

 また、ツールボックスには新しく[AJAX Extender]というタブが追加されています。これから使用するUpdatePanelもこの中に格納されています。

 まず、UpdatePanelをWebフォームに配置しましょう。標準のサーバコントロールと同様、ダブルクリックするかドラッグ&ドロップすることで配置できます。

UpdatePanelにSPREADを配置

 次にUpdatePanelの中にSPREADを配置します。UpdatePanel内をクリックするとカーソルが表示されます。この状態でツールボックスのSPREADをダブルクリックするとSPREADをUpdatePanelの中に配置できます。

 また、ファイルシステムにWebサイトを作成した場合、WebサイトはVS2005の開発サーバで実行されます。この場合、SPREADが使用するスクリプトやイメージファイルをWebサイトにコピーし、Web.configに設定する必要があります。

 スクリプトやイメージファイルは「fp_client」フォルダに格納されています。

<Program Files Folder>\Common Files\FarPoint Technologies\SpreadNETWebv3\fp_client
  • 場所

 「fp_client」フォルダをWebサイトのフォルダにコピーし、Web.configに次の記述を追加します(※Web.configにはASP.NET AJAXで必要な設定が記述されています。間違えてこれらの記述を変更してしまわないように注意しましょう)。「fp_client」に関する記述はWeb.configの最後にある「</configuration>」タグの1つ前に挿入します。

 :
  <appSettings>
    <add key="fp_client" value="fp_client"/>
  </appSettings>
</configuration>

UpdatePanelにCalendarを配置

 次にCalendarをUpdatePanelに配置します。SPREADと同様にUpdatePanel内をクリックし、ツールボックスのCalendarをダブルクリックします。

SPREADとCalendarの連携

 ここまでで必要なコントロールはすべてWebフォームに配置しました。これからSPREADとCalendarを連携するためのコーディングに移ります。次の3つの段階に分けて、順番にコーディングをしていきましょう。

  1. SPREADのイベントでCalendarを表示する。
  2. Calendarで選択された日付をSPREADに設定する。
  3. その他

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

著者プロフィール

  • グレープシティ株式会社(グレープシティカブシキガイシャ)

     宮城県仙台市に本社を構えるグレープシティでは、日本の業務に適したシステムをより早く開発するためのソフトウェアを提供しています。エンドユーザーの利用しやすさ、幅広いユーザー環境への対応、そして何よりプログラマの作業を軽減することを一番に目指しています。 公式サイト...

バックナンバー

連載:現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(SPREAD)

もっと読む

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