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

最新推荐文章于 2022-12-02 11:56:39 发布
最新推荐文章于 2022-12-02 11:56:39 发布
阅读量249 收藏
点赞数
分类专栏： ASP.NET AJAX 文章标签： asp.net ajax server button asp insert

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

 

主要内容

1．用编程的方法控制UpdatePanel的更新

2．UpdatePanel的嵌套使用

3．同一页面上使用多个UpdatePanel

 

一．用编程的方法控制UpdatePanel的更新

对于UpdatePanel，我们也可以使用编程的方法来控制它的更新，可以通过ScriptManager的RegisterAsyncPostBackControl()方法注册一个异步提交的控件，并且调用UpdatePanel的Update()方法来让它更新。再次用我在前面的文章中用到的一个无聊的时间更新例子来看一下，有时候我觉得例子过于复杂更加不好说明白所要讲的内容，如下代码所示，注意Button1并不包含在UpdatePanel中：

 

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

< script  runat ="server" >

    void Button1_Click(object sender, EventArgs e)

    {

        this.Label2.Text = DateTime.Now.ToString();

    }

 </ script >

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

< head  runat ="server" >

     < title > Refreshing an UpdatePanel Programmatically </ title >

</ head >

< body >

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

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

         < div >

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

                 < ContentTemplate >

                     < asp:Label  ID ="Label1"  runat ="server"  Text ="更新时间：" ></ asp:Label >

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

                    

                 </ ContentTemplate >

             </ asp:UpdatePanel >

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

         </ div >

     </ form >

</ body >

</ html >

这时候不用多说，肯定是整页提交了，运行如下图所示：

再次修改上面的例子，使用ScriptManager的RegisterAsyncPostBackControl()注册Button1为一个异步提交控件，并且调用UpdatePanel的Update()方法：

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

< script  runat ="server" >

    void Page_Load(object sender, EventArgs e)

    {

        ScriptManager1.RegisterAsyncPostBackControl(Button1);

    }

    

    void Button1_Click(object sender, EventArgs e)

    {

        this.Label2.Text = DateTime.Now.ToString();

        this.UpdatePanel1.Update();

    }

 </ script >

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

< head  runat ="server" >

     < title > Refreshing an UpdatePanel Programmatically </ title >

</ head >

< body >

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

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

         < div >

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

                 < ContentTemplate >

                     < asp:Label  ID ="Label1"  runat ="server"  Text ="更新时间：" ></ asp:Label >

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

                    

                 </ ContentTemplate >

             </ asp:UpdatePanel >

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

         </ div >

     </ form >

</ body >

</ html >

这时候可以看到，已经是异步提交了：

二． UpdatePanel的嵌套使用

UpdatePanel还可以嵌套使用，即在一个UpdatePanel的ContentTemplate中还可以放入另一个UpdatePanel。当最外面的UpdatePanel被触发更新时，它里面的子UpdatePanel也随着更新，里面的UpdatePanel触发更新时，只更新它自己，而不会更新外层的UpdatePanel。看下面的例子：

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

< script  runat ="server" >

</ script >

 

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

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

     < title > UpdatePanelUpdateMode Example </ title >

     < style  type ="text/css" >

    div.NestedPanel

    {

      position: relative;

      margin: 2% 5% 2% 5%;

    }

     </ style >

</ head >

< body >

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

         < div >

             < asp:ScriptManager  ID ="ScriptManager"  

                               runat ="server"   />

             < asp:UpdatePanel  ID ="OuterPanel"  

                             UpdateMode ="Conditional"  

                             runat ="server" >

                 < ContentTemplate >

                     < div >

                         < fieldset >

                             < legend > Outer Panel  </ legend >

                             < br  />

                             < asp:Button  ID ="OPButton1"  

                                        Text ="Outer Panel Button"  

                                        runat ="server"   />

                             < br  />

                            Last updated on

                             <% =  DateTime.Now.ToString()  %>

                             < br  />

                             < br  />

                             < asp:UpdatePanel  ID ="NestedPanel1"  

                                               UpdateMode ="Conditional"

                                               runat ="server" >

                                 < ContentTemplate >

                                     < div  class ="NestedPanel" >

                                         < fieldset >

                                             < legend > Nested Panel 1 </ legend >

                                             < br  />

                                            Last updated on

                                             <% =  DateTime.Now.ToString()  %>

                                             < br  />

                                             < asp:Button  ID ="NPButton1"

                                                        Text ="Nested Panel 1 Button"  

                                                        runat ="server"   />

                                         </ fieldset >

                                     </ div >

                                 </ ContentTemplate >

                             </ asp:UpdatePanel >

                         </ fieldset >

                     </ div >

                 </ ContentTemplate >

             </ asp:UpdatePanel >

         </ div >

     </ form >

