次の方法で共有

チュートリアル : AJAX 対応データ アプリケーションの作成

  • [アーティクル]

更新 : 2007 年 11 月

このチュートリアルでは、TO DO リストまたはタスク一覧として機能する AJAX 対応 Web アプリケーションを作成する方法について説明します。これにより、一覧の作成、管理、および削除とその一覧内の各項目に使用する基本ユーザー インターフェイスを作成できます。挿入、更新、削除、並べ替え、およびページングの各操作はすべて、AJAX を使用する UpdatePanel コントロール内で行われます。

UpdatePanel コントロールを使用すると、ページで非同期ポストバックを有効にできます。既定では、ASP.NET はポストバックが発生したときにページ全体を更新します。ただし、UpdatePanel コントロールを使用して非同期ポストバックを作成する場合は、UpdatePanel コントロール内にあるページ要素のみが変更されます。これにより、ページがより動的になりすばやく実行され、充実したユーザー エクスペリエンスを提供できます。

このチュートリアルでは、以下のタスクを行います。

  • SQL データベースを作成し、データを追加する。

  • ページに LinqDataSource コントロールを追加する。

  • LINQ to SQL クラス ファイルを追加する。

  • ListView コントロールを使用して、データを表示、編集、および削除する。

  • LinqDataSource コントロールを使用して、統合言語クエリ (LINQ: Language-Integrated Query) によってデータベースに接続する。詳細については、「統合言語クエリ (LINQ: Language-Integrated Query)」を参照してください。

  • UpdatePanel コントロールを使用して、ページに AJAX 機能を追加する。

前提条件

このチュートリアルを実行するには、以下が必要です。

  • Microsoft Visual Studio 2008 または Visual Web Developer 2008 Express Edition。ダウンロード情報については、.NET Framework Developer Center の Web サイトを参照してください。

  • 使用するコンピュータに SQL Server Express Edition がインストールされていること。SQL Server がインストールされている場合、SQL Server を代わりに使用することもできますが、いくつかの手順を微調整する必要があります。

Web サイトの作成

チュートリアルのこの部分では、Web サイトを作成し、そこにページを追加します。次のセクションでは、データベースに接続します。「チュートリアル : Visual Web Developer での基本的な Web ページの作成」などの手順を実行して Web サイトを作成済みの場合は、このチュートリアルでその Web サイトを使用できます。それ以外の場合は、次の手順に従って、新しい Web サイトを作成します。

