ASP.NET AJAX の XML-Script を使ったクライアントサイドのデータバインド(Futures CTP 版のサンプル)
環境:
ASP.NET AJAX Extension 1.0
ASP.NET AJAX January Futures CTP
こんにちは。
Atlas時代からいろいろ試されている方はご存知と思いますが、ASP.NET AJAX では、xml-script とよばれるスクリプトを使って、クライアントサイドで、Microsoft AJAX Libraryの組み込みコンポーネントを使ったデータバインドを意味的に(宣言的に)記述することができます。しかし、残念ながら、正式版(ASP.NET AJAX 1.0 Extension)には含まれておらず、現状は、Futures CTP 版でこの仕組みを利用することになります。
今日は、そのサンプルソースを掲載しておきます。
尚、使用する際は、Preview版のScriptReferenceを含んでおきます。
====================================================
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
// <!CDATA[
function Button1_onclick() {
WebServiceProjects.GetProjects(OnComplete);
}
function OnComplete(value) {
var projectElement = $get("ProjectResults");
projectElement.control.set_data(value);
}
// ]]>
</script>
</head>
<body>
<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="WebServiceProjects.asmx" />
</Services>
</asp:ScriptManager>
<input id="Button1" type="button" value="Get Projects" onclick="return Button1_onclick()" /><br />
<div id="ProjectResults">
</div>
<div id="ProjectTemplate">
This is a list of all project :
<div id="ProjectItemTemplate">
Project: <strong><span id="ProjectNameLabel"></span></strong>
</div>
</div>
</form>
<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components>
<listView id="ProjectResults" itemTemplateParentElementId="ProjectTemplate">
<layoutTemplate>
<template layoutElement="ProjectTemplate" />
</layoutTemplate>
<itemTemplate>
<template layoutElement="ProjectItemTemplate">
<label id="ProjectNameLabel">
<bindings>
<binding dataPath="ProjectName" property="text" />
</bindings>
</label>
</template>
</itemTemplate>
</listView>
</components>
</page>
</script>
</body>
</html>