DataGridをエクスポートするサンプル

図 DataGridをエクスポートするサンプル

このサンプルは、DataGridに表示されているデータをエクスポートすることができます。DataGridをエクスポートするには、ドロップダウンリストからExcel、Word、HTML、XMLのいずれかを選択してからエクスポート(保存)ボタンをクリックします。

ドロップダウンリストからExcel、Wordを選択したときは、「ファイルのダウンロード」のダイアログが表示されてファイルを[開く]か[保存]するか問い合わせをします。[開く]を選択したときは、Excel/Wordの画面にDataGridがエクスポートされます。[保存]を選択したときは、「名前を付けて保存」のダイアログが表示されますので保存場所とファイル名を入力します。

ドロップダウンリストからHTML、XMLを選択したときは、新規ウィンドウが開いてDataGridのデータがHTML/XML形式で表示されます。

◆プログラムPopupExport.aspxのポイント

¶ポイント１　DataGridをHTMLに変換するには

このサンプルでは、DataGridをExcel、WordにエクスポートするときHTML形式に変換しています。DataGridをHTML形式に変換するにはRenderControl()メソッドを使用します。

dgrdCustomers.RenderControl(htw)

¶ポイント２　HTMLデータをExcel/Wordに送信するには

HTMLデータをExcelのデータとしてブラウザに送信するには、ResponseのContentTypeプロパティにapplication/vnd.ms-excelを設定します。Wordのデータとして送信するには、ContentTypeにapplication/mswordを設定します。

Response.ContentType = "application/vnd.ms-excel"
Response.Write(sw.ToString())

Response.ContentType = "application/msword"
Response.Write(sw.ToString())

¶ポイント３　HTML/XMLデータをブラウザに送信するには

HTMLデータとしてブラウザに送信するには、ResponseのContentTypeプロパティにtext/htmlを設定します。XMLデータとしてブラウザに送信するには、ContentTypeにtext/xmlを設定します。

Response.ContentType = "text/html"
Response.Write(sw.ToString())

Response.ContentType = "text/xml"
Response.Write(ds.GetXml())

◆メインプログラムDataGridExport.aspxの解説(HTML編)

DataGridExport.aspxのプレゼンテーションコンテンツの部分について解説します。行125-131のImageButtonでは、DataGridをエクスポートするボタンを定義しています。行132-133のDropDownListには、DataGridをエクスポートするデータ形式を表示します。DropDownListに表示するアイテムは、ランタイム時にバインドします。行134-140のLabelとTextBoxでは、件数を表示します。

図エクスポートボタン、ドロップダウンリスト、件数を表示した例

行153-205では、DataGridを定義しています。このDataGridには、AutoGenerateColumnsプロパティにFalseを設定してカラムの自動生成機能を抑止しています。行167-204の<Columns>…</Columns>では、TemplateColumn、BoundColumnを定義しています。行168-178のTemplateColumnでは、ItemTemplateにLinkButtonを定義しています。このLinkButtonは、レコードセレクターとして使用します。行179-183のBoundColumnでは、得意先テーブルの得意先IDをバインドしています。後続するBoundColumnでは、得意先名、担当者名、役職、電話番号、都道府県をバインドしています。

図 DataGridにLinkButtonと得意先テーブルのカラムをバインドした例

リスト DataGridExport.aspxのソースコード（HTML編）

105: <html>
111: <body scroll="no">
120: <form id="frmMain" runat="server">
125: <asp:ImageButton id="ibtnExport" runat="server"
126:   CommandName="export"
127:   OnCommand="ibtnExport_Command"
128:   ImageUrl="../img/save.gif"
131:   ImageAlign="Middle" />
132: <asp:DropDownList id="dropExportType" runat="server"
133:   CssClass="pageNumber" />
134: <asp:Label id="lblRows" runat="server"
135:   Text="件数"
136:   CssClass="rowNumber" />
137: <asp:TextBox id="txtRows" runat="server"
138:   CssClass="rowNumber"
139:   Columns="3"
140:   ReadOnly="True" />
153: <asp:DataGrid id="dgrdCustomers" runat="server"
154:   AutoGenerateColumns="False"
155:   OnItemCommand="dgrdCustomers_ItemCommand"
156:   OnItemDataBound="dgrdCustomers_ItemDataBound"
162:   EnableViewState="True">
167:   <Columns>
168:     <asp:TemplateColumn
169:       HeaderText="<div class='dgrdHeaderBox'>1</div>">
170:       <ItemTemplate>
171:         <asp:LinkButton id="lbtnSelect" runat="server"
172:           CommandName="Select"
173:           Text="<div class='dgrdItemArrow'>4</div>"

