GridViewにテーブルを表示する

ASP.NET GridViewのホームへ戻る

■GridViewにテーブルを表示する　（GridView01.aspx）

GridViewにSQL Serverのテーブルを表示するサンプルを作成します。このサンプルでは、以下のノウハウを習得することができます。

▼ デザイナにGridViewを作成する方法

▼ GridViewをフォーマットする方法

▼ GridViewの列見出しを書き換える方法

▼ SQL Serverのデータベースを接続する方法

▼ SQL Serverのテーブルから列を選択する方法

図 GridViewにSQL Serverの得意先テーブルを表示

1. VWD2005を起動

VWD 2005を起動したら、[ファイル]メニューから[新しいWebサイト]を選択します。「新しいWebサイト」のダイアログが表示されたら、「Visual Studioにインストールされたテンプレート」から[ASP.NET Webサイト]を選択します。「場所」のドロップダウンリストから[ファイルシステム]を選択したら、テキストボックスに「C:\CH1」を入力します。「言語」のドロップダウンリストからは[Visual Basic]を選択します。最後に、[OK]をクリックしてダイアログを閉じます。デフォルトのWebページ(Default.aspx)が表示されたら、閉じるボタン[X]をクリックして閉じます。

2. App_DataフォルダにMDFをコピー

「C:\CH1\App_Data」に格納されている「NwindSQL.mdf」をコピーしたら、ソリューションエクスプローラの「App_Data」フォルダに貼り付けします。App_Dataフォルダ下に「NwindSQL.mdf」が表示されます。

3. 新規Webページ作成

ソリューションエクスプローラのプロジェクトの右クリックから[新しい項目の追加]を選択して、新規Webページ「GridView01.aspx」を作成します。

4. コントロール作成

デザイナにGridView01.aspxが表示されたら、ツールボックスの「データ」タブから[GridView]をドラッグ＆ドロップします。デザイナにGridView1のオブジェクトが作成されます。

5. オートフォーマット

「GridViewタスク」から[オートフォーマット]を選択します。「オートフォーマット」が表示されたら、「スキームの選択」から[シンプル]を選択して[OK]をクリックします。

図　GridViewをフォーマットする

6. データソースの選択

「GridViewタスク」メニューの「データソースの選択」から[<新しいデータソース>]を選択します。データソース構成ウィザードが起動されて、「データソースの種類を選びます」が表示されたら、「アプリケーションがデータを取得する場所」から[データベース]を選択して[OK]をクリックします。「データ接続の選択」が表示されたら、[新しい接続]ボタンをクリックします。「接続の追加」が表示されたら、「サーバー名」に「.\SQLEXPRESS」を入力します。「データベースの接続」から「データベースファイルのアタッチ」を選択します。[参照]ボタンをクリックして、「SQL Serverデータベースファイルの選択」ダイアログが表示されたら、「C:\CH1\App_Data」から「NwindSQL.mdf」を選択して[開く]ボタンをクリックします。「接続の追加」に戻ったら、[接続の確認]ボタンをクリックします。「テスト接続に成功しました」が表示されたら、[OK]をクリックして閉じます。「接続の追加」から[OK]をクリックします。

Tip

「サーバー名」の入力をスキップするには

SQL Server Expressのデータベースを接続するときは、「接続の追加」ダイアログから[変更]ボタンをクリックします。「データソースの変更」ダイアログが表示されたら「データソース」の一覧から[Microsoft SQL Serverデータベースファイル]を選択すると「サーバー名」の入力をスキップすることができます。

「データ接続の選択」に戻ったら、[次へ]のボタンをクリックします。「アプリケーション構成ファイルに接続文字列を保存」が表示されたら、[次へ]のボタンをクリックします。「Selectステートメントの構成」が表示されたら、「コンピュータ」のドロップダウンリストから[Customers]テーブルを選択します。「列」からは、「CustomerID」、「CompanyName」、「Fax」をチェックします。[次へ]のボタンをクリックします。「クエリのテスト」が表示されたら、[完了]ボタンをクリックしてウィザードを完了させます。

図CustomersテーブルからCustomerID、CompanyName、Faxの列を選択

デザイナのGridViewにCustomersテーブルの列が表示されます。

図　デザイナのGridViewがフォーマットされた

7. 列の編集

