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">

<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />

</Triggers>

<asp:Label ID="Label1" runat="server"></asp:Label>

</ContentTemplate>

</asp:UpdatePanel>

当然啦, 也可以直接在"设计" 视图下编辑它的Triggers 属性, 也是同样的效果.
updatePanel2也如法炮制. 然后, 重新编译运行: 点击button1 3次, label1 上出现四个"hi", label2 仍然只有一个(第一次载入时写上去的), 然后点击一下button2, label2马上变成五个hi了.

这两个button 放在updatePanel 之外, 如果没有"<Triggers>" 节, 点击它们一定会引起全页回传, 但是加了<Triggers> 节以后, 点击它们时, 就是异步回传了, 而且有趣的是, 由于实际上还是进行了回传, 所以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">

<title>Untitled Page</title>

</head>

<body>

<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">

<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />

</Triggers>

<asp:Label ID="Label1" runat="server"></asp:Label>

</ContentTemplate>

</asp:UpdatePanel>

<asp:UpdatePanel ID="UpdatePanel2" runat="server">

<asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />

</Triggers>

 <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";

}