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の属性に下記の一行を追加します。
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タグの部分を下記のコードに書き換えます。
<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ファイルの下記の部分がコメントアウトされているので、コメントをはずします。
<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>
これで完成です。どのような動きになるのかは、実際に作成して確認してみてください。