ASP.NET GridViewのホームへ戻る

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

 

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

 

 

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

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

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

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

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

 

 

GridViewSQL 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テーブルからCustomerIDCompanyNameFaxの列を選択

 

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

 

 

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

 

7. 列の編集

 

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

 

図 BoundFieldHeaderTextプロパティを書き換え

 

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

 

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

 

8. ブラウザに表示

 

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

 

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

 

 

◆解説

 

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

 

Tip

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

 

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

 

 

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

 

SqlDataSource1ConnectionStringプロパティには、SQL ServerNwindSQL.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ファイル:

<connectionStrings>

  <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の列見出しに日本語を表示するには、BoundFieldHeaderTextプロパティを書き換えます。GridViewSqlDataSourceを関連付けるには、GridViewDataSourceIDプロパティにSqlDataSourceIDを設定します。

 

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

  DataSourceID="SqlDataSource1"

  AutoGenerateColumns="False"

  DataKeyNames="CustomerID"・・・>

  <Columns>

    <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タグを表示したくないときは、BundFieldHtmlEncodeプロパティにFalseを設定してHtmlEncodeを無効にします。

 

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

 

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

 

 

ASP.NET GridViewのホームへ戻る