使用 Asp.net Future May 2007 开发Silverlight应用-技术开发专区

使用 Asp.net Future May 2007 开发Silverlight应用

作者：张善友编辑： nancy 2007-12-27 00:00

   【IT168 技术文档】 Microsoft ASP.NET Futures May 2007，这是一个Future的好东西，包括了：ASP.NET AJAX Futures，Silverlight Controls for ASP.NET，Dynamic Data Controls for ASP.NET，ASP.NET Application Services，Dynamic Languages Support in ASP.NET。今天尝试了一下Silverlight Controls for ASP.NET中的Xaml Control，Xaml Control是一个Asp.net AJAX扩展控件，使用这个控件就可以不需要引用silverlight.js文件了，也不需要调用Sys.Silverlight.createObject或者Sys.Silverlight.createObjectEx的脚本了，就像Asp.net 服务端控件那样使用，开发很简单，Js脚本可以按照ASP.NET AJAX JavaScript库进行面向对象的编程。在下面内容之前建议你先看下面两篇文章：
    更新Silverlight ctp到Silverlight beta 1.0
    ASP.NET AJAX 控件开发基础

下面这个例子是对Silverlight1.0SDK 时钟例子的重构:

1、首先下载安装 Microsoft ASP.NET Futures May 2007

2、创建一个ASPNETFuturesEnabledWebApplication类型项目

3、将Clock例子的js，xaml和assets文件夹拷贝到项目中，删除js目录下的silverlight.js文件

4、重构Clock.js代码如下：

this.hourAnimation = null;
this.minuteAnimation = null;
this.secondAnimation = null;
}
designerClock.prototype = {
initializeComponent: function(slhost) {
var host = slhost.content;
this.hourAnimation = host.findName("hourAnimation");
this.minuteAnimation = host.findName("minuteAnimation");
this.secondAnimation = host.findName("secondAnimation");
}
}
Type.registerNamespace("Custom"); 
Custom.Clock = function(element)
{
Custom.Clock.initializeBase(this, [element]);
this._designer = new designerClock();
this.control = null; 
} 
Custom.Clock.prototype = {
xamlInitialize : function() {
Custom.Clock.callBaseMethod(this, 'xamlInitialize');
// We could push this into a base class for the designer file
this._designer.initializeComponent(this.get_element()); 
var now = new Date(); 
var hourAnimation = this._designer.hourAnimation;
var minuteAnimation = this._designer.minuteAnimation;
var secondAnimation = this._designer.secondAnimation;
if (hourAnimation) {
var hours = now.getHours(); 
// We need to include minutes as well. Because each hour consists of 
// 30 degrees, each additional minute adds half a degree to the angle
// of the hour hand 
var angle = (hours / 12) * 360 + now.getMinutes()/2;
angle += 180; 
hourAnimation.from = angle.toString();
hourAnimation.to = (angle + 360).toString();
} 
if (minuteAnimation) {
var minutes = now.getMinutes();
var angle = (minutes / 60) * 360;
angle += 180; 
minuteAnimation.from = angle.toString();
minuteAnimation.to = (angle + 360).toString();
} 
if (secondAnimation) {
var seconds = now.getSeconds();
var angle = (seconds / 60) * 360;
angle += 180; 
secondAnimation.from = angle.toString();
secondAnimation.to = (angle + 360).toString();
}
},
dispose: function() {
if (this.control) { 
this.control = null;
}
Custom.Clock.callBaseMethod(this, "dispose"); 
}
}
Custom.Clock.registerClass('Custom.Clock', Sys.Preview.UI.Xaml.Control); 
在Default.aspx页面中加入一个Xaml Control，内容如下：
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Name="PreviewScript.js" Assembly="Microsoft.Web.Preview" />
</Scripts>
</asp:ScriptManager>
<div>
<asp:Xaml ID="Xaml1" runat="server" XamlUrl="~/xaml/Clock.xaml" Width="350" Height="350" ClientType="Custom.Clock">
<Scripts>
<asp:ScriptReference Path="js/Clock.js" />
</Scripts>
</asp:Xaml>
</div>
</form>
</body>

关注我们