次の方法で共有

チュートリアル : ListView Web サーバー コントロールを使用したデータの変更

  • [アーティクル]

更新 : 2007 年 11 月

ASP.NET ListView コントロールには、ユーザーがプログラミングを行うことなく、レコードを挿入、編集、または削除できるようにする組み込み機能が含まれています。

このチュートリアルでは、ListView コントロールを使用してデータを表示および更新する方法を示します。このチュートリアルでは、SqlDataSource コントロールを使用して、データ ソースから結果を取得し、更新を管理します。SqlDataSource コントロールは、ListView コントロールのデータ ソースとして機能します。

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

  • ListView コントロールに、データベースから返されたデータを表示します。

  • ListView コントロールにレコードを編集、挿入、および削除する機能を追加します。

前提条件

このチュートリアルを実行するための要件は次のとおりです。

  • Visual Studio 2008 または Visual Web Developer 2008 Express Edition。

  • SQL Server AdventureWorks データベースへのアクセス。SQL Server の AdventureWorks サンプル データベースをダウンロードし、インストールする方法については、Microsoft SQL Server の Web サイトの「Express Editions 用サンプル データベースのインストール」を参照してください。

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

    SQL Server が実行されているコンピュータにログオンする方法については、サーバー管理者にお問い合わせください。

  • AdventureWorks データベースへのアクセス権を持つ SQL Server アカウントのユーザー名とパスワード。

Web サイトの作成

「チュートリアル : Visual Web Developer での基本的な Web ページの作成」を完了して、Web サイトを既に作成している場合は、その Web サイトを使用して、次のセクションに移動できます。それ以外の場合は、次の手順に従って、新しい Web サイトおよびページを作成します。

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

  1. Visual Studio 2008 または Visual Web Developer 2008 Express Edition を開きます。

  2. [ファイル] メニューの [新規作成] をポイントし、[Web サイト] をクリックします。Visual Web Developer 2008 Express Edition を使用している場合は、[ファイル] メニューの [新しいWeb サイト] をクリックします。

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

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

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

    たとえば、フォルダ名として「C:\WebSites\ModifyData」と入力します。

  5. [言語] ボックスで、作業に使用するプログラミング言語をクリックします。

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

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

ListView コントロールを使用したユーザーによるデータの変更の有効化

ここでは、ページに ListView コントロールを追加し、AdventureWorks データベースの Department テーブルからデータを表示および変更するように構成します。

ListView コントロールでデータを表示および変更するには

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

  2. ソリューション エクスプローラで、App_Data フォルダを右クリックし、[既存項目の追加] をクリックします。

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

  3. AdventureWorks データベース ファイル (AdventureWorks_Data.mdf) がインストールされている場所を入力します。

    既定では、.mdf ファイルはパス C:\Program Files\Microsoft SQL Server\MSSQL.1\MSSQL\Data\AdventureWorks_Data.mdf にインストールされます。

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

    この手順では、プロジェクト内のデータベース ファイルのコピーを作成します。データベース ファイルは大きいため、データベースのコピーの作成が実用的ではない場合は、データベース ファイルに直接接続するなど、別の方法を使用してデータベースに接続できます。ただし、このチュートリアルでは、この方法は説明しません。

  4. Default.aspx ファイルに切り替えるか Default.aspx ファイルを開きます。

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

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

  7. [コモン ListView タスク] メニューで、[データ ソースの選択] ボックスの一覧の [<新しいデータ ソース>] をクリックします。[コモン ListView タスク] メニューを次の図に示します。

    データ ソース構成ウィザードが表示されます。データ ソース構成ウィザードを次の図に示します。

    データ ソース構成ウィザード

  8. [データベース] をクリックします。

    これにより、SQL Server などの OLE DB 互換データベースを含む、SQL ステートメントをサポートするデータベースからデータを取得するように指定します。

  9. [データ ソースに ID を指定します] ボックスに、既定のデータ ソース コントロール名 SqlDataSource1 が表示されます。この名前はそのままにしておいてかまいません。

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

    データ ソースの構成ウィザードが表示されます。

  11. [アプリケーションがデータベースへの接続に使用するデータ接続] で、一覧の AdventureWorks_Data.mdf をクリックします。

  12. [次へ] をクリックします。

    ウィザードに、接続文字列を構成ファイルに保存するためのページが表示されます。接続文字列を構成ファイルに格納すると、次の 2 つの利点があります。

    • この方がページ内に格納するよりも安全です。

    • 同じ接続文字列を複数のページで使用できます。

  13. [はい、この接続を次の名前で保存します] チェック ボックスがオンになっていることを確認して、[次へ] をクリックします既定の接続文字列名はそのままにしておいてかまいません。

    データ ソース構成ウィザードが表示されます。このウィザードで、データベースから取得するデータを指定できます。

  14. [カスタム SQL ステートメントまたはストアド プロシージャを指定する] をクリックします。データ ソースの構成ウィザードを次の図に示します。

    Select ステートメントの構成

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

    通常は、[テーブルまたはビューから列を指定します] を使用します。ただし、AdventureWorks データベースにはスキーマ名があるため、このチュートリアルではカスタム SQL ステートメントを作成します。

  15. [次へ] をクリックします。

  16. [カスタム ステートメントまたはストアド プロシージャを定義します] ページで、AdventureWorks データベースから部門データを取得するために、次の SQL クエリを入力します。

    SELECT  DepartmentID, Name, GroupName 