</ body >

</ html >

运行后如下：

 

三．同一页面上使用多个UpdatePanel

使用UpdatePanel的时候并没有限制在一个页面上用多少个UpdatePanel，所以我们可以为不同的需要局部更新的页面区域加上不同的UpdatePanel。由于UpdatePanel默认的UpdateMode是Always，如果页面上有一个局部更新被触发，则所有的UpdatePanel都将更新，这是我们不愿看到的，我们只需要UpdatePanel在它自己的触发器触发的时候更新就可以了，所以需要把UpdateMode设置为Conditional。

来看一下官方网站上提供的一个例子：包括两个UpdatePanel，其中一个用来用户输入而另一个则用来显示数据，每一个UpdatePanel的UpdateMode属性都设置为Conditional。当我们单击Cancel按钮时，只有用来用户输入的那个UpdatePanel刷新，当单击Insert按钮时，两个UpdatePanel都刷新。代码如下：

 

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

<% @ Import Namespace="System.Collections.Generic"  %>

 

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

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

     < title > Enter New Employees </ title >

     < script  runat ="server" >

        private List<Employee> EmployeeList;

 

        protected void Page_Load()

        {

            if (!IsPostBack)

            {

                EmployeeList = new List<Employee>();

                EmployeeList.Add(new Employee(1, "Jump", "Dan"));

                EmployeeList.Add(new Employee(2, "Kirwan", "Yvette"));

                ViewState["EmployeeList"] = EmployeeList;

            }

            else

                EmployeeList = (List<Employee>)ViewState["EmployeeList"];

            

            EmployeesGridView.DataSource = EmployeeList;

            EmployeesGridView.DataBind();

        }

        

        protected void InsertButton_Click(object sender, EventArgs e)

        {

            if (String.IsNullOrEmpty(FirstNameTextBox.Text) ||

               String.IsNullOrEmpty(LastNameTextBox.Text)) { return; }

 

            int employeeID = EmployeeList[EmployeeList.Count-1].EmployeeID + 1;

            

            string lastName = Server.HtmlEncode(FirstNameTextBox.Text);

            string firstName = Server.HtmlEncode(LastNameTextBox.Text);

            

            FirstNameTextBox.Text = String.Empty;

            LastNameTextBox.Text = String.Empty;

            

            EmployeeList.Add(new Employee(employeeID, lastName, firstName));

            ViewState["EmployeeList"] = EmployeeList;

            

            EmployeesGridView.DataBind();

            EmployeesGridView.PageIndex = EmployeesGridView.PageCount;

        }

 

        protected void CancelButton_Click(object sender, EventArgs e)

        {

            FirstNameTextBox.Text = String.Empty;

            LastNameTextBox.Text = String.Empty;

        }

    

        [Serializable]

        public class Employee

        {

            private int _employeeID;

            private string _lastName;

            private string _firstName;

 

            public int EmployeeID

            {

                get { return _employeeID; }

            }

            

            public string LastName

            {

                get { return _lastName; }

            }

            

            public string FirstName

            {

                get { return _firstName; }

            }

            

            public Employee(int employeeID, string lastName, string firstName)

            {

                _employeeID = employeeID;

                _lastName = lastName;

                _firstName = firstName;

            }

        }

 

     </ script >

</ head >

< body >

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

     < div >

         &nbsp; </ div >

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

         < table >

             < tr >

                 < td  style ="height: 206px"  valign ="top" >

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

                         < ContentTemplate >

                           < table  cellpadding ="2"  border ="0"  style ="background-color:#7C6F57" >

                             < tr >

                               < td >< asp:Label  ID ="FirstNameLabel"  runat ="server"  AssociatedControlID ="FirstNameTextBox"  

                                             Text ="First Name"  ForeColor ="White"   /></ td >

                               < td >< asp:TextBox  runat ="server"  ID ="FirstNameTextBox"   /></ td >

                             </ tr >

                             < tr >

                               < td >< asp:Label  ID ="LastNameLabel"  runat ="server"  AssociatedControlID ="LastNameTextBox"  

                                             Text ="Last Name"  ForeColor ="White"   /></ td >

                               < td >< asp:TextBox  runat ="server"  ID ="LastNameTextBox"   /></ td >

                             </ tr >

                             < tr >

                               < td ></ td >

                               < td >

                                 < asp:LinkButton  ID ="InsertButton"  runat ="server"  Text ="Insert"  OnClick ="InsertButton_Click"  ForeColor ="White"   />

                                 < asp:LinkButton  ID ="Cancelbutton"  runat ="server"  Text ="Cancel"  OnClick ="CancelButton_Click"  ForeColor ="White"   />

                               </ td >

                             </ tr >

                           </ table >

                           < asp:Label  runat ="server"  ID ="InputTimeLabel" > <% = DateTime.Now  %> </ asp:Label >

                         </ ContentTemplate >

                     </ asp:UpdatePanel >

                 </ td >

                 < td  style ="height: 206px"  valign ="top" >

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

                         < ContentTemplate >

                             < asp:GridView  ID ="EmployeesGridView"  runat ="server"  BackColor ="LightGoldenrodYellow"  BorderColor ="Tan"

                                BorderWidth ="1px"  CellPadding ="2"  ForeColor ="Black"  GridLines ="None"  AutoGenerateColumns ="False" >

                                 < FooterStyle  BackColor ="Tan"   />

                                 < SelectedRowStyle  BackColor ="DarkSlateBlue"  ForeColor ="GhostWhite"   />

                                 < PagerStyle  BackColor ="PaleGoldenrod"  ForeColor ="DarkSlateBlue"  HorizontalAlign ="Center"   />

                                 < HeaderStyle  BackColor ="Tan"  Font-Bold ="True"   />

                                 < AlternatingRowStyle  BackColor ="PaleGoldenrod"   />

                                 < Columns >

                                     < asp:BoundField  DataField ="EmployeeID"  HeaderText ="Employee ID"   />

                                     < asp:BoundField  DataField ="LastName"  HeaderText ="Last Name"   />

                                     < asp:BoundField  DataField ="FirstName"  HeaderText ="First Name"   />

                                 </ Columns >

                                 < PagerSettings  PageButtonCount ="5"   />

                             </ asp:GridView >

                             < asp:Label  runat ="server"  ID ="ListTimeLabel" > <% = DateTime.Now  %> </ asp:Label >

                         </ ContentTemplate >

                         < Triggers >

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

                         </ Triggers >

                     </ asp:UpdatePanel >

                 </ td >

             </ tr >

         </ table >

     </ form >

</ body >

</ html >

运行后效果如下：

 

示例代码下载：http://files.cnblogs.com/Terrylee/ASPNETAJAXUpdatePanelDemo2.rar

作者： TerryLee
出处： http://terrylee.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
sliven2008
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ASP.NET AJAX入门系列（4）：使用UpdatePanel控件（一）
long_wjian的专栏
01-24 307
<br />UpdatePanel可以用来创建丰富的局部更新Web应用程序，它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件，其强大之处在于不用编写任何客户端脚本，只要在一个页面上添加几个UpdatePanel控件和一个ScriptManager控件就可以自动实现局部更新。通过本文来学习一下UpdatePanel简单的使用方法（第一篇）。<br /> <br />主要内容<br />1．UpdatePanel控件概述<br />2．UpdatePanel工作原理<br />3．C
ASP.NET_AJAX入门系列：使用UpdatePanel控件.doc
08-12
在这个入门系列中，我们将重点关注如何使用UpdatePanel控件，一个无需编写大量客户端脚本来实现异步更新的强大工具。 **一、UpdatePanel控件概述** UpdatePanel是ASP.NET AJAX库中的核心组件之一，用于实现页面的...
更新UpdatePanel外部控件
最新发布
龙井茶的Sky
12-02 438
借着一个小功能，了解了下UpdatePanel的使用
UpdatePanel控件
天涯~的博客
02-26 737
ASP.NET UpdatePanel控件可用于生成功能丰富、以客户端为中心的Web应用程序。通过使用UpdatePanel控件，可以在回发期间刷新网页的选定部分而不是刷新整个网页。这称为执行部分页更新。包含一个ScriptManager控件和一个或多个UpdatePanel控件的ASP.NET网页，不需要使用自定义客户端脚本即可自动参与部分页更新。 启用部分页更新： UpdatePanel控
UpdatePanel控件使用
zhu1991_的博客
01-12 561
UpdatePanel控件(以下简写为up)有个属性：UpdateMode 可取值 Always 和 Conditional ，默认是 Always ，总是进行自动更新，这对服务端是有性能损耗的，我们应尽量使用 Conditional 值，然后在服务端代码手动调用Update()方法来更新 这里又要牵涉到另一个属性：ChildrenAsTriggers 可选 true（默认） 和false，这个
updatePanel控件
不是我的博客
08-18 440
updatePanel控件更新原则： updatePanel内部的回发的控件，会触发updatePanel的更新 默认updateMode=always,凡是触发updatePanels更新的都会一起更新 updateMode=Conditional ,自updatePanel回发控件，Triggers列表下
ASP.NET AJAX入门系列：使用UpdatePanel控件
08-11
ASP.NET AJAX入门系列UpdatePanel控件教程
ASP[1].NET_AJAX入门系列：使用ScriptManager控件
04-20
在这个入门系列中，我们将重点关注如何使用ScriptManager控件，它是ASP.NET AJAX框架的核心组件。 **ScriptManager控件概述** ScriptManager控件是ASP.NET 2.0 AJAX扩展的一部分，它在页面中起着至关重要的作用。它...
jQuery-ASP.NET-UpdatePanel：在ASP.NET UpdatePanel中使用jQuery
01-30
在ASP.NET开发中，UpdatePanel是一个非常有用的控件，它允许开发者实现页面的部分刷新，而无需重新加载整个页面。这极大地提高了用户体验，特别是在处理复杂的Web应用程序时。然而，随着JavaScript库如jQuery的广泛...
UpdatePanel控件应用
06-06
关于UpdatePanel控件的使用和详解,没接触过这个控件的人可以拿做参考.该文件为Word格式,是一片文章的word版,属于转载.
使用VS 2008创建ASP.NET AJAX控件扩展器
04-11
2. **选择或创建控件扩展器**：在本例中，可能会使用内置的ASP.NET AJAX控件扩展器，如UpdatePanel或TextBoxWatermarkExtender，或者创建自定义的扩展器。 3. **添加控件和扩展器**：将TextBox控件和选择的扩展器...
UpdatePanel控件的使用
weixin_34167043的博客
10-20 369
ScriptManager和UpdatePanel控件联合使用可以实现页面异步局部更新的效果。其中的UpdatePanel就是设置页面中异 步局部更新区域，它必须依赖于ScriptManager存在，因为ScriptManger控件提供了客户端脚本生成与管理UpdatePanel的功 能。 几个重要的属性：     ScriptManager控件的EnablePartialRendering属...
UpdatePanel的用法详解
weixin_33884611的博客
12-09 230
今天用做日历显示本月的考勤记录，用到了UpdatePanel控件，才发现对这个控件并不太了解,所以找了点儿资料，整理了一下给大家发上来！ 一、UpdatePanel的结构 View Code <asp:ScriptManager ID="ScriptManager1" runat="server" > </asp:ScriptManager> <asp:U...
UpdatePanel 控件
尼奥
03-05 659
ASP.NET UpdatePanel 控件可用于生成功能丰富、以客户端为中心的 Web 应用程序。通过使用 UpdatePanel 控件，可以在回发期间刷新网页的选定部分而不是刷新整个网页。这称为执行部分页更新。包含一个 ScriptManager 控件和一个或多个 UpdatePanel 控件的 ASP.NET 网页，不需要使用自定义客户端脚本即可自动参与部分页更新。 UpdatePa
UpdatePanel 控件简介
weixin_30951743的博客
07-24 257
UpdatePanel 控件简介 全部折叠全部展开代码：全部代码：多种代码：Visual Basic代码：C#代码：Visual C++代码：F#代码：JScript UpdatePanel 控件简介 在本教程中，您将使用两个 Microsoft Ajax 服务器控件（ScriptManager 控件和 UpdatePanel 控件）向网...
ASP.NET AJAX入门系列2
11-30
ASP.NET AJAX入门系列2主要介绍了如何在母版页中使用 UpdatePanel 控件。本文是翻译自官方文档，下面会详细描述如何添加 UpdatePanel 控件到 Content Page，并通过 Master Page 刷新 UpdatePanel。 在开始之前，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值