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

 

 

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

 

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

 

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

 

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

 

 

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

 

¶ポイント1 DataGridHTMLに変換するには

 

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

 

dgrdCustomers.RenderControl(htw)

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

 

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

 

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

 

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

 

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

 

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

 

 

リスト 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に表示されている得意先テーブルをExcelWordHTMLXMLのデータ形式でエクスポートします。

 

Sub Page_Load()イベントの処理

 

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

 

9-12If…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()イベントの処理

 

このイベントは、DataGridDataBind()メソッドが実行されたときに発生します。このイベントでは、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では、DropDownListItemsコレクションからListItemCollectionを作成しています。行60-65With…End Withでは、ListItemCollectionAdd()メソッドでアイテムを追加しています。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では、JavaScriptwindow.open()メソッドの引数に指定するオプションを生成しています。行74-78With…End Withでは、StringBuilderAppend()メソッドで以下のJavaScriptを生成しています。

 

<script language='javascript'>
window.open('PopupExport.aspx?typ=content-type','_blank','features');

</script>

 

JavaScriptwindow.open()メソッドは、新規ウィンドウを開きます。Open()メソッドの引数には、urltargetfeaturesを指定します。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のの引数には、strSQLstrConnectionStringを指定します。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は、ExcelWordHTML形式でエクスポートするときに使用します。XML形式でエクスポートするときは、DataSetを使用します。

 

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

 

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

 

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

 

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

 

DataGridExcelWordにエクスポートされたときに、カラム幅が狭いと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形式に変換してExcelWordにエクスポートします。XML形式でエクスポートするときは、DataSetを使用します。

 

Sub Page_Load()イベントの処理

 

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

 

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

 

Request.Params("typ") è Excel

Request.QueryString("type") è Excel

 

9-10では、StringWriterHtmlTextWriterのインスタンスを生成しています。HtmTextWriterStringWriterは、DataGridHTML形式に変換するときに使用します。

 

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

 

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

 

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

 

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

 

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

 

この関数は、データベースからレコードを抽出してDataSetを作成して返します。CreateDataSetは、BindDataGrid()から呼ばれます。CreateDataSetのの引数には、strSQLstrConnectionStringを指定します。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" />

 

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

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

 

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

 

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

 

 

 

ASP.NET DataGrid2のホームへ戻る