FROM    HumanResources.Department

    [クエリ ビルダ] をクリックし、[クエリ ビルダ] を使用してクエリを作成した後、[クエリの実行] を使用してクエリを検証することもできます。

  17. [UPDATE] タブをクリックし、AdventureWorks データベース内の部門データを更新するために、次の SQL クエリを入力します。

    UPDATE HumanResources.Department 
SET    Name = @Name, GroupName = @GroupName 
WHERE  (DepartmentID = @DepartmentID)

  18. [INSERT] タブをクリックし、AdventureWorks データベース内に部門データを挿入するために、次の SQL クエリを入力します。

    INSERT INTO HumanResources.Department(Name, GroupName)
VALUES (@Name, @GroupName)

  19. [DELETE] タブをクリックし、AdventureWorks データベースから部門データを削除するために、次の SQL クエリを入力します。

    DELETE FROM HumanResources.Department WHERE (DepartmentID = @DepartmentID)

  20. [次へ] をクリックします。

  21. [クエリのテスト] をクリックし、必要なデータが取得されることを確認します。

  22. [完了] をクリックします。

    ウィザードによって SqlDataSource コントロールが作成され、ページに追加されます。先ほど追加した ListView コントロールは、SqlDataSource コントロールにバインドされます。

  23. ListView コントロールを右クリックし、[スマート タグの表示] をクリックします。

  24. [ListView タスク] メニューの [ListView の構成] をクリックします。

    [ListView の構成] ダイアログ ボックスが表示されます。

  25. [オプション] の [編集を有効にする]、[挿入を有効にする]、および [削除を有効にする] の各チェック ボックスをオンにします。次の図は、[ListView の構成] ダイアログ ボックスを示しています。

    ListView の構成

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

    別のスタイルを選択して、データをさらに簡単に表示することもできます。そのためには、[スタイルの選択] で、[カラフル] などのスタイルを選択します。

  26. [OK] をクリックします。構成済みの ListView コントロールは次のようになります。

    ListView コントロール

ここで ListView コントロールをテストします。

ページをテストするには

  1. Ctrl キーを押しながら F5 キーを押してページを実行します。

    DepartmentID、Name、および GroupName の各列と共に ListView コントロールが表示されます。

  2. [編集] をクリックして、テーブル内のレコードを変更します。

  3. 値を変更し、[更新] をクリックするか、[キャンセル] をクリックして編集操作をキャンセルします。

  4. ページの下部にある Name フィールドと GroupName フィールドの値を入力し、[挿入] をクリックして新しいレコードを挿入します。

  5. 挿入したレコードの [削除] をクリックして、データベースからレコードを削除します。

次の手順

このチュートリアルでは、ListView コントロールとカスタム レイアウトを使用してデータ レコードを表示および編集するための基本的な手順について説明しています。ListView コントロールを使用すると、このチュートリアルで実行した書式設定よりも高度な書式設定を実行できます。ListView コントロールについてさらに学習するには、「ListView Web サーバー コントロールの概要」を参照してください。

参照

処理手順

チュートリアル : ListView Web サーバー コントロールを使用したデータの表示、ページング、および並べ替え

方法 : データ ソース コントロールを使用するときに接続文字列をセキュリティ保護する

チュートリアル : Web ページでの基本的なデータ アクセス

概念

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