174:           Visible="True" />
175:       </ItemTemplate>
178:     </asp:TemplateColumn>
179:     <asp:BoundColumn ItemStyle-Width="20"
180:       DataField="CustomerID"
181:       HeaderText="<div class='dgrdHeader'>ID</div>">
183:     </asp:BoundColumn>
　　　　・・・
204:   </Columns>
205: </asp:DataGrid>
228: </form>
229: </body>
229: </html>

◆メインプログラムDataGridExport.aspxの解説（コード編）

DataGridExport.aspxは、DataGridに表示されている得意先テーブルをExcel、Word、HTML、XMLのデータ形式でエクスポートします。

Sub Page_Load()イベントの処理

このイベントはDataGridExport.aspxがロードされたときに実行されます。このイベントでは、DropDownListとDataGridをバインドします。

行9-12のIf…End Ifでは、ページが最初にロードされたか調べています。最初にロードされたときは、BindDropDownList()とBindDataGrid()を呼び出します。BindDropDownListではDropDownListに、エクスポートするデータ形式をバインドします。BindDataGridでは、DataGridに得意先テーブルをバインドします。

7: Sub Page_Load()
9:   If Not IsPostBack Then
10:     BindDropDownList()
11:     BindDataGrid()
12:   End If
13: End Sub

Sub dgrdCustomers_ItemDataBound()イベントの処理

このイベントは、DataGridのDataBind()メソッドが実行されたときに発生します。このイベントでは、DataGridのアイテム(DataGridItem)にクライアント側で動作するonClickイベントを登録します。これにより、DataGridの任意のセルをクリックして行を選択できるようになります

23: Sub dgrdCustomers_ItemDataBound(s As Object, e As DataGridItemEventArgs)
24:   Dim lit As ListItemType = e.Item.ItemType
25:
26:   If lit = ListItemType.Item OrElse _
27:     lit = ListItemType.AlternatingItem OrElse _
28:     lit = ListItemType.SelectedItem Then
29:     Dim lbtn As LinkButton = CType(e.Item.FindControl("lbtnSelect"), LinkButton)
30:     e.Item.Attributes("onClick") = GetPostBackClientHyperlink(lbtn, "")
31:     e.Item.Style("cursor") = "hand"
32:   End If
33: End Sub

Sub ibtnExport_Command()イベントの処理

このイベントは、WebページからDataGridをエクスポートするボタンをクリックしたときに発生します。このイベントでは、InsertScriptBlock()関数を呼び出して、子ウィンドウを開きます。

行40では、DropDownListから選択したアイテム（データ形式）を取得しています。行41では、InsertScriptBlock()を呼び出して子ウィンドウを開くJavaScriptを登録します。InsertScriptBlock()の引数には、エクスポートするデータ形式を指定します。

39: Sub ibtnExport_Command(s As Object, e As CommandEventArgs)
40: Dim strContentType As String = dropExportType.SelectedItem.Text
41: InsertScriptBlock(strContentType)
42: End Sub

Sub BindDataGrid()の処理

このサブプロシージャでは、DataGridに得意先テーブルをバインドして表示します。BindDataGridは、Page_Loadイベントから呼ばれます

44: Sub BindDataGrid()
45:   Dim strSQL As String = "Select top 10 * From Customers"
46:   Dim ds AS DataSet = CreateDataSet(strSQL)
47:
48:   With dgrdCustomers
49:     .DataSource = ds
50:     .DataKeyField = "CustomerID"
51:     .DataBind()
52:     .SelectedIndex = 0
53:   End With
54:   txtRows.Text = ds.Tables(0).Rows.Count.ToString()
55: End Sub

Sub BindDropDownList()の処理

このサブプロシージャでは、DropDownListにエクスポートするデータ形式をバインドして表示します。BindDropDownListは、Page_Loadイベントから呼ばれます

行58では、DropDownListのItemsコレクションからListItemCollectionを作成しています。行60-65のWith…End Withでは、ListItemCollectionのAdd()メソッドでアイテムを追加しています。Add()メソッドの引数には、ListItemを指定します。ListItemの引数には、Text/Valueプロパティを指定します。ここでは、Textプロパティのみ指定しています。

57: Sub BindDropDownList()
58:   Dim items As ListItemCollection = dropExportType.Items
59:
60:   With items
61:     .Add(New ListItem("Excel"))
62:     .Add(New ListItem("Word"))
63:     .Add(New ListItem("HTML"))
64:     .Add(New ListItem("XML"))
65:   End With
66: End Sub

