GridView で XML ファイルをデータ ソースとして使いレコードを編集する方法

  • [アーティクル]

download.gifサンプル コードのダウンロード (aspnettips_GridViewXML.msi, 253 KB)
※このサンプルをお使いいただくためには、 Visual Studio 2005が必要です。

ASP.NET 2.0 では、XmlDataSource コントロールを使うことで、GridView コントロールに XML のデータを表示させることができます。しかし、XmlDataSource コントロールは、データの表示に適したもので、そのままでは、GridView 上で編集を行なうことができません。そこで、今回は、XML ファイルをデータ ソースとして指定した GridView 上で、レコードを更新する方法を紹介します。

XML ファイルを作成する

今回のサンプルでは、名前の一覧が登録されたデータ テーブルの表示と更新を行ないます。そこで、次の手順により、データ ソースとして使用する XML ファイルを用意し、App_Data フォルダへ配置します (図1)。

1.    ソリューション エクスプローラのプロジェクトを選択し、コンテキスト メニューの ASP.NET フォルダの追加から App_Data を指定し、App_Data フォルダを作成します。

2.    App_Data フォルダを選択し、コンテキスト メニューから [新しい項目の追加] を指定します。表示される [新しい項目の追加] ダイアログ ボックスにある [テンプレート] で [XML ファイル] を選択し、[名前] に UserInfo.xml と入力して、[OK] ボタンを押します。

3.    作成された UserInfo.xml をリスト1 のコードに置き換えます。

<?xml version="1.0" standalone="yes"?>
<XmlDataSet>
  <USERINFO>
    <ID>1</ID>
    <NAME>岡田</NAME>
  </USERINFO>
  <USERINFO>
    <ID>2</ID>
    <NAME>桜井</NAME>
  </USERINFO>
  <USERINFO>
    <ID>3</ID>
    <NAME>田中</NAME>
  </USERINFO>
  <USERINFO>
    <ID>4</ID>
    <NAME>出海</NAME>
  </USERINFO>
  <USERINFO>
    <ID>5</ID>
    <NAME>平松</NAME>
  </USERINFO>
  <USERINFO>
    <ID>6</ID>
    <NAME>星野</NAME>
  </USERINFO>
  <USERINFO>
    <ID>7</ID>
    <NAME>三塚</NAME>
  </USERINFO>
</XmlDataSet>

リスト1．UserInfo.xml

GridViewXML_fig01.gif

図 1 ． UserInfo.xml を配置したソリューション エクスプローラ

XML ファイル操作用のクラスを用意する

次の手順により、XML ファイルを操作するクラスを定義し、App_Code フォルダへ配置します (図2)。

1.    ソリューション エクスプローラのプロジェクトを選択し、コンテキスト メニューの ASP.NET フォルダの追加から App_Code を指定し、App_Code フォルダを作成します。

2.    App_Code フォルダを選択し、コンテキスト メニューから [新しい項目の追加] を指定します。表示される [新しい項目の追加] ダイアログ ボックスにある [テンプレート] で [クラス] を選択し、[名前] に XmlDataSet.vb と入力して、[OK] ボタンを押します。

3.    作成された XmlDataSet.vb をリスト2 のコードに置き換えます。

Imports Microsoft.VisualBasic
Imports System.Data
Imports System.Web
Namespace XmlDataSet
    Public Class UserInfoTable
        Implements IDisposable
        Const strXmlFile As String = "~/App_Data/UserInfo.xml"
        Private myDataSet As DataSet
        Sub New()
            myDataSet = New DataSet
            myDataSet.Locale = Globalization.CultureInfo.InvariantCulture
            ' 仮想パスから物理パスを取得する
            Dim filePath As String
            filePath = HttpContext.Current.Server.MapPath(strXmlFile)
            ' XML データを DataSet へ読み込む
            myDataSet.ReadXml(filePath)
        End Sub
        Protected Overridable Overloads Sub Dispose(ByVal disposing As Boolean)
            If disposing Then
                myDataSet.Dispose()
            End If
        End Sub
        Public Overloads Sub Dispose() Implements IDisposable.Dispose
            Dispose(True)
            GC.SuppressFinalize(Me)
        End Sub
        Protected Overrides Sub Finalize()
            Dispose(False)
        End Sub
        Public Function GetDataSet() As DataSet
            ' DataSet を返す
            Return myDataSet
        End Function
        Public Sub UpdateDataSet(ByVal ID As Integer, ByVal NAME As String)
            ' ID が一致するレコードを取得する
            Dim rows() As Data.DataRow
            Dim strFillter As String
            strFillter = "ID=" + ID.ToString(Globalization.CultureInfo.CurrentCulture)
            rows = myDataSet.Tables(0).Select(strFillter)
            If rows.Length > 0 Then
                ' DataSet の値を更新し、XML ファイルへ保存する
                rows(0)("NAME") = NAME
                Save()
            End If
        End Sub
        Private Sub Save()
            Dim filePath As String
            filePath = HttpContext.Current.Server.MapPath(strXmlFile)
            myDataSet.WriteXml(filePath, XmlWriteMode.IgnoreSchema)
        End Sub
    End Class
End Namespace

リスト2．XmlDataSet.vb

GridViewXML_fig02.gif

図 2 ． XmlDataSet.vb を配置したソリューション エクスプローラ

データ ソース コントロールを配置する

XML ドキュメントをデータ ソースとして使えるように XmlDataSource コントロールが用意されていますが、XmlDataSource コントロールでは、レコードの編集を行なう機能が実装されていません。そこで、今回は、ObjectDataSource コントロールを使用し、リスト2 で作成した UserInfoTable クラスにより XML ファイルの読込みと更新の処理を実装します。次の手順により ObjectDataSource コントロールを配置します。

1.    [ツールボックス]-[データ] から ObjectDataSource を選択し、フォームに貼り付けます。

2.    プロパティを開き、[(ID)] を「ObjectDataSource1」に設定します。

3.    [TypeName] を「XmlDataSet.UserInfoTable」に設定します。

4.    [SelectMethod] を「GetDataSet」に設定します。

5.    [UpdateMethod] を「UpdateDataSet」に設定します。

GridView コントロールを配置する

次の手順により ObjectDataSource コントロールを指定する GridView コントロールを配置します。

1.    [ツールボックス]-[データ] から GridView を選択し、フォームに貼り付けます。

2.    プロパティを開き、[(ID)] を「GridView1」に設定します。

3.    [DataSourceID] を「ObjectDataSource1」に設定します。

4.    [AutoGenerateEditButton] を「True」に設定します。

コントロールの配置が終わった Default.aspx は、リスト3 になり、実行結果は図3 のようになります。

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Sample Page</title>
</head>
<body>
    <form id="MyForm" runat="server">
    <div>
        <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetDataSet" TypeName="XmlDataSet.UserInfoTable" UpdateMethod="UpdateDataSet">
            <UpdateParameters>
                <asp:Parameter Name="ID" Type="Int32" />
                <asp:Parameter Name="NAME" Type="String" />
            </UpdateParameters>
        </asp:ObjectDataSource>
        <asp:GridView ID="GridView1" runat="server" DataSourceID="ObjectDataSource1" AutoGenerateEditButton="True">
        </asp:GridView>
    </div>
    </form>
</body>
</html>

リスト3．Default.aspx

GridViewXML_fig03.gif

図 3 ．実行結果