Windows Vista艰难的销售之路-技术开发专区

Windows Vista艰难的销售之路

作者：IT168 曲文编辑：李宁 2007-07-12 09:03

【IT168 专稿】

摘要：本文介绍ASP.NET AJAX Extensions服务器端控件 UpdatePanel，套用Microsoft的资深讲师的话来说UpdatePanel是一个伟大的控件，可能有夸张之嫌，但称之为令人振奋的控件应该一点都不为过。

UpdatePanel可以用来创建令人振奋的局部异步更新Web应用程序，它是ASP.NET 2.0 AJAX Extensions中最核心的一个控件，其强大之处在于不用编写任何客户端脚本，只要在一个页面上添加几个UpdatePanel控件和一个ScriptManager控件就可以自动实现局部异步更新。通过本文来学习一下UpdatePanel简单的使用方法：

一、 UpdatePanel重要的属性

属性	说明
ChildrenAsTriggers	当UpdateMode属性为Conditional时，UpdatePanel中的子控件的异步回送才会引发UpdatePanle的更新。
RenderMode	表示UpdatePanel最终输出的HTML元素。Block（默认）表示 <div>，Inline表示<span>
UpdateMode	表示UpdatePanel的更新模式，有两个选项：Always（默认）和 Conditional。Always是不管有没有Trigger，其他控件都将更新该UpdatePanel，Conditional表示只有当前UpdatePanel的 Trigger，或ChildrenAsTriggers属性为true时当前 UpdatePanel中控件引发的异步回送或者整页回送，或是服务器端调用Update()方法才会引发更新该UpdatePanel。

上面是UpdatePanel几个比较主要的设置属性，个人觉得的读者应该认真阅读。这样才能对UpdatePanel有比较好的理解，对读者以后使用UpdatePanel有比较大的帮助。

二、 使用编程来实现UpdatePanel

在ScriptManager使用介绍中，我们对UpdatePanel中有个基本使用方法的示例。在这里我们主要来讲一下，怎么在编程下实现前面的例子。有印象的读者，应该知道在哪个示例中只是存在一个UpdatePanel，在UpdatePanel中有两个控件：Label1和DropDownList1。在触发SelectIndexChange时，异步更新Label1的Text属性。

protected void Page_Load(object sender, EventArgs e)
    ...{
        //添加ScriptManager控件
        ScriptManager ScriptMan = new ScriptManager();
        ScriptMan.ID = "ScriptManager1";

        //添加UpdatePanel控件
        UpdatePanel up1 = new UpdatePanel();
        up1.ID = "UpdatePanel1";
        //设置更新模式
        up1.UpdateMode = UpdatePanelUpdateMode.Conditional;

        //添加DropDownList控件
        DropDownList Ddl = new DropDownList();

        Ddl.ID = "DropDownList1";
        Ddl.AutoPostBack = true;

        Ddl.Items.Add("Hello World");
        Ddl.Items.Add("Hello Ajax");

        Ddl.SelectedIndexChanged += new EventHandler(Ddl_SelectedIndexChanged);

        //添加Label控件
        Label label1 = new Label();

        label1.ID = "Label1";
        label1.Text = "Label1";

        //将控件加入UpdatePanel中
        up1.ContentTemplateContainer.Controls.Add(Ddl);
        up1.ContentTemplateContainer.Controls.Add(label1);

        Page.Form.Controls.Add(ScriptMan);
        Page.Form.Controls.Add(up1);

    }

    void Ddl_SelectedIndexChanged(object sender, EventArgs e)
    ...{
        ((Label)this.Page.FindControl("Label1")).Text = ((DropDownList)this.Page.FindControl("DropDownList1")).SelectedValue;
    }

三、Triggers属性

在ASP.NET AJAX中UpdatePanel有个比较重要的属性 Triggers，它有两个值分别为AsyncPostBackTrigger和PostBackTrigger。AsyncPostBackTrigge用来指定某个服务器端控件以及其将触发的服务器端事件，作为该UpdatePanel异步更新的触发器，它需要设置的属性有控件ID和服务端控件的事件；PostBackTrigger用来指定在UpdatePanel中的某个服务端控件，它所引发的回送不使用异步回送，而仍然是传统的回送，换句话说就是，用提交表单的形式来交互。

我们用一个嵌套UpdatePanel的例子，来说明这个问题比较直观。这个例子会使用到UpdateMode和Triggers两个属性。我们先看代码，在后面我们再来分析区别。

Aspx页面代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpdatePanel_2.aspx.cs" Inherits="Updatepanel_UpdatePanel_2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

<div>

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

</asp:ScriptManager>

</div>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">

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

<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text=" BtnParent" />

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

<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>

<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text=" BtnChild" />

</ContentTemplate>

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

</Triggers>

</asp:UpdatePanel>

</ContentTemplate>

</asp:UpdatePanel>

</form>

</body>

</html>

CodeBehind代码：

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Updatepanel_UpdatePanel_2 : System.Web.UI.Page
...{
    protected void Page_Load(object sender, EventArgs e)
    ...{
        Label1.Text = DateTime.Now.ToString();
        Label2.Text = DateTime.Now.ToString();
    }
    protected void Button1_Click(object sender, EventArgs e)
    ...{
        Label1.Text = DateTime.Now.ToString();
    }
    protected void Button2_Click(object sender, EventArgs e)
    ...{
        Label2.Text = DateTime.Now.ToString();
    }
}

当点击BtnParent时，两个UpdatePanel中Label显示的时间都更新了。而点击BtnChild时，只有内层的UpdatePanel中Label显示的时间更新了。这个示例的效果，就是UpdateMode和Triggers两个属性设置的关系了。当UpdateMode设置为Conditional时，这时设置Triggers属性就有用了。我们可以看到，内层的UpdatePanel中，多了三行Triggers的代码：

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

</Triggers>

这段代码的意思是：我们采用AsyncPostBackTrigger的方式来交互，而触发的是Button2也就是BtnChild，触发的事件为Click。

这样我们可以使用这两个属性，让一个Web页面中，同时存在多个UpdatePanel。并且，UpdatePanel可以相互嵌套了。

四、UpdatePanel使用总结

只要放置在UpdatePanel中的控件，使用者就可以使用异步更新这些控件中的数据。包括数据控件，也是没有问题的。比如：DataView的分页，DateDetail中的更新、删除等等。你可以任意放置你的UpdatePanel，来实现异步更新，来制作没有“屏闪”的Web程序。

关注我们