AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

使用ASP.NET AJAX 1.0框架PreviewGlitz进行网页动画编程

2017-11-09 1174
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
一、引言
微软最新推出的AJAX框架为ASP.NET AJAX 1.0（下载地址为 [url]http://ajax.asp.net/downloads/default.aspx[/url]），此框架由ASP.NET 2.0 AJAX Extensions 1.0和ASP.NET AJAX Control Toolkit两个基本部分组成。此外，还提供了一个更新一些的CTP（社区测试试用）版本，下载页面如下图1所示：
图1：下载示例程序所用的CTP版本附加脚本库
声称为“国内第一本Atlas图书”的《Atlas基础教程—ASP.NET Ajax快速开发》（美：Laurence Moroney著；陈黎夫译；2006年11月，人民邮电出版社）第九章“使用AtlasUIGlitz脚本库”中，对于ASP.NET AJAX框架（原名为Atlas）提供的附加脚本库提供的动画功能作了较好的展示，但是新版本的ASP.NET AJAX框架1.0一问世，这一章中内容立即变得“面目全非”。第一，据本人分析，原文中的所有案例都是基于Atlas脚本声明性编程，而在新框架中这种 方式已经不再推荐使用；第二，原来的脚本库名已改（AtlasUIGlitz.js→PreviewGlitz.js，新文件存储于程序集 “Microsoft.Web.Preview.dll”中），且功能上与原先也有所不同。
本文基于目前最新框架的CTP版本，对它提供的淡入淡出动画功能在网页编程中进行试验。注意，在此，我们所使用的编程方式为JavaScript脚本编程方式。
【注意】本文示例试验环境为：Windows XP Professional＋VS2005＋ASP.NET 2.0 AJAX Extensions 1.0（见上图1）＋ASP.NET AJAX Futures January CTP；恕不赘述。
二、创建淡入淡出动画示例
伴随上面的CTP版本的程序集“Microsoft.Web.Preview.dll”提供了源码形式的几个.js脚本文件，但原文件把几百行的脚 本集中到了一行内（不知什么原因？），且没有任何注释，可读性极差。因为本文讨论的“淡入淡出”动画效果部分在原文中比较简短，所以，我干脆整理了一下， 列举如下： 

     
     

      //----------------------------------------------------------
      

// Copyright (C) Microsoft Corporation. All rights reserved.
      

//----------------------------------------------------------
      

// PreviewGlitz.js
      

Type.registerNamespace("Sys.Preview.UI.Effects");
      

//……………………（省略其它内容）
      

//---------------------------------------------------
      

//FadeAnimation动画功能
      

//---------------------------------------------------
      

Sys.Preview.UI.Effects.FadeEffect=function(){
      

throw Error.invalidOperation()
      

};
      

Sys.Preview.UI.Effects.FadeEffect.prototype={
      

FadeIn:0,FadeOut:1
      

};
      

Sys.Preview.UI.Effects.FadeEffect.registerEnum("Sys.Preview.UI.Effects.FadeEffect");
      

Sys.Preview.UI.Effects.FadeAnimation=function(){
      

//初始化基类，以便调用基类中的功能
      

Sys.Preview.UI.Effects.FadeAnimation.initializeBase(this)
      

};
      

//使用javascript prototype模型功能定义此类中的方法及属性
      

Sys.Preview.UI.Effects.FadeAnimation.prototype={
      

_effect:Sys.Preview.UI.Effects.FadeEffect.FadeIn,get_effect:function(){
      

return this._effect},
      

set_effect:function(a){
      

this._effect=a},
      

getAnimatedValue:function(c){
      

var a=0,b=1;
      

if(this._effect===Sys.Preview.UI.Effects.FadeEffect.FadeOut){
      

a=1;
      

b=0
      

}
      

return Sys.Preview.UI.Effects.Glitz.interpolate(a,b,c)
      

},
      

onStart:function(){
      

var a=0;
      

if(this._effect===Sys.Preview.UI.Effects.FadeEffect.FadeOut)
      

a=1;
      

this.setValue(a)},
      

onEnd:function(){
      

var a=1;
      

if(this._effect===Sys.Preview.UI.Effects.FadeEffect.FadeOut)
      

a=0;
      

this.setValue(a)},
      

setValue:function(a){
      

Sys.Preview.UI.Effects.Glitz.setElementOpacity(this.get_target().get_element(),a)
      

}
      

};
     
     


     
     

      Sys.Preview.UI.Effects.FadeAnimation.descriptor={
      

properties:[{
      

name:"effect",type:Sys.Preview.UI.Effects.FadeEffect}]
      

};
      

