AJAX笔记之一: 构建第一个AJAX网页

======================================================
注：本文源代码点此下载
======================================================

首先准备环境,从微软下载asp.net ajax 1.0 extentions(网址:http://asp.net/ajax/downloads/default.aspx) , 当然,首先应该安装vs2005, 在2003 上是否可行, 我不知道, 因为没有试过.

安装完成以后, 打开vs2005, 新建一个网站, 会看到比原来多出来一项"asp.net ajax-enabled web site",就选这一项, 确定, 会看到生成的default.aspx, 这个默认页面的最上方, 有一个不可见控件: scriptmanager, 这是每个页面都要包含的一个控件, 所以默认页面直接把它添加进来了.

打开工具箱, 会看到下面多了一个ajax extentions 选项卡, 里面就是ajax 专用控件啦, 拖一个updatepanel 到页面上, 然后往updatepanel 里面拖一个按钮和一个label, 在按钮的点击事件里, 写 label1.text += "hi";大功告成, 可以编译运行了, 先运行一下吧.

编译运行, 不停地点击按钮, 会发现label 上的hi 越来越多, 但是整个页面完全没有刷新的痕迹, cool 吧. 呵呵 .

现在来看这个小程序: updatepanel 是最基本的控件, 它是刷新的单位, ajax 网页之所以可以做到不回传, 就是因为每次只刷新一个updatepanel, 而它的刷新是看不出来的, 当然, 这是借助了dhtml 来实现的.

现在我们对这个小程序做一点修改.

把原来button1 的点击事件函数删掉, 并把button1 从updatepanel1 里挪出来, 放在页面顶端, 然后添加另一个button,并在页面上添加另外一个updatepanel, 并且里面也label, (分别命名为updatepanel2, button2, label2 , ) 然后在页面的load 函数里写上:

label1.text+="hi";

label2.text+="hi";这样, default.aspx.cs 里现在只有一个函数就是load 函数,

然后开始处理aspx 页面: 把updatepanel1 和updatepanel2. 的childrenastriggers 属性设置为false, updatemode 属性设置为conditional, 然后切换到xhtml 代码页面, 在contenttemplate 节点上面, 增加triggers 节点,例如, 我的updatepanel1 的代码如下:

asp:updatepanel id="updatepanel1" runat="server">

triggers>

asp:asyncpostbacktrigger controlid="button1" eventname="click" />

triggers>

contenttemplate>

asp:label id="label1" runat="server">asp:label>

contenttemplate>

asp:updatepanel>

当然啦, 也可以直接在"设计" 视图下编辑它的triggers 属性, 也是同样的效果.

updatepanel2也如法炮制.然后, 重新编译运行: 点击button1 3次, label1 上出现四个"hi", label2 仍然只有一个(第一次载入时写上去的), 然后点击一下button2, label2马上变成五个hi了.

这两个button 放在updatepanel 之外, 如果没有"

" 节, 点击它们一定会引起全页回传, 但是加了

节以后, 点击它们时, 就是异步回传了, 而且有趣的是, 由于实际上还是进行了回传, 所以page_load 函数仍然会执行, 只不过, 执行以后, 页面不会即时刷新. 当点击button1 时, updatepanel1 会刷新, 但是2 不会, 所以尽管实际上两个label 同时加了一个hi , 但是只会看到label1 的变化. --------这就是为什么要把updatemode 设置为conditional, 如果是默认的always, 则两个label 会同时更新显示.

updatemode 控制的是, updatepanel 何时回传, 如果是always , 则任何引起回传的事件都会使其自动更新, 如果是conditional, 则除非显示地使其回传 ,或整个页面回传, 否则它会keep 当前的状态不动.

而childrenastriggers 属性在这里实际上没起到作用, 当这个属性被设置为true 时 , 其子控件可以引起panel 的更新, 但是置为false, 则不会.

以下粘贴完整的示例代码:

@ page language="c#" autoeventwireup="true" codefile="default.aspx.cs" inherits="_default" %>

@ register assembly="system.web.extensions, version=2.0.0.0, culture=neutral, publickeytoken=31bf3856ad364e35"

namespace="system.web.ui" tagprefix="asp" %>

doctype html public "-//w3c//dtd xhtml 1.1//en" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">

html xmlns="http://www.w3.org/1999/xhtml">

head runat="server">

title>untitled pagetitle>

head>

body>

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

asp:scriptmanager id="scriptmanager1" runat="server" />

br />

asp:button id="button1" runat="server" onclick="button1_click" text="button" />

asp:button id="button2" runat="server" onclick="button1_click" text="button" />br />

div>

asp:updatepanel id="updatepanel1" runat="server">

triggers>

asp:asyncpostbacktrigger controlid="button1" eventname="click" />

triggers>

contenttemplate>

asp:label id="label1" runat="server">asp:label>

contenttemplate>

asp:updatepanel>

asp:updatepanel id="updatepanel2" runat="server">

triggers>

asp:asyncpostbacktrigger controlid="button2" eventname="click" />

triggers>

contenttemplate>

br />

asp:label id="label2" runat="server">asp:label>

contenttemplate>

asp:updatepanel>

div>

form>

body>

html>

protected void page_load(object sender, eventargs e)

{

label1.text += "hi";

label2.text += "hi";

}

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/