Sub InsertScriptBlock()の処理

このサブプロシージャでは、子ウィンドウを開くJavaScriptを生成して登録します。InsertScriptBlockは、エクスポートのボタンをクリックしたときに、ボタンのOnCommandイベントから呼ばれます。

行69-71では、JavaScriptのwindow.open()メソッドの引数に指定するオプションを生成しています。行74-78のWith…End Withでは、StringBuilderのAppend()メソッドで以下のJavaScriptを生成しています。

</script>

JavaScriptのwindow.open()メソッドは、新規ウィンドウを開きます。Open()メソッドの引数には、url、target、featuresを指定します。urlには、新規ウィンドウに表示するファイルPopupExport.aspxを指定します。このurlには、?typ=でQueryStringを指定しています。typ=には、エクスポートするデータ形式を設定します。

行79では、Page.RegisterClientScriptBlock()メソッドでJavaScriptを登録します。ここで登録したJavaScriptは、Webページがロードされたときにクライアント側のブラウザから実行されます。

68: Sub InsertScriptBlock(strContentType As String)
69:   Dim strFeatures As String = "height=400,width=600,left=10,top=10," & _
70:     "location=no,menubar=yes,resizable=yes,scrollbars=yes," & _
71:     "status=no,titlebar=yes,toolbar=yes"
72:   Dim sbScript As New StringBuilder()
73:
74:   With sbScript
75:     .Append("<script language='javascript'>" & vbCrLf)
76:     .Append(vbTab & "window.open('PopupExport.aspx?typ=" &

strContentType & "','_blank','" & strFeatures & "');" & vbCrLf)
77:     .Append("</" & "script>")
78:   End With
79:   RegisterClientScriptBlock("openWindow", sbScript.ToString)
80: End Sub

Function CreateDataSet()関数の処理

この関数は、データベースからレコードを抽出してDataSetを作成して返します。CreateDataSetは、BindDataGrid()から呼ばれます。CreateDataSetのの引数には、strSQLとstrConnectionStringを指定します。strSQLには、データベースからレコードを抽出するSELECTステートメントを指定します。strConnectionStringには、Web.Configに登録されている<add>タグのkeyを指定します。strConnectionStringを省略したときは、デフォルトとしてconStringAccNwを使用します。

<add key="conStringAccNw"

value="PROVIDER=Microsoft.Jet.OLEDB.4.0;DATA Source=C:\WebMatrix\webdb\Nwind.mdb" />

92: Function CreateDataSet(strSQL As String, _
93:   Optional strConnectionString As String = "conStringAccNw") As DataSet
94:   Dim con As New OleDbConnection( _
95:     ConfigurationSettings.AppSettings(strConnectionString))
96:   Dim da As New OleDbDataAdapter(strSQL, con)
97:   Dim ds As New DataSet()
98:
99:   da.Fill(ds)
100:   Return ds
101: End Function

リスト DataGridExport.aspxのソースコード（コード編）

1: <%@ Page language="vb" SmartNavigation="false" %>
2: <%@ Import Namespace="System.Data" %>
3: <%@ Import Namespace="System.Data.OleDb" %>
4:
5: <script language="vb" runat="server">
7: Sub Page_Load()
13: End Sub
14:
23: Sub dgrdCustomers_ItemDataBound(s As Object, e As DataGridItemEventArgs)
33: End Sub
34:
39: Sub ibtnExport_Command(s As Object, e As CommandEventArgs)
42: End Sub
43:
44: Sub BindDataGrid()
55: End Sub
56:
57: Sub BindDropDownList()
66: End Sub
67:
68: Sub InsertScriptBlock(strContentType As String)
80: End Sub
81:
92: Function CreateDataSet(strSQL As String, _
93: Optional strConnectionString As String = "conStringAccNw") As DataSet
101: End Function
103: </script>

◆サブプログラムPopupExport.aspxの解説(HTML編)

PopupExport.aspxには、DataGridを定義しています。DataGridは、Excel、Word、HTML形式でエクスポートするときに使用します。XML形式でエクスポートするときは、DataSetを使用します。

行79-111では、DataGridを定義しています。このDataGridには、AutoGenerateColumnsプロパティにFalseを設定してカラムの自動生成機能を抑止しています。また、Webページをポストバックさせないため、EnableViewStateプロパティにFalseを設定してViewStateに保存しないようにしています。

DataGridをHTMLに変換するときはCssClassプロパティが無効になりますのでWebコントロールの厳密に型指定されたCSSプロパティ(BackColor、ForeColorなど)を使用します。