「GridViewタスク」メニューから[列の編集]を選択します。「フィールド」ダイアログが表示されたら、「選択されたフィールド」から[CustomerID]を選択します。右側の「BoundFiledプロパティ」から「HeaderText」を「ID」に書き換えます。同様の手順で、「選択されたフィールド」から[CompanyName]、[Fax]を選択したら、「HeaderText」を「得意先」、「ファックス」に書き換えます。[OK]をクリックしてダイアログを閉じます。

図　BoundFieldのHeaderTextプロパティを書き換え

デザイナのGridViewの列見出しが日本語で表示されます。

図 GridViewの列見出しが書き換えられた

8. ブラウザに表示

VWD 2005のツールバーから[デバッグの開始]ボタンをクリックしてブラウザに表示します。「デバッグが無効です」のダイアログが表示されたら、「新しいWeb.configを追加してデバッグを有効にする」が選択されていることを確認して[OK]をクリックします。ブラウザが起動されて、GridViewにCustomersテーブルが表示されます。

図　GridViewにSQL Serverの得意先テーブルが表示された

◆解説

デザイナに作成されたGridViewをフォーマットするには、「GridViewタスク」メニューから[オートフォーマット]を選択します。VWD 2005には、「カラフル」、「クラシック」、「シンプル」などのスキームが用意されていますので、お好みのスキームを選択してGridViewをフォーマットすることができます。

Tip

GridViewのフォーマット情報をWebページから分離するには

スキンファイルを作成してGridViewのフォーマット情報をスキンファイルに定義します。GridViewからスキンファイルのフォーマットを参照するには、GridViewにSkinIDプロパティを追加します。

GridViewにSQL Serverのテーブルを表示するには、「GridViewタスク」メニューから[データソースの選択]をクリックしてデータ構成ウィザードを起動します。データ構成ウィザードが完了すると、デザイナにSqlDataSource1オブジェクトが作成されます。

SqlDataSource1のConnectionStringプロパティには、SQL ServerのNwindSQL.mdfデータベースに接続するためのデータベース接続情報が格納されます。「<%$・・・%>」は、特殊なデータ連結式でコンパイル時にWeb.configファイルからデータベース接続文字列を取得します。

SelectCommandプロパティには、Customersテーブルからレコードを抽出するためのSELECTステートメントが格納されます。

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="<%$ ConnectionStrings:NwindSQLConnectionString %>"

SelectCommand="SELECT [CustomerID], [CompanyName], [Fax] FROM [Customers]">

</asp:SqlDataSource>

Web.configファイル：

<add name="NwindSQLConnectionString"

connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=C:\ASP20\CH13-01\App_Data\NwindSQL.mdf;Integrated Security=True"

providerName="System.Data.SqlClient"/>

</connectionStrings>

GridViewの列見出しに日本語を表示するには、BoundFieldのHeaderTextプロパティを書き換えます。GridViewとSqlDataSourceを関連付けるには、GridViewのDataSourceIDプロパティにSqlDataSourceのIDを設定します。

<asp:GridView ID="GridView1" runat="server"

DataSourceID="SqlDataSource1"

AutoGenerateColumns="False"

DataKeyNames="CustomerID"・・・>

<asp:BoundField DataField="CustomerID"

HeaderText="ID"

InsertVisible="False"

ReadOnly="True" />

<asp:BoundField DataField="CompanyName"

HeaderText="得意先" />

<asp:BoundField DataField="Fax"

HeaderText="ファックス" />

</Columns>

</asp:GridView>

Tip

テーブルのデータにHTMLタグが埋め込まれているときの対処

データベースのテーブルにHMTLタグが埋め込まれているとき、テーブルをGridViewに表示するとHTMLタグが表示されます。たとえば、社員テーブルのプロフィール列に「私の趣味は<b>音楽</b>です。」のような<b>…</b>タグが埋め込まれているとき、GridViewにプロフィールを表示すると「音楽」が強調文字として表示されないで、HTMLタグが表示されます。HTMLタグを表示したくないときは、BundFieldのHtmlEncodeプロパティにFalseを設定してHtmlEncodeを無効にします。

それから、HTMLタグが含まれるデータをGridViewから編集するときは、@PageディレクティブにValidateRequest="false"を追加する必要があります。

<%@ Page Language="VB" ValidateRequest="false"　・・・ %>