ITPub博客

首页 > Linux操作系统 > Linux操作系统 > ASP.NET4与VS2010开发Ajax Library特征

ASP.NET4与VS2010开发Ajax Library特征

原创 Linux操作系统 作者:miymilll 时间:2010-07-02 15:44:34 0 删除 编辑

ASP.NET 4包括了一个早期版本的Microsoft Ajax Library,它并不支持在本文中所描述的功能。为此,请下载从ASP.NET网站下载此库的最新版本。

  一、编码式语法

  Microsoft AJAX Library支持使用一种简单语法来创建控件。例如,您可以使用下面的一行代码来创建水印并把它关联到一个ID为Name的HTML元素上:

  Sys.create.watermark("#Name", {WatermarkText: "Add name here..." } );

  当一个包含此代码的HTML文档在Web浏览器中呈现时,一个水印即被显示出来,如下面的例子所示:

  当您使用Visual Studio 2008或Visual Studio 2010创建一个客户端控件时,你会得到与你的输入相关的智能感知支持,如下图所示:

二、脚本加载器

  Microsoft Ajax Library中包括了一个客户端脚本加载器。此客户端脚本加载器能够自动加载客户端组件或由控件所需的所有脚本并以正确的顺序执行这些脚本。

  客户端脚本加载器支持以下功能:

   自动加载脚本所需的所有资源。

   确保每一个脚本被加载一次。

   通过以并行方式加载脚本以及合并脚本改进了系统的性能。

   支持仅在需要时加载脚本(称为“懒加载”)。

   支持加载例如jQuery这样的第三方脚本和你自己的脚本。

  例如,下面的代码就利用了脚本加载器的优势来加载客户端水印控件需要的所有脚本。

 

"../Scripts/MicrosoftAjax/start.js"
     type=
"text/javascript">
"../Scripts/ACT/ACTRegisterExtended.js"
     type=
"text/javascript">
"text/javascript">
    Sys.require(Sys.components.watermark,
function() {
        Sys.create.watermark(
"#Name", {
            WatermarkText:
"Add name here..."
        });
    });

    上面代码中的Sys.require方法在后台使用了脚本加载器。由你来向Sys.require方法提供一个组件(或组件数组)的名称和一个回调方法。当组件所需的所有的脚本加载完后,调用回调方法。举例来说,前面的代码就加载了下面的脚本,它们都是水印控件所需要的:

   MicrosoftAjaxComponentModel.js

   MicrosoftAjaxCore.js

   MicrosoftAjaxGlobalization.js

   ACTCommon.js

   ACTExtenderBase.js

   ACTWatermark.js

  为了提高性能,脚本加载器并行加载所有这些脚本,然后以正确的顺序执行这些脚本。脚本加载器非常智能,能够确保对所要求的任何脚本仅加载一次。

  您通过添加一个引用Start.js文件的script标记实现把脚本加载器添加到一个页面中。该Start.js文件可以在您的本地服务器上,也可以引用位于Microsoft Ajax Content Delivery Network上的Start.js文件,这是通过使用下面的脚本标记实现的:

"ajax.microsoft.com/ajax/0910/start.js">

 

当你添加了对Start.js的引用后,您可以通过使用Sys.requires方法来加载其他要求的JavaScript文件。

  要了解有关Microsoft Ajax Content Delivery Network更多的内容,请参阅ASP.NET网站上Microsoft Ajax CDN。

三、客户端数据访问

  Microsoft Ajax Library使我们有能够建立一个完全在Web浏览器端执行的数据库驱动的Web应用程序。有三种重要特征使我们借助于微软的客户端Ajax功能有可能实现客户端数据访问:

  客户端数据控件

  客户端模板

  客户端数据上下文

  客户端的DataView控件能够支持您显示任何一条或一组数据库记录。您可以通过创建一个客户端模板来使用DataView控件显示数据库记录。例如,您可以使用类似下面的代码来显示所有的通过一个名为MovieService的WCF服务检索到的数据库记录:

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml" >

  Movies
  "Site.css" rel="stylesheet" type="text/css" />
  "Scripts/MicrosoftAjax/start.js" type="text/javascript">
  "text/javascript">
    Sys.require(,
function() {    
        Sys.create.dataView(
"#moviesView",
            {
                dataProvider :
"Services/MovieService.svc",
                fetchOperation:
"GetMovies",
                autoFetch:
true
            }
        );
    });
  


  

Movies


  
    "moviesView">
        
  • {{Title}} - {{Director}}

  •   


上面示例中的JavaScript代码使用客户端脚本加载器来加载DataView控件和DataView控件所使用的DataContext对象需要的所有脚本,最终实现从一个名为MovieService的WCF服务检索所需要的数据。下一步,创建了一个DataView控件并把它附加到一个HTML元素UL上(其ID 为moviesView)。

  客户端模板包含在页面的主体中,像下面这样:

    "moviesView">
        
  • {{Title}} - {{Director}}

注意到,DataView控件使用客户模板来格式化从WCF服务检索到的每一个数据库记录。其中,占位符{{Title}}用于显示Movie.Title属性的值,而另一个占位符{{Director}}用于显示Movie.Director属性的值。

 

  当你请求上述文档时,将在Web浏览器中呈现一个如下所示的网页:

  您可以使用DataView控件来显示检索自不同数据源的数据。这些数据源包括:

  ASP.NET(.asmx)的Web服务

  WCF Web服务

  ADO.NET数据服务

  返回JSON格式数据的任何内容。

注意到,DataView控件使用客户模板来格式化从WCF服务检索到的每一个数据库记录。其中,占位符{{Title}}用于显示Movie.Title属性的值,而另一个占位符{{Director}}用于显示Movie.Director属性的值。

 

  当你请求上述文档时,将在Web浏览器中呈现一个如下所示的网页:

  您可以使用DataView控件来显示检索自不同数据源的数据。这些数据源包括:

   ASP.NET(.asmx)的Web服务

   WCF Web服务

   ADO.NET数据服务

   返回JSON格式数据的任何内容。

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml">

  jQuery Watermark
  "Site.css" rel="stylesheet" type="text/css" />
  "Scripts/MicrosoftAjax/start.js" type="text/javascript">
  "Scripts/ACT/ACTRegisterExtended.js" type="text/javascript">
  "text/javascript">
        Sys.require(,
function() {
            $(
".required")
                .watermark({
                    WatermarkText:
"Add something here..."            
                })
                .css({
                    backgroundColor:
"red",
                    color:
"white"
                });
        });
  


  "text" />
  "text" />

在此,使用jQuery的$(".required")选择器来检索网页中的每一个需要使用相应的CSS类的元素。最后,一个水印被附加到匹配的所有元素上。

  请注意,Microsoft Ajax Library支持jQuery中的链型语法。在水印应用到jQuery选择器返回的元素上之后,所有匹配元素的背景颜色和前景颜色都发生了改变。

 

1.JPG

2.JPG

3.JPG

4.JPG

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/9914938/viewspace-667008/ ,如需转载,请注明出处,否则将追究法律责任。

上一篇: 没有了~
下一篇: 没有了~
请登录后发表评论 登录
全部评论

注册时间:2010-07-02

  • 博文量
    1
  • 访问量
    1534