日期:2010-11-20  浏览次数:20515 次

  随着ajax技术的出现,web 2.0时代已经来临,目前已经涌现了大量的web 2.0的网站,比如live.com,fclickr相册网站,google Map等等。那什么是ajax呢?AJAX技术其实是旧瓶装新酒了,它使用了异步JavaScript+XML。这种技术首先由微软在1999年引入,并以"使用远程调用的DHTML/JavaScript web应用程序"著称。这一技术的基本思想是,允许一个互联网浏览器向一个远程页面/服务作异步的HTTP调用,并且用收到的结果更新一个当前web页面而不必刷新整个页面。根据这种技术创建者的意见,这种技术应能够改进客户端的体验,使得HTTP页面外观与使用感觉很类似于Windows桌面应用程序。

  目前,已经涌现出了不少关于ajax的技术框架。而在.net 方面,也有不少开源的框架,如ajax.net,magic ajax等。而微软也推出了自己的ajax框架----Atlas,目前的版本是6月份的CTP版本。在Atlas中,已经封装好了大量的ajax控件和功能,十分方便。本文中将以两个实例来说明如何使用Atlas来实现两个简单的ajax应用。

  首先,我们要下载atlas,可以到 http://atlas.asp.net上去下载atlas的相关安装文件。我们先来看一个简单的例子,在这个例子中,
我们通过asp.net 2.0中的日历控件来说明如何使用atlas.先打开vs.net 2005,选择"新建web站点",如下图,这时会发现有"Atlas web site"的模版,这时我们可以输入要创建应用的名称,这里我们就用默认的名称AtlasWebSite1。

  在方案解决器中,你会发现vs.net 2005已经预先放置了一些文件,其中,在bin文件夹下包含了Microsoft.Web.Atlas.dll文件,这是支持ajax功能的文件。为了能在设计中使用到ajax控件,必须在TOOLS工具箱中添加一个新的选项卡,命名为Atals,然后右键点击该选项卡,在弹出的菜单中选择"choose item",然后用浏览的功能,选择atals.dll文件,这样,就添加了一系列的Atals控件,如下图:

  我们将其中的ScriptManager控件拖拉到页面中去。ScriptManager控件可以看作是管理Atlas控件的集合,它用来处理页面上的所有Atlas组件以及局部页面的更新,生成相关的客户端脚本,所有需要支持Atlas的ASP.NET页面上有且只能有一个ScriptManager控件。在ScriptManager控件中我们可以指定需要的脚本库,或者指定通过JS来调用的Web Service,还可以指定页面错误处理等。

  接着,我们拖拉一个日历控件到页面中去,放在刚才scriptmanager控件的下面,并且选择一个喜欢的样式,如下图所示:

  接下来,我们看下如何在这个日历控件中使用ajax技术。在.net 的日历控件中,人们经常抱怨的是,每次选定日历上的一个日期,都会引发一次postback页面回传,需要用户等待,十分不方便。下面,我们通过Atals控件,来对日历控件进行改造。

  在default.aspx页中,切换到代码视图,在之前的<atlas:ScriptManager>控件中,加入EnablePartialRendering属性,以使得atlas可以对页面进行局部更新,如下所示

<atlas:ScriptManager ID="ScriptManager1" runat="server"
EnablePartialRendering="true" />

  再增加一个<UpdatePanel>控件,UpdatePanel是Atlas中一个很重要的控件,功能强大容易使用,可以只做很小的改动就可以向已有的ASP.NET站点添加Ajax功能,我们再将日历控件拖拉放到updatepanel控件中去,其中要注意到,日历控件是放到<ContentTemplate>的标签内的,该标签内放的就是受UpdatePanel控制的控件,如下代码所示:

<atlas:UpdatePanel ID="id1" runat="server">
<ContentTemplate>
<asp:Calendar ID="Calendar1" runat="server"
BackColor="#FFFFCC" ... />
</asp:Calendar>
</ContentTemplate>
</atlas:UpdatePanel>

  为了更好地看到效果,我们增加两个下拉选择框,可以让用户选择年份和月份,代码如下所示

<form id="form1" runat="server">
<atlas:ScriptManager ID="ScriptManager1" runat="server"
EnablePartialRendering="true" />

<asp:DropDownList ID="DropDownList1" runat="server"
AutoPostBack="True">
 <asp:ListItem Value="1">Jan</asp:ListItem>
 <asp:ListItem Value="2">Feb</asp:ListItem>
 <asp:ListItem Value="3">Mar</asp:ListItem>
 <asp:ListItem Value="4">Apr</asp:ListItem>
 <asp:ListItem Value="5">May</asp:ListItem>
 <asp:ListItem Value="6">Jun</asp:ListItem>
 <asp:ListItem Value="7">Jul</asp:ListItem>
 <asp:ListItem Value="8">Aug</asp:ListItem>
 <asp:ListItem Value="9">Sep</asp:ListItem>
 <asp:ListItem Value="10">Oct</asp:ListItem>
 <asp:ListItem Value="11">Nov</asp:ListItem>
 <asp:ListItem Value="12">Dec</asp:ListItem>
</asp:DropDownList>

Year

<asp:DropDownList ID="DropDownList2" runat="server"
AutoPostBack="True">
<asp:ListItem>2005</asp:ListItem>
<asp:ListItem>2006</asp:ListItem>
<asp:ListItem>2007</asp:ListItem>
</asp:DropDownList><br />

  然后在code-behind的代码中,写入如下代码:

Protected Sub DropDownList1_SelectedIndexChanged( _
ByVal sender As Object, _
ByVal e As System.EventArgs) _
Handles DropDownList1.SelectedI