//注册这个新类
      

Sys.Preview.UI.Effects.FadeAnimation.registerClass("Sys.Preview.UI.Effects.FadeAnimation",
     
     


     
     

      Sys.Preview.UI.Effects.Animation)
      

//下面这一句是必须的
      

if(typeof(Sys)!=='undefined')Sys.Application.notifyScriptLoaded();

(一)构建示例页面
启动Visual Studio 2005，选择“文件→新建网站…”，然后选择“ASP.NET AJAX CTP-Enabled Web Site”模板，命名工程为“AjaxFadeAnimation”，并选择C#作为编程语言（如图2所示），最后点击OK。
图2：使用“ASP.NET AJAX CTP-Enabled Web Site”模板快速创建AJAX应用程序
注意，系统自动在网站根目录下，创建了一个Bin子目录，并在该目录下提供了一个“Microsoft.Web.Preview.dll”文件。而 且还注意到，系统自动为Default.aspx页面添加了一个ScriptManager服务器控件。这个控件是整个ASP.NET AJAX 1.0框架的核心，它管理着客户端运行时所需要的用于实现客户端功能的各种JavaScript脚本库的部署。而且，在新版本的框架中，这个控件的功能更 为强大，使用更为简易。还应特别注意，这时系统也自动地添加了对于System.Web.Extensions.dll程序集的引用，但是，没有显式地列 举于Bin子目录下。然后，把Default.aspx页面修改成如下图3所示形式：
图3：设计调用Web服务的客户端Web页面
上图中，我们简单地加入了两个HTML Input Button控件和一个DIV对象（下部的黄色大矩形）。我们的目的是，运行网页后，点击这两个不同的按钮实现下部DIV对象的淡入淡出动画效果展示。
下面是这个页面相应的源码形式： 

 
 

  <%@ Page Language="C#" AutoEventWireup="true" 
 
 


 
 

  CodeFile="Default.aspx.cs" Inherits="Default2" %>
 
 


 
 

  
  
   < Assembly="Microsoft.Web.Preview">
   
   
    < Assembly="Microsoft.Web.Preview"><%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" 
   
   
  
  
 
 


 
 

  
  
   < Assembly="Microsoft.Web.Preview">
   
   
    < Assembly="Microsoft.Web.Preview">  Inherits="Default2" %>
   
   
  
  
 
 


 
 

  
  
   < Assembly="Microsoft.Web.Preview">
   
   
    < Assembly="Microsoft.Web.Preview"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   
   
  
  
 
 


 
 

  
  
   < Assembly="Microsoft.Web.Preview">
   
   
    < Assembly="Microsoft.Web.Preview">  "
    
    [url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
   
   
  
  
 
 


 
 

  
  
   < Assembly="Microsoft.Web.Preview">
   
   
    < Assembly="Microsoft.Web.Preview"><html xmlns="
    
    [url]http://www.w3.org/1999/xhtml[/url]" >
    
    

<head runat="server">
    
    

<title>无标题页</title>
    
    

</head>
    
    

<body>
    
    

<form id="form1" runat="server">
    
    

<div>
    
    

<asp:ScriptManager ID="ScriptManager1" runat="server">
    
    

<Scripts>
    
    

<asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewGlitz.js" />
    
    

<asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewScript.js" />
    
    

</Scripts>
    
    


    
    

</asp:ScriptManager>
    
    


    
    

<input id="btnFadeOutAnimate" type="button" value="Fade Out" 
   
   
  
  
 
 


 
 

  
  
   < Assembly="Microsoft.Web.Preview">
   
   
    < Assembly="Microsoft.Web.Preview">           style="width: 155px; height: 37px" language="javascript" 
   
   
  
  
 
 


 
 

  
  
   < Assembly="Microsoft.Web.Preview">
   
   
    < Assembly="Microsoft.Web.Preview">            FadeUsingFutures(true)" />
    
    

<input id="btnFadeInAnimate" style="width: 135px; 
   
   
  
  
 
 


 
 

  
  
   < Assembly="Microsoft.Web.Preview">
   
   
    < Assembly="Microsoft.Web.Preview">           height: 37px" type="button" value="Fade In" language="javascript" 
   
   
  
  
 
 


 
 

  
  
   < Assembly="Microsoft.Web.Preview">
   
   
    < Assembly="Microsoft.Web.Preview">            FadeUsingFutures(false)" /><br />
    
    

<div id="animationTarget" style="width: 459px; height: 312px; 
   
   
  
  
 
 


 
 

  
  
   < Assembly="Microsoft.Web.Preview">
   
   
    < Assembly="Microsoft.Web.Preview">           background-color: #ffcc00">
    
    

&nbsp;</div>
    
    

</div>
    
    

</form>
    
    


    
    

<script language="javascript" type="text/javascript">
    
    

<!--
    
    

Sys.Application.initialize();//脚本系统初始化
    
    


    
    

//取得指向动画目标（作为一个Sys.UI.Control对象）的句柄
    
    

var domElementVar = new Sys.UI.Control( $get("animationTarget")  );
    
    

function FadeUsingFutures( fadeOut )
    
    

{
    
    

//创建FadeAnimation的一个实例
    
    

var fadeAnimation = new Sys.Preview.UI.Effects.FadeAnimation();
    
    


    
    

//决定是淡入还是淡出
    
    

var fadeEffect = fadeOut ?  
   
   
  
  
 
 


 
 

  
  
   < Assembly="Microsoft.Web.Preview">
   
   
    < Assembly="Microsoft.Web.Preview"> Sys.Preview.UI.Effects.FadeEffect.FadeOut : Sys.Preview.UI.Effects.FadeEffect.FadeIn ;
    
    


    
    

//隐藏/显示相应的按钮
    
    

$get("btnFadeOutAnimate").style.display =  fadeOut  ? "none":"block";
    
    

$get("btnFadeInAnimate").style.display  =  fadeOut  ? "block":"none";
    
    

//设置动画持续时间
    
    

fadeAnimation.set_duration( 0.3 );
    
    

//设置动画目标为一个Sys.UI.Control对象
    
    

fadeAnimation.set_target( domElementVar );
    
    

//设置动画效果( FadeIn / FadeOut )
    
    

fadeAnimation.set_effect( fadeEffect );
    
    

//设置最大不透明值
    
    

fadeAnimation.setValue( 70 );
    
    

//播放动画
    
    

fadeAnimation.play(); 
    
    

}
    
    

// -->
    
    

</script>
    
    

</body>
    
    

</html>
显然，我们在这里又添加了许多内容。首先，请注意下面一块代码： 
     
     
      < Assembly="Microsoft.Web.Preview">
      
      
       < Assembly="Microsoft.Web.Preview"> <form id="form1" runat="server">
       
       

<div>
       
       

<asp:ScriptManager ID="ScriptManager1" runat="server">
       
       

<Scripts>
       
       

<asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewGlitz.js" />
       
       

<asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewScript.js" />
       
       

</Scripts> 
       
       

</asp:ScriptManager>
根据框架及从网上查询的其它资料，ScriptManager控件必须位于一个< form>块内，否则必定出现错误（忘记了，但我试验过！）。其次： 

     
     

      <asp:ScriptReference Assembly="Microsoft.Web.Preview" 
     
     


     
     

      Name="PreviewGlitz.js" />
不能改为： 

     
     

      
      
       < Assembly="Microsoft.Web.Preview">  <asp:ScriptReference Assembly="Microsoft.Web.Preview" 
      
      
     
     


     
     

      
      
       < Assembly="Microsoft.Web.Preview">Name="Microsoft.Web.Resources.ScriptLibrary.PreviewGlitz.js" />
形式；否则，将会出现类似如下所示错误提示： 

     
     

      1.Assembly 'Microsoft.Web.Preview, Version=1.0.61025.0, Culture=neutral, 
     
     


     
     

      PublicKeyToken=31bf3856ad364e35' does not contain a Web resource with name 
     
     


     
     

      'Microsoft.Web.Resources.ScriptLibrary.PreviewGlitz.js'
      

2.Assembly 'Microsoft.Web.Preview, Version=1.0.61025.0, Culture=neutral, 
     
     


     
     

      PublicKeyToken=31bf3856ad364e35' does not contain a Web resource with name 
     
     


     
     

      'Microsoft.Web.Resources.ScriptLibrary.PreviewScript.js'
以上都是新框架规定使用的“死格式”，在此不赘述。
在接下来的javascript脚本中，对应新框架建议下的JavaScript脚本编程，已经加上了详细注释，恕不再多加解释（请参考本文开始提供的源.js文件源码）。
没有问题，则运行结果如下图4所示：
图4：示例网页运行结果快照
三、小结
新框架刚出，且参考资料实在少极。所以，本人基于原框架提供的资源（似乎没有提供直接的这方面示例，至少在最新框架中没有提供）和亲自试验，做了本文中的小示例演示。仅供各位参考。














本文转自朱先忠老师51CTO博客，原文链接：http://blog.51cto.com/zhuxianzhong/59830  ，如需转载请自行联系原作者



文章标签：
JavaScript
Web App开发
前端开发
.NET
关键词：
.NET框架
.NET编程
ASP.NET框架
ASP框架
ajax网页
技术小甜
目录
相关文章
小万哥丶
|
7月前
|
XML 前端开发 JavaScript
AJAX 前端开发利器：实现网页动态更新的核心技术
**AJAX** 允许网页在不刷新的情况下更新内容，实现异步与服务器交换数据。通过JavaScript的XMLHttpRequest对象，可发送和接收数据。当用户触发事件（如点击），函数向服务器发送GET请求，服务器响应后更新指定HTML部分。AJAX并非编程语言，而是利用浏览器内置对象、JavaScript和DOM技术。核心是XMLHttpRequest对象，它有多种方法（如`open()`和`send()`）和属性（如`onreadystatechange`、`readyState`和`status`）来处理请求和响应。
小万哥丶
126 2
AJAX 前端开发利器：实现网页动态更新的核心技术
宁波阿成.
|
7月前
|
开发框架 前端开发 JavaScript
ASP.NET AJAX使用方法概述（三）
ASP.NET AJAX使用方法概述（三）
宁波阿成.
56 1
阿珊和她的猫
|
7月前
|
XML 前端开发 JavaScript
使用 AJAX 提升网页数据的动态交互
使用 AJAX 提升网页数据的动态交互
阿珊和她的猫
138 0
lvbb66
|
4月前
|
XML JSON 前端开发
JSON与AJAX：网页交互的利器
JSON与AJAX：网页交互的利器
lvbb66
41 0
宁波阿成.
|
7月前
|
开发框架 缓存 前端开发
安装ASP.NET AJAX (一安装)
安装ASP.NET AJAX (一安装)
宁波阿成.
113 0
GoodTime
|
7月前
|
XML 开发框架 .NET
C# .NET面试系列八：ADO.NET、XML、HTTP、AJAX、WebService
## 第二部分：ADO.NET、XML、HTTP、AJAX、WebService #### 1. .NET 和 C# 有什么区别? .NET（通用语言运行时）： ```c# 定义：.NET 是一个软件开发框架，提供了一个通用的运行时环境，用于在不同的编程语言中执行代码。 作用：它为多语言支持提供了一个统一的平台，允许不同的语言共享类库和其他资源。.NET 包括 Common Language Runtime (CLR)、基础类库（BCL）和其他工具。 ``` C#（C Sharp）： ```c# 定义： C# 是一种由微软设计的面向对象的编程语言，专门为.NET 平台开发而创建。 作
GoodTime
329 2
阿珊和她的猫
|
7月前
|
JSON 前端开发 JavaScript
探秘 AJAX：让网页变得更智能的异步技术(下)
探秘 AJAX：让网页变得更智能的异步技术(下)
阿珊和她的猫
113 0
探秘 AJAX：让网页变得更智能的异步技术(下)
阿珊和她的猫
|
7月前
|
XML 前端开发 JavaScript
探秘 AJAX：让网页变得更智能的异步技术(上)
探秘 AJAX：让网页变得更智能的异步技术(上)
阿珊和她的猫
243 0
探秘 AJAX：让网页变得更智能的异步技术(上)
编程乐趣
|
开发框架 前端开发 .NET
用ajax和asp.net实现智能搜索功能
用ajax和asp.net实现智能搜索功能
编程乐趣
80 0
N..
|
7月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
71 1