次の方法で共有


チュートリアル : GridView Web サーバー コントロールの簡単な並べ替え

更新 : 2007 年 11 月

ASP.NET の GridView コントロールの組み込みの並べ替え機能を使用して、コーディングを一切行わずに、単一列の並べ替えをデータに適用できます。

このチュートリアルでは、次の作業を行う方法について説明します。

  • GridView コントロールの組み込みの並べ替え機能を有効にします。

必要条件

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

  • Microsoft Visual Web Developer (Visual Studio)。

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

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

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

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

  • MDAC (Microsoft Data Access Components ) Version 2.7 以降。

    Microsoft Windows XP または Windows Server 2003 を使用している場合、MDAC 2.7 は既に存在します。ただし、Microsoft Windows 2000 を使用している場合は、コンピュータに既にインストールされている MDAC のアップグレードが必要になる場合があります。詳細については、MSDN ライブラリの「Microsoft Data Access Components (MDAC) Installation」を参照してください。

Web サイトおよびページの作成

次の手順に従って、新しい Web サイトを作成します。

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

  1. Visual Web Developer を開きます。

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

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

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

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

    たとえば、「C:\WebSites\SimpleSort」というフォルダ名を入力します。

  5. [言語] ボックスの [Visual Basic] または [Visual C#] をクリックします。

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

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

GridView コントロールにおけるデータの表示

このセクションでは、GridView コントロールをページに追加し、これを構成して Northwind データベースの Customers テーブルのデータを表示します。

GridView コントロールにデータを表示するには

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

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

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

  4. [GridView タスク] メニューの [データ ソースの選択] ドロップダウン リストで、[<新しいデータ ソース>] をクリックします。

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

  5. [Database] をクリックします。

    これにより、SQL ステートメントをサポートするデータベースからデータを取得することが指定されます。これには、SQL Server や他の OLE DB 互換データベースが含まれます。

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

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

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

  8. [新しい接続] をクリックします。

    [接続の追加] ダイアログ ボックスが表示されます。

    • [データ ソース] ボックスに [Microsoft SQL Server (SqlClient)] が表示されない場合は、[変更] をクリックし、[データ ソースの変更] ダイアログ ボックスの [Microsoft SQL Server] をクリックします。

    • [データ ソースの選択] ページが表示されたら、[データ ソース] ボックスで使用するデータ ソースの種類を選択します。このチュートリアルでは、データ ソースの種類は Microsoft SQL Server です。[データ プロバイダ] ボックスの [.NET Framework SQL Server 用データ プロバイダ] をクリックし、[続行] をクリックします。

  9. [サーバー名] ボックスに SQL Server コンピュータの名前を入力します。

  10. [サーバーにログオンする] セクションで、ご使用の SQL Server 構成に適したオプションを選択します (Windows 認証または特定の ID とパスワード)。

  11. 必要な場合は、ユーザー名とパスワードを入力します。

  12. [データベースの選択または入力] ボックスの [Northwind] をクリックします。

  13. [接続の確認] をクリックして、接続をテストします。接続が正常に確立されていることを確認したら、[OK] をクリックします。

    接続情報が設定された状態で、データ ソースの構成 - SqlDataSource1 ウィザードが再び表示されます。

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

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

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

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

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

    ウィザードに、データベースから取得するデータを指定するためのページが表示されます。

  16. [テーブルまたは表示から列を指定します][コンピュータ] ドロップダウン リストで、[Customers] をクリックします。

  17. [列][CustomerID][CompanyName]、および [City] の各チェック ボックスをオンにします。

    ページの下部のボックスに、作成中の SQL ステートメントが表示されます。

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

    ウィザードでは、選択基準 (WHERE 句) およびその他の SQL クエリ オプションを指定できます。このチュートリアルでは、選択オプションや並べ替えオプションなしの単純なステートメントを作成します。

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

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

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

    ウィザードによって SqlDataSource コントロールが作成され、ページに追加されます。先ほど追加した GridView コントロールは、SqlDataSource コントロールにバインドされます。SqlDataSource コントロールのプロパティを表示すると、ウィザードによって ConnectionString プロパティと SelectQuery プロパティの値が作成されていることがわかります。

  21. GridView コントロールを右クリックし、[スマート タグの表示] をクリックします。次に、[GridView タスク] メニューの [並べ替えを有効にする] をクリックします。

    GridView コントロールの列見出しがリンクに変わります。

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

ページをテストするには

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

    GridView コントロールに CustomerIDCompanyName、および City の各列が表示されます。

  2. 特定の列をその列の内容に基づいて並べ替えるには、列の見出しをクリックします。

  3. 並べ替え順序を昇順または降順に切り替えるには、列を再度クリックします。

次の手順

GridView コントロールに対して複数列の並べ替えを有効にすることを検討します。詳細については、「GridView Web サーバー コントロールでのデータの並べ替え」を参照してください。

参照

概念

GridView Web サーバー コントロールでのデータの並べ替え

参照

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