新しいファイル システム Web サイトを作成するには

  1. Visual Web Developer で、[ファイル] メニューの [新しい Web サイト] をクリックします。

    [新しい Web サイト] ダイアログ ボックスが表示されます。

  2. [Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。

  3. [場所] ボックスで、[ファイル システム] をクリックし、Web サイトのページを格納するフォルダの名前を入力します。

  4. [言語] ボックスの一覧で、[Visual Basic] または [Visual C#] をクリックし、[OK] をクリックします。

    Bb763182.alert_note(ja-jp,VS.90).gifメモ :

    選択したプログラミング言語はその Web サイトの既定言語になります。ただし、プログラミング言語をページごとに設定することもできます。

    Visual Web Developer によりフォルダが作成され、Default.aspx という名前の新しいページが作成されます。

SQL Server データベースの新規作成

ここまでの手順で、Web サイトが作成されました。次の手順では、データベースを作成し、サーバー エクスプローラでデータベースへの参照を追加します (Visual Web Developer 2008 Express Edition では、サーバー エクスプローラはデータベース エクスプローラという名前になります)。サーバー エクスプローラにデータベースを追加すると、Visual Studio を使用してテーブル、ストアド プロシージャ、ビューなどを追加できます。手動で、または [クエリ ビルダ] ウィンドウをグラフィカルに使用して、テーブル データを表示したり、独自のクエリを作成したりできます。

プロジェクトにデータベースを追加するには

  1. ソリューション エクスプローラで、Web サイトの名前を右クリックし、[新しい項目の追加] をクリックします。

    [新しい項目の追加] ダイアログ ボックスが表示されます。

  2. [SQL データベース] を選択し、データベースに Tasks.mdf という名前を付け、[OK] をクリックします。

  3. Visual Studio で、データベースを App_Data フォルダに格納するかどうかを確認するメッセージが表示されたら、[はい] をクリックします。

データベースのスキーマとサンプル データの作成

データベースのデザイン機能と編集機能を使用すると、タスク項目を格納する新しいテーブルのスキーマを作成できます。

データベースのスキーマとサンプル データを作成するには

  1. ソリューション エクスプローラで、[App_Data] フォルダを開き、Tasks.mdf をダブルクリックします。

    サーバー エクスプローラ (またはデータベース エクスプローラ) に Tasks データベース ツリー階層が表示されます。

  2. [テーブル] フォルダを右クリックし、[新しいテーブルの追加] をクリックします。

  3. データベース テーブル エディタで、テーブル内に次の列を作成します。

    列名

    データ型

    プロパティ

    taskId

    int

    Null を許容 : いいえ

    taskName

    nvarchar(50)

    Null を許容 : いいえ

    dateCreated

    datetime

    Null を許容 : いいえ

    isComplete

    bit

    Null を許容 : いいえ

  4. taskid を含む行を右クリックし、[主キーの設定] をクリックします。

  5. taskid 行が選択されている状態で、[列のプロパティ] タブの [IDENTITY の指定] セクションを開き、[(Is Identity)] を [はい] に設定します。

  6. 作成したテーブルを TasksList という名前で保存します。

  7. サーバー エクスプローラでテーブルを右クリックし、[テーブル データの表示] をクリックします。

    データを表示および追加できるウィンドウが表示されます。

  8. 4 つまたは 5 つのレコードをテーブルに追加し、データベース デザイナを閉じます。

    taskid 列は ID 列であり、値は自動的に割り当てられるため、値を指定する必要はありません。isComplete フィールドに False または True を指定する必要があります。

データ アクセス コントロールの作成

ここでは、LinqDataSource コントロールを使用して、データベース エンティティを表すクラスを作成します。作成するコントロールとクラスは、このチュートリアルで使用するデータ アクセス層です。

LinqDataSource コントロールは、ASP.NET データ ソース コントロールのアーキテクチャを使用して、統合言語クエリ (LINQ: Language-Integrated Query) を Web 開発者に公開します。LinqDataSource コントロールは、データベース内のオブジェクトを選択、挿入、更新、および削除するためのコードを作成します。LINQ は、オブジェクト指向プログラミングの原則をリレーショナル データに適用します。LINQ は、さまざまな種類のデータ ソースのデータを照会および更新するための統一プログラミング モデルを提供し、C# 言語および Visual Basic 言語にデータ機能を直接拡張します。LINQ の詳細については、「統合言語クエリ (LINQ: Language-Integrated Query)」を参照してください。

SQL データ コンテキスト オブジェクトへの Tasks データベースのマップ

データ アクセス層の作成を開始するには、型指定されたデータセットをプロジェクトに追加します。

TasksList テーブルのクラスを作成するには

  1. Web サイトに App_Code フォルダがない場合は、ソリューション エクスプローラで Web サイト名を右クリックし、[ASP.NET フォルダの追加] をクリックして、[App_Code] をクリックします。

  2. App_Code フォルダを右クリックし、[新しい項目の追加] をクリックします。

  3. [Visual Studio にインストールされたテンプレート] で、[LINQ to SQL クラス] を選択し、ファイル名を "Tasks.dbml" に変更します。次に、[追加] をクリックします。

    [オブジェクト リレーショナル デザイナ] が表示されます。

  4. サーバー エクスプローラで、TasksList テーブルを [オブジェクト リレーショナル デザイナ] ウィンドウへドラッグします。

  5. Tasks.dbml ファイルを保存します。

    ファイルを保存すると、Visual Studio により Tasks.dbml の下の App_Code フォルダに 2 つのファイルが作成されます。最初のファイルは Tasks.dbml.layout です。2 番目のファイルは、Tasks.dbml ファイルを作成したときに選択した言語に応じて、Tasks.designer.cs または Tasks.designer.vb になります。

  6. ソリューション エクスプローラで、Tasks.designer.cs ファイルまたは Tasks.designer.vb ファイルを開きます。

    コードに TasksDataContext と TasksList という名前のクラスが含まれていることを確認します。TasksDataContext クラスはデータベースを表し、TasksList クラスはデータベース テーブルを表します。TasksDataContext クラスのパラメータなしのコンストラクタは、Web.config ファイルから接続文字列を読み取ります。

  7. Web.config ファイルを開きます。

    connectionStrings 要素に Tasks.mdf データベースへの接続文字列が追加されていることを確認します。

  8. クラス ファイル、[オブジェクト リレーショナル デザイナ] ウィンドウ、および Web.config ファイルを閉じます。

LinqDataSource コントロールの作成および構成

データベース テーブル、およびデータベース エンティティを表すクラスを作成したので、ASP.NET Web ページで LinqDataSource コントロールを使用してデータベースにアクセスします。

LinqDataSource コントロールを作成して構成するには

  1. Default.aspx ページを開くか、そのページに切り替えます。

  2. デザイン ビューに切り替えます。

  3. LinqDataSource コントロールをページにドラッグします。

    ID プロパティは "LinqDataSource1" のままにします。

  4. [LinqDataSource タスク] スマート タグ パネルの [データ ソースの構成] をクリックします。

    Bb763182.alert_note(ja-jp,VS.90).gifメモ :

    スマート タグ パネルが表示されていない場合、LinqDataSource コントロールを右クリックして、[スマート タグの表示] をクリックします。

  5. [コンテキスト オブジェクトの選択] ボックスの一覧で、TasksDataContext を選択し、[次へ] をクリックします。

  6. [テーブル] ボックスの一覧で、[TasksLists(Table<TasksList>)] を選択し、[完了] をクリックします。

  7. [LinqDataSource タスク] メニューの [削除を有効にする]、[挿入を有効にする]、および [更新を有効にする] を選択します。

    データを選択するためにデータベース コマンドを指定する必要はありません。

  8. このページを保存します。

データ ソース コントロールの使用

ここでは、データベース テーブルをクラスにマップした LINQ to SQL クラスを使用するページにコントロールを追加します。また、LinqDataSource コントロールを使用して基本的なデータ アプリケーションを作成します。

ListView コントロールを追加して、SQL Server データベースのデータを表示します。次に、DropDownList コントロールを追加して、ListView コントロールに表示されるデータをフィルタ処理します。このチュートリアルの後半では、コントロールを UpdatePanel コントロールに配置して、非同期ポストバック機能を追加します。

ListView コントロールを使用したデータの表示

ListView コントロールは、DataList コントロールや Repeater コントロールと同様に、反復構造を持つデータを表示する場合に便利です。ただし、それらのコントロールとは異なり、ListView コントロールでは、編集、挿入、および削除の操作と、並べ替え機能およびページング機能がサポートされます。

ここでは、すべてのタスクを表示する ListView コントロールを追加します。後で、データをフィルタ処理できるドロップダウン リストを作成します。ListView コントロールは、データの表示形式を設定し、コンテンツの編集や更新、または新しいコンテンツの挿入に使用できるボタンを表示します。

ページに ListView コントロールを追加するには

  1. LinqDataSource コントロールを追加したページを開くか、このページに切り替えます。

  2. ツール バーの [データ] タブから、ListView コントロールをページにドラッグします。

  3. [ListView タスク] メニューの [データ ソースの選択] ボックスの一覧で、[LinqDataSource1] をクリックします。

    これにより、このチュートリアルの前半で構成した LinqDataSource コントロールに ListView がバインドされます。

  4. [ListView タスク] スマート タグ パネルの [ListView の構成] をクリックします。

  5. [ListView の構成] ダイアログ ボックスで、[編集を有効にする]、[挿入を有効にする]、[削除を有効にする]、および [ページングを有効にする] を選択します。

  6. [OK] をクリックします。

  7. このページを保存します。

データをフィルタ処理するための DropDownList コントロールの追加

表示するタスクを選択できるドロップダウン リストを作成することで、ListView コントロールに表示されるデータをフィルタ処理できます。この例では、アクティブなタスク、または完了したタスクを表示する一覧を作成します。

コードを ListView コントロールに追加すると、DropDownList コントロールでの選択内容に一致するレコードのみを表示する Where 句が自動的に生成されます。

データをフィルタ処理するためのコントロールを追加するには

  1. Default.aspx ページを開くか、Default.aspx ページに切り替えて、ソース ビューに切り替えます。

  2. form 要素内と ListView コントロールの上に、次のマークアップを追加します。

    <span id="filter">
  Current List Filter: 
  <asp:DropDownList ID="DropDownList1" 
    AutoPostBack="true" 
    runat="server">
  <asp:ListItem Text="Active" Value="False" />
  <asp:ListItem Text="Completed" Value="True" />
  </asp:DropDownList>
</span>
<hr id="separator" />

  3. LinqDataSource コントロールで、次の例に示すように AutoGenerateWhereClause プロパティを true に設定します。

    <asp:LinqDataSource ID="LinqDataSource1" runat="server" 
  ContextTypeName="TasksDataContext" 
  TableName="TasksLists" 
  EnableDelete="True" 
  EnableInsert="True" 
  EnableUpdate="True" 
  AutoGenerateWhereClause="true" >

  4. LinqDataSource コントロールの開始タグと終了タグの間に、Where パラメータの次のマークアップを追加します。

    <WhereParameters>
  <asp:ControlParameter 
    Name="isComplete" 
    ControlID="DropDownList1" 
    Type="Boolean" />
</WhereParameters>

  5. このページを保存します。

これでページをテストして、選択したデータが表示されるかどうかを確認できます。

ページをテストするには

  1. Ctrl キーを押しながら F5 キーを押して、ブラウザでページを表示します。

  2. ドロップダウン リスト ボックスの [完了] をクリックします。

    完了とマークされたタスクがある場合は、そのタスクのみが表示されます。

ページへの AJAX 機能の追加

ここでは、ページに ScriptManager コントロールを追加して、ASP.NET の AJAX 機能を有効にします。次に、ページに UpdatePanel コントロールを追加します。これにより、ページ全体のポストバックを行わなくても、ListView コントロールでタスクを実行できます。

ScriptManager コントロールの追加

UpdatePanel コントロールなどの ASP.NET AJAX 機能を使用するには、ページに ScriptManager コントロールを追加する必要があります。

ページに ScriptManager コントロールを追加するには

  1. Default.aspx ページを開くか、Default.aspx ページに切り替えて、ソース ビューに切り替えます。

  2. ツールボックスの [AJAX Extensions] タブで、ScriptManager コントロールをダブルクリックして、form 要素内のページに追加します。

UpdatePanel コントロールへの ListView コントロールの配置

この例では、UpdatePanel コントロール内に ListView を配置します。ListView コントロールの変更には、完全なポストバックは不要です。

UpdatePanel コントロール内に ListView コントロールを配置するには

  1. Default.aspx ページで、開始の <form> タグの直後に次のマークアップを追加します。

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>

  2. 終了の </form> タグの直前に次のコードを追加します。

    </ContentTemplate>
</asp:UpdatePanel>

    このコードにより、ListView コントロールと DropDownList コントロールの周囲に UpdatePanel コントロールが配置されます。

  3. このページを保存します。

ここでページを再びテストできます。

ページをテストするには

  • Ctrl キーを押しながら F5 キーを押してブラウザでページを表示します。

    リスト フィルタから [アクティブ] または [完了] を選択すると、完全なポストバックは発生せず、ListView には更新されたデータの一覧がちらつきなしで表示されます。

次の手順

このチュートリアルでは、データベースからタスクを追加、変更、および削除するために、LinqDataSource コントロールを使用してページに ListView を追加する方法について説明しました。次に、UpdatePanel コントロールを使用して AJAX 機能を追加しました。

データベースの操作方法の詳細については、「チュートリアル : カスタム ビジネス オブジェクトへのデータ バインディング
」、「チュートリアル : Visual Studio でのマスター/詳細 Web ページの作成」などのチュートリアルを参照してください。

参照

概念

LinqDataSource Web サーバー コントロールの概要

ASP.NET AJAX の概要

部分ページ レンダリングの概要