メインプログラムのDataGridでは、CssClassを使用して背景色、前景色を設定していますが、サブプログラムでは、型指定されたCSSプロパティを使用しています。

行90-110の<Columns>…</Columns>では、BoundColumnで得意先テーブルの得意先ID、得意先名、担当者名、役職、電話番号、都道府県をバインドしています。カラムの幅は、ItemStyle-Widthプロパティに設定します。

DataGridがExcel、Wordにエクスポートされたときに、カラム幅が狭いと2行で表示されますので1行で表示させるには、ItemStyle-Widthの値を調整します。

リスト PopupExport.aspxのソースコード（HTML編）

72: <html>
77: <body>
78: <form runat="server">
79: <asp:DataGrid id="dgrdCustomers" runat="server"
80:   AutoGenerateColumns="False"
85:   Visible="True"
86:   EnableViewState="False">
87:   <HeaderStyle BackColor="Black" ForeColor="White" />
88:   <ItemStyle BackColor="DarkGray" ForeColor="Black" />
89:   <AlternatingItemStyle BackColor="LightGray" ForeColor="Black" />
90:   <Columns>

91:     <asp:BoundColumn ItemStyle-Width="25"
92:       DataField="CustomerID" HeaderText="ID">
94:     </asp:BoundColumn>
95:     <asp:BoundColumn ItemStyle-Width="180"
96:       DataField="CompanyName" HeaderText="得意先名">
97:     </asp:BoundColumn>
98:     <asp:BoundColumn ItemStyle-Width="90"
99:       DataField="ContactName" HeaderText="担当者名">
100:     </asp:BoundColumn>
101:     <asp:BoundColumn ItemStyle-Width="60"
102:       DataField="ContactTitle" HeaderText="役職">
103:     </asp:BoundColumn>
104:     <asp:BoundColumn ItemStyle-Width="120"
105:       DataField="Phone" HeaderText="電話番号">
106:     </asp:BoundColumn>
107:     <asp:BoundColumn ItemStyle-Width="70"
108:       DataField="Ken" HeaderText="都道府県">
109:     </asp:BoundColumn>
110:   </Columns>
111: </asp:DataGrid>
112: </form>
113: </body>
113: </html>

◆サブプログラムPopupExport.aspxの解説（コード編）

PopupExport.aspxは、DataGridに表示されている得意先テーブルをHTML形式に変換してExcel、Wordにエクスポートします。XML形式でエクスポートするときは、DataSetを使用します。

Sub Page_Load()イベントの処理

このイベントは、ページがロードされたときに発生します。このイベントでは、DataGridを選択したデータ形式でエクスポートします。

行8では、RequestのParamsプロパティからQueryStringを取得しています。QueryStringには、エクスポートするデータ形式(Excel、Word、HTML、XML)が指定されています。Paramsプロパティの代わりにQueryStringプロパティを使用することもできます。

Request.Params("typ") è Excel

Request.QueryString("type") è Excel

行9-10では、StringWriterとHtmlTextWriterのインスタンスを生成しています。HtmTextWriterとStringWriterは、DataGridをHTML形式に変換するときに使用します。

行12-37のIf…ElseIf…End Ifでは、DataGridをHTML/XML形式に変換してエクスポートしています。行13-17では、DataGridをHTML形式に変換してExcelにエクスポートします。行13では、BindDataGrid()を呼び出して、DataGridに得意先テーブルをバインドします。行14では、DataGridのRenderControl()メソッドを実行してDataGridをHTMLに変換しています。変換されたHTMLは、StringWriterに保存されます。行15-17では、ResponseのWrite()メソッドでHTMLをブラウザに送信しています。ResponseのContentTypeプロパティにapplication/vnd.ms-excelを設定するとExcelのデータとして送信されます。ResponseのEnd()メソッドは、バッファに残っている未送信のデータを強制送信します。これで、DataGridがExcel上に表示されます。

14:     dgrdCustomers.RenderControl(htw)
15:     Response.ContentType = "application/vnd.ms-excel"
16:     Response.Write(sw.ToString())
17:     Response.End()

行19-23では、DataGridをHTML形式に変換してWordにエクスポートします。HTMLをWordのデータとして送信するには、ResponseのContentTypeプロパティにapplication/mswordを設定します。

行25-29では、DataGridをHTML形式に変換してブラウザ(Internet Explorer)に表示します。HTMLデータとしてブラウザに送信するには、ResponseのContentTypeプロパティにtext/htmlを設定します。

