ASP.NET AJAX入门系列（4）：使用UpdatePanel控件（一）

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

主要内容

1．UpdatePanel控件概述

2．UpdatePanel工作原理

3．ContentTemplate属性

4．ContentTemplateContainer属性

5．Triggers属性

一．UpdatePanel控件概述

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

    <ContentTemplate>

        <!---->

    </ContentTemplate>

    <Triggers>

        <asp:AsyncPostBackTrigger />

        <asp:PostBackTrigger />

    </Triggers>

</asp: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的工作依赖于ScriptManager服务端控件（ASP.NET AJAX入门系列（2）：使用ScriptManager控件）和客户端PageRequestManager类（Sys.WebForms.PageRequestManager，在后面的客户端类中会专门说到），当ScriptManager中允许页面局部更新时，它会以异步的方式回传给服务器，与传统的整页回传方式不同的是只有包含在UpdatePanel中的页面部分会被更新，在从服务端返回HTML之后，PageRequestManager会通过操作DOM对象来替换需要更新的代码片段。

看一下官方网站提供的UpdatePanel工作原理图：

三．ContentTemplate属性

Contente Template标签用来定义UpdatePanel的内容，在它里面可以放任何ASP.NET元素。如果你想要使用编程的手法来控制UpdatePanel中的内容，就需要使用ContenteTemplateContainer，下面会说到，先来看一个简单的ContentTemplate的例子。

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

    <ContentTemplate>

        <asp:Calendar ID="Calendar1" ShowTitle="True" runat="server" />

        <div>

            Background:

            <br />

            <asp:DropDownList ID="ColorList" AutoPostBack="True" OnSelectedIndexChanged="DropDownSelection_Change"

                runat="server">

                <asp:ListItem Selected="True" Value="White"> 

                White </asp:ListItem>

                <asp:ListItem Value="Silver"> 

                Silver </asp:ListItem>

                <asp:ListItem Value="DarkGray"> 

                Dark Gray </asp:ListItem>

                <asp:ListItem Value="Khaki"> 

                Khaki </asp:ListItem>

                <asp:ListItem Value="DarkKhaki"> D

                ark Khaki </asp:ListItem>

            </asp:DropDownList>

        </div>

    </ContentTemplate>

</asp:UpdatePanel>

事件代码：

<script runat="server">

    void DropDownSelection_Change(Object sender, EventArgs e)

    {

        Calendar1.DayStyle.BackColor =

            System.Drawing.Color.FromName(ColorList.SelectedItem.Value);

    }

</script>

四．ContentTemplateContainer属性

如果要使用编程的手法去设置UpdatePanel中的内容，需要创建一个UpdatePanel，并且添加控件到ContentTemplateContainer，而不能直接添加控件到ContentTemplate，如果想直接设置ContentTemplate，则需要编写一个自定义的Template，并去实现位于System.Web.UI命名空间下的接口ITemplate。看一个简单的来自于官方网站的例子：

<%@ Page Language="C#" %>

<script runat="server">

    protected void Page_Load(object sender, EventArgs e)

    {

        UpdatePanel up1 = new UpdatePanel();

        up1.ID = "UpdatePanel1";

        up1.UpdateMode = UpdatePanelUpdateMode.Conditional;

        Button button1 = new Button();

        button1.ID = "Button1";

        button1.Text = "Submit";

        button1.Click += new EventHandler(Button_Click);

        Label label1 = new Label();

        label1.ID = "Label1";

        label1.Text = "A full page postback occurred.";

        up1.ContentTemplateContainer.Controls.Add(button1);

        up1.ContentTemplateContainer.Controls.Add(label1);

        Page.Form.Controls.Add(up1);

    }

    protected void Button_Click(object sender, EventArgs e)

    {

        ((Label)Page.FindControl("Label1")).Text = "Panel refreshed at " +

            DateTime.Now.ToString();

    }

</script>

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

<head id="Head1" runat="server">

    <title>UpdatePanel Added Programmatically Example</title>

</head>

<body>

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

        <div>

            <asp:ScriptManager ID="TheScriptManager"

                               runat="server" />

        </div>

    </form>

</body>

</html>

五．Triggers属性

在ASP.NET AJAX中有两种Triggers：分别为AsyncPostBackTrigger和PostBackTrigger，AsyncPostBackTrigge用来指定某个服务器端控件以及其将触发的服务器端事件作为该UpdatePanel的异步更新触发器，它需要设置的属性有控件ID和服务端控件的事件；PostBackTrigger用来指定在UpdatePanel中的某个服务端控件，它所引发的回送不使用异步回送，而仍然是传统的整页回送。这一点跟Atlas有很大的区别，大家需要注意。看一个小例子，虽然两个Button都放在了UpdatePanel中，但是由于在PostBackTrigger中指定了Button2，所以它使用的仍然是整页回送。

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

<script runat="server">

    void Button1_Click(object sender, EventArgs e)

    {

        this.Label1.Text = "更新时间：" + System.DateTime.Now.ToString();

    }

    void Button2_Click(object sender, EventArgs e)

    {

        this.Label1.Text = "更新时间：" + System.DateTime.Now.ToString();

    }

</script>

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

<head runat="server">

    <title>UpdatePanel Trigger Sample</title>

</head>

