ASP.NET 2.0 AJAX Futures December CTPでDataTableのシリアライズが復活

こちらの過去の投稿でDataTableからJSON形式へのシリアライズ、デシリアライズができなくなっていると書きましたが、ASP.NET 2.0 AJAX Futures December CTPで復活しています。

DataTable/Set/Row support is back in MS Ajax RC - Rick Strahl's Web Log



私も自分で試してみていろいろとつまずくところが多かったので、今回は1から作成していく方法を書きたいと思います。


1.ASP.NET AJAX 1.0 RCとASP.NET 2.0 AJAX Futures December CTPのインストール
下記の2つをダウンロードしインストールします。

http://www.microsoft.com/downloads/details.aspx?FamilyID=8fa6e076-582b-440f-95cb-c40ed23fdf59&DisplayLang=en


http://www.microsoft.com/downloads/details.aspx?FamilyID=29b6b62b-a25a-498d-aa14-90b68cf2e392&DisplayLang=en



2.Webサイトの新規作成
Visual Studio 2005を起動し、新しいWebサイトの作成でプロジェクトのテンプレート「ASP.NET AJAX CTP-enabled Web site」を選択し、[OK]ボタンを押します。なお、Visual Studio 2005 SP1をインストールしている場合には、Webプロジェクトで作成しても「ASP.NET AJAX CTP-enabled Web site」のテンプレートを選択することができます。


3.Webサービスの作成
新しい項目の追加で、「WebService.asmx」を作成します。Class WebServiceの属性に下記の一行を追加します。

<System.Web.Script.Services.ScriptService()> _
デフォルトで書かれているHelloWorldメソッドを下記のコードに書き換えます。
<WebMethod()> _
Public Function GetDataTable(ByVal s As String) As System.Data.DataTable
    Dim dt As New System.Data.DataTable()
    dt.Columns.Add(New System.Data.DataColumn("column1", GetType(String)))
    For i As Integer = 0 To s.Length
        dt.Rows.Add(s.Substring(i))
    Next
    Return dt
End Function


4.aspxの作成
「Default.aspx」のソース画面を表示させ、asp:ScriptManagerタグとdivタグの部分を下記のコードに書き換えます。
<form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" >
            <Scripts>
                <asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewScript.js" />
            </Scripts>
            <Services>
                <asp:ServiceReference Path="WebService.asmx" />
            </Services>
        </asp:ScriptManager>
       </form>
        <div>
            <input id="Text1" type="text" onkeyup="DoUpdate()" />
            <select id="Select1" multiple="multiple" />
        </div>
       <script type="text/javascript">
        Sys.Application.add_load(OnPageLoad);
 
        var ListControl = null;
        var Input = null;
        function OnPageLoad(sender, eventArgs)
        {
            ListControl = new Sys.Preview.UI.Selector($get("Select1"));
            Input = $get("Text1");
        }
 
       function DoUpdate()
       {
            WebService.GetDataTable(Input.value, OnRequestComplete);
       }
 
       function OnRequestComplete(Result)
       {
            var table = Sys.Preview.Data.DataTable.parseFromJson(Result);
            ListControl.set_textProperty("column1");
            ListControl.set_data(table);
        }
    </script>


5.Web.configのコメント部分をはずす
Web.configファイルの下記の部分がコメントアウトされているので、コメントをはずします。
<jsonSerialization maxJsonLength="500">
  <converters>
      <add name="DataSetConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataSetConverter, Microsoft.Web.Preview, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      <add name="DataRowConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataRowConverter, Microsoft.Web.Preview, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      <add name="DataTableConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataTableConverter, Microsoft.Web.Preview, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
  </converters>
</jsonSerialization>


これで完成です。どのような動きになるのかは、実際に作成して確認してみてください。