行31-36では、DataSetに得意先テーブルを取り込んでXML形式に変換してブラウザ(Internet Explorer)に表示します。行31では、得意先テーブルからレコードを抽出するSQLを生成しています。行32では、CreateDataSet()関数を呼び出してDataSetを作成します。行33では、DataSetのDataSetNameプロパティにCustomersを設定しています。DataSetNameプロパティは、XMLのルートノードを生成するときに使用します。DataSetからXMLデータを生成するには、DataSetのGetXml()メソッドを使用します。XMLデータをブラウザに送信するには、ResponseのContentTypeプロパティにtext/xmlを設定します。

図 DataSetName(Customers)がルートノードに表示された例

7: Sub Page_Load()
8:   Dim strExportType As String = Request.Params("typ")
9:   Dim sw As New StringWriter()
10:   Dim htw As New HtmlTextWriter(sw)
11:
12:   If strExportType = "Excel" Then
13:     BindDataGrid()
14:     dgrdCustomers.RenderControl(htw)
15:     Response.ContentType = "application/vnd.ms-excel"
16:     Response.Write(sw.ToString())
17:     Response.End()
18:   ElseIf strExportType = "Word" Then
19:     BindDataGrid()
20:     dgrdCustomers.RenderControl(htw)
21:     Response.ContentType = "application/msword"
22:     Response.Write(sw.ToString())
23:     Response.End()
24:   ElseIf strExportType = "HTML" Then
25:     BindDataGrid()
26:     dgrdCustomers.RenderControl(htw)
27:     Response.ContentType = "text/html"
28:     Response.Write(sw.ToString())
29:     Response.End()
30:   ElseIf strExportType = "XML" Then
31:     Dim strSQL As String = "Select top 10 * From Customers"
32:     Dim ds AS DataSet = CreateDataSet(strSQL)
33:     ds.DataSetName = "Customers"
34:     Response.ContentType = "text/xml"
35:     Response.Write(ds.GetXml())
36:     Response.End()
37:   End If
38: End Sub

Sub BindDataGrid()の処理

このサブプロシージャでは、DataGridに得意先テーブルをバインドして表示します。BindDataGridは、Page_Loadイベントから呼ばれます。

40: Sub BindDataGrid()
41:   Dim strSQL As String = "Select top 10 * From Customers"
42:   Dim ds AS DataSet = CreateDataSet(strSQL)
43:
44:   With dgrdCustomers
45:     .DataSource = ds
46:     .DataBind()
47:   End With
48: End Sub

Function CreateDataSet()関数の処理

<add key="conStringAccNw"

value="PROVIDER=Microsoft.Jet.OLEDB.4.0;DATA Source=C:\WebMatrix\webdb\Nwind.mdb" />

60: Function CreateDataSet(strSQL As String, _
61:   Optional strConnectionString As String = "conStringAccNw") As DataSet
62:   Dim con As New OleDbConnection( _
63:     ConfigurationSettings.AppSettings(strConnectionString))
64:   Dim da As New OleDbDataAdapter(strSQL, con)
65:   Dim ds As New DataSet()
66:
67:   da.Fill(ds,"Customer")
68:   Return ds
69: End Function

リスト PopupExport.aspxのソースコード（コード編）

1: <%@ Page language="vb" SmartNavigation="false" %>
2: <%@ Import Namespace="System.IO" %>
3: <%@ Import Namespace="System.Data" %>
4: <%@ Import Namespace="System.Data.OleDb" %>
5:
6: <script language="vb" runat="server">
7: Sub Page_Load()
38: End Sub
39:
40: Sub BindDataGrid()
48: End Sub
49:
60: Function CreateDataSet(strSQL As String, _
61: Optional strConnectionString As String = "conStringAccNw") As DataSet
69: End Function
70: </script>

Note

ResponseのContentTypeプロパティが有効にならないときの対処

ResponseのContentTypeプロパティにMIMEタイプを指定しても有効にならないときは、ResponseのCharsetプロパティに空白を設定します。

Response.ContentType = "application/vnd.ms-excel"

Response.Charset = ""

Response.Write(sw.ToString())

Response.End()

Note

IIS 5.xでサポートしている主なMIME(Multipurpose Internet Mail Extensions)タイプ

表 IIS 5.xでサポートしている主なMIMEタイプ

タイプ/サブタイプ	拡張子
application/pdf	pdf
application/vnd.ms-excel	xls
application/vnd.ms-powerpoint	ppt
application/msword	doc
application/x-javascript	js
audio/x-wav	wav
image/bmp	bmp
image/gif	gif
image/jpeg	jpe, jpg, jpeg
image/tiff	tif, tiff
text/css	css
text/html	htm, html
text/plain	txt