<body>

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

    <div>

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

        </asp:ScriptManager>

    </div>

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

            <ContentTemplate>

                <div>

                    <asp:Button ID="Button1" runat="server" Text="异步回送" OnClick="Button1_Click"/>&nbsp;&nbsp;

                    <asp:Button ID="Button2" runat="server" Text="整页回送" OnClick="Button2_Click"/><br />

                    <br />

                    <asp:Label ID="Label1" runat="server" Text="当前时间" Font-Bold="True" Font-Size="Large"></asp:Label></div>

            </ContentTemplate>

            <Triggers>

                <asp:AsyncPostBackTrigger ControlID="Button1"/>

                <asp:PostBackTrigger ControlID="Button2" />

            </Triggers>

        </asp:UpdatePanel>

    </form>

</body>

</html>

（未完待续）
示例代码下载：http://files.cnblogs.com/Terrylee/ASPNETAJAXUpdatePanelDemo1

ASP.NET AJAX入门系列（4）：使用UpdatePanel控件（一）的更多相关文章

ASP.NET AJAX入门系列（1）：概述
经常关注我的Blog的朋友可能注意到了,在我Blog的左边系列文章中,已经移除了对Atlas学习手记系列文章的推荐,因为随着ASP.NET AJAX 1.0 Beta版的发布,它们已经不再适用,为了不 ...
ASP.NET AJAX入门系列
ASP.NET AJAX入门系列将会写关于ASP.NET AJAX一些控件的使用方法以及基础知识,其中部分文章为原创,也有一些文章是直接翻译自官方文档,本部分内容会不断更新. 目录 ASP.NET A ...
ASP.NET AJAX入门系列（10）：Timer控件简单使用
本文主要通过一个简单示例,让Web页面在一定的时间间隔内局部刷新,来学习一下ASP.NET AJAX中的服务端Timer控件的简单使用. 主要内容 Timer控件的简单使用 1．添加新页面并切换到设计 ...
ASP.NET AJAX入门系列（5）：使用UpdatePanel控件（二） UpdatePanel
UpdatePanel可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用编写任何客户端脚本,只要在一个页面上添加 ...
ASP.NET AJAX入门系列（5）：使用UpdatePanel控件（二）
UpdatePanel可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用编写任何客户端脚本,只要在一个页面上添加 ...
ASP.NET AJAX入门系列（9）：在母版页中使用UpdatePanel
本文简单介绍一下在母版页中使用UpdatePanel控件,翻译自官方文档. 主要内容 1．添加UpdatePanel控件到Content Page 2．通过Master Page刷新UpdatePan ...
ASP.NET AJAX入门系列（11）：在多个UpdatePanle中使用Timer控件
本文将使用Timer控件更新两个UpdatePanel控件,Timer控件将放在UpdatePanel控件的外面,并将它配置为UpdatePanel的触发器,翻译自官方文档. 主要内容在多个Upda ...
ASP.NET AJAX入门系列（7）：使用客户端脚本对UpdateProgress编程
在本篇文章中,我们将通过编写JavaScript来使用客户端行为扩展UpdateProgress控件,客户端代码将使用ASP.NET AJAX Library中的PageRequestManager, ...
ASP.NET AJAX入门系列（6）：UpdateProgress控件简单介绍
在ASP.NET AJAX Beta2中,UpdateProgress控件已经从“增值”CTP中移到了ASP.NET AJAX核心中.以下两篇关于UpdateProgress的文章基本翻译自ASP.N ...

随机推荐

用MFC库函数AfxBeginThread()来创建线程
在进行多线程程序设计的时候,我们经常用到AfxBeginThread函数来启动一条线程该函数使用起来非常的简单方便,其定义如下: 1.函数原型 CWinThread* AfxBeginThread( ...
解决jsp表达式不能解析的问题
在jsp页面用了表达式,但是出现了表达式不能解析的问题出现的页面如下原因:web.xml的版本过低,maven自动生成的web.xml版本为2.3,只有2.3以上的版本才支持表达式解决方法:改w ...
PAT 乙级1003. 我要通过！(20)
“答案正确”是自动判题系统给出的最令人欢喜的回复.本题属于PAT的“答案正确”大派送 —— 只要读入的字符串满足下列条件,系统就输出“答案正确”,否则输出“答案错误”. 得到“答案正确”的条件是: 1 ...
reset.css 文件
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,b ...
endnote插入文献的一些问题
1. 文末参考文献前面加上序号 eg.[1] 设置如下图,参考网址https://zhidao.baidu.com/question/360201207639069172.html edit-> ...
Linux 下各个目录的作用及内容
在 Linux 下,我们看到的是文件夹(目录): 在早期的 UNIX 系统中,各个厂家各自定义了自己的 UNIX 系统文件目录,比较混乱.Linux 面世不久后,对文件目录进行了标准化,于1994年对 ...
OSPF路由协议（一）
实验要求:使用OSPF协议,使各个PC之间能够相互通信拓扑如下: 配置如下: R1enableconfigure terminal interface f0/0ip address 192.168. ...
对jQuery ajax的认识
1.ajax() 方法通过 HTTP 请求加载远程数据. 2.该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XML ...
phantomjs 抓取、截图中文网站乱码的问题的解决
用phantomjs抓取html乱码的解决方案: phantomjs --output-encoding=gbk test.js http://webscan.360.cn/index/checkwe ...
[LeetCode&Python] Problem 599. Minimum Index Sum of Two Lists
Suppose Andy and Doris want to choose a restaurant for dinner, and they both have a list of favorite ...

ASP.NET AJAX入门系列（4）：使用UpdatePanel控件（一）

ASP.NET AJAX入门系列（4）：使用UpdatePanel控件（一）的更多相关文章

随机推荐

热门专题