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库进行面向对象的编程。在下面内容之前建议你先看下面两篇文章:
下面这个例子是对
Silverlight1.0SDK 时钟例子的重构:
1、首先下载安装
Microsoft ASP.NET Futures May 2007
2、创建一个ASPNETFuturesEnabledWebApplication类型项目
3、将Clock例子的js,xaml和assets文件夹拷贝到项目中,删除js目录下的silverlight.js文件
4、重构Clock.js代码如下:
designerClock = function() {
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");
}
}
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.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());
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();
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
// 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;
angle += 180;
hourAnimation.from = angle.toString();
hourAnimation.to = (angle + 360).toString();
}
hourAnimation.to = (angle + 360).toString();
}
if (minuteAnimation) {
var minutes = now.getMinutes();
var angle = (minutes / 60) * 360;
angle += 180;
var minutes = now.getMinutes();
var angle = (minutes / 60) * 360;
angle += 180;
minuteAnimation.from = angle.toString();
minuteAnimation.to = (angle + 360).toString();
}
minuteAnimation.to = (angle + 360).toString();
}
if (secondAnimation) {
var seconds = now.getSeconds();
var angle = (seconds / 60) * 360;
angle += 180;
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);
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>
<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>
按Ctrl + F5运行就可以看到漂亮的时钟了。
×××: [url]http://www.cnblogs.com/Files/shanyou/SilverlightFutures.zip[/url]
×××: [url]http://www.cnblogs.com/Files/shanyou/SilverlightFutures.zip[/url]
自由、创新、研究、探索……
©著作权归作者所有:来自51CTO博客作者张善友的原创作品,如需转载,请注明出处,否则将追究法律责任
0
收藏
推荐专栏更多
猜你喜欢
我的友情链接
CentOS 7 通过 持续集成包 安装最新的 Mono
Java线程:线程的调度-休眠
我们不得不面对的中年职场危机
职场终极密籍--记我的职业生涯
用光影魔术手制作一寸照片(8张一寸)
我的IT职场生涯: 毕业4年,月薪过万
Linux关闭休眠和屏保模式
年薪从0到10万-我的IT职场经验总结
Windows7删除休眠文件hiberfil.sys节省大量C盘空间
致IT同仁 — IT人士常犯的17个职场错误
“跳槽加薪”现象,无奈的职场规则
ASPNetCore MVC ModelValidation-ajax
C#如何设置Excel文档保护——工作簿、工作表、单元格
在.NET数据库访问方面的Dapper类库介绍
C#/VB.NET 如何添加、获取、删除PDF附件
C#/VB.NET 创建PDF项目符号列表和多级编号列表
C# /VB.NET 操作Word (一)——插入、修改、删除Word批注
C# 操作Excel数据透视表
微信支付---APP调起微信支付c#后台接口
扫一扫,领取大礼包
转载于:https://blog.51cto.com/shanyou/74280
Ctrl+Enter 发布
发布
取消