ASP.NET AJAX入门系列(5):使用UpdatePanel控件(二)

简介:


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

 
主要内容
1 .用编程的方法控制UpdatePanel的更新
2 UpdatePanel的嵌套使用
3 .同一页面上使用多个UpdatePanel
 
一.用编程的方法控制UpdatePanel的更新
对于UpdatePanel,我们也可以使用编程的方法来控制它的更新,可以通过ScriptManagerRegisterAsyncPostBackControl()方法注册一个异步提交的控件,并且调用UpdatePanelUpdate()方法来让它更新。再次用我在前面的文章中用到的一个无聊的时间更新例子来看一下,有时候我觉得例子过于复杂更加不好说明白所要讲的内容,如下代码所示,注意Button1并不包含在UpdatePanel中:
ExpandedBlockStart.gif <% @ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"  %>
None.gif
ExpandedBlockStart.gif
< script  runat ="server" >
InBlock.gif
InBlock.gif    
void Button1_Click(object sender, EventArgs e)
InBlock.gif
ExpandedSubBlockStart.gif    
{
InBlock.gif
InBlock.gif        
this.Label2.Text = DateTime.Now.ToString();
InBlock.gif
ExpandedSubBlockEnd.gif    }

ExpandedBlockEnd.gif
None.gif
</ script >
None.gif
None.gif
< html  xmlns ="http://www.w3.org/1999/xhtml" >
None.gif
None.gif
< head  runat ="server" >
None.gif
None.gif    
< title > Refreshing an UpdatePanel Programmatically </ title >
None.gif
None.gif
</ head >
None.gif
None.gif
< body >
None.gif
None.gif    
< form  id ="form1"  runat ="server" >
None.gif
None.gif        
< asp:ScriptManager  ID ="ScriptManager1"  runat ="server" />
None.gif
None.gif        
< div >
None.gif
None.gif            
< asp:UpdatePanel  ID ="UpdatePanel1"  runat ="server"  UpdateMode ="Conditional" >
None.gif
None.gif                
< ContentTemplate >
None.gif
None.gif                    
< asp:Label  ID ="Label1"  runat ="server"  Text ="更新时间:" ></ asp:Label >
None.gif
None.gif                    
< asp:Label  ID ="Label2"  runat ="server"  Text ="Label"  ForeColor ="Red" ></ asp:Label >< br />< br />
None.gif
None.gif                    
None.gif
None.gif                
</ ContentTemplate >
None.gif
None.gif            
</ asp:UpdatePanel >
None.gif
None.gif             
< asp:Button  ID ="Button1"  runat ="server"  Text ="Button"   OnClick  = "Button1_Click" />
None.gif
None.gif        
</ div >
None.gif
None.gif    
</ form >
None.gif
None.gif
</ body >
None.gif
None.gif
</ html >
这时候不用多说,肯定是整页提交了,运行如下图所示:
再次修改上面的例子,使用ScriptManagerRegisterAsyncPostBackControl()注册Button1为一个异步提交控件,并且调用UpdatePanelUpdate()方法:
ExpandedBlockStart.gif <% @ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"  %>
None.gif
ExpandedBlockStart.gif
< script  runat ="server" >
InBlock.gif
InBlock.gif    
void Page_Load(object sender, EventArgs e)
InBlock.gif
ExpandedSubBlockStart.gif    
{
InBlock.gif
InBlock.gif        ScriptManager1.RegisterAsyncPostBackControl(Button1);
InBlock.gif
ExpandedSubBlockEnd.gif    }

InBlock.gif
InBlock.gif    
InBlock.gif
InBlock.gif    
void Button1_Click(object sender, EventArgs e)
InBlock.gif
ExpandedSubBlockStart.gif    
{
InBlock.gif
InBlock.gif        
this.Label2.Text = DateTime.Now.ToString();
InBlock.gif
InBlock.gif        
this.UpdatePanel1.Update();
InBlock.gif
ExpandedSubBlockEnd.gif    }

ExpandedBlockEnd.gif
None.gif
</ script >
None.gif
None.gif
< html  xmlns ="http://www.w3.org/1999/xhtml" >
None.gif
None.gif
< head  runat ="server" >
None.gif
None.gif    
< title > Refreshing an UpdatePanel Programmatically </ title >
None.gif
None.gif
</ head >
None.gif
None.gif
< body >
None.gif
None.gif    
< form  id ="form1"  runat ="server" >
None.gif
None.gif        
< asp:ScriptManager  ID ="ScriptManager1"  runat ="server" />
None.gif
None.gif        
< div >
None.gif
None.gif            
< asp:UpdatePanel  ID ="UpdatePanel1"  runat ="server"  UpdateMode ="Conditional" >
None.gif
None.gif                
< ContentTemplate >
None.gif
None.gif                    
< asp:Label  ID ="Label1"  runat ="server"  Text ="更新时间:" ></ asp:Label >
None.gif
None.gif                    
< asp:Label  ID ="Label2"  runat ="server"  Text ="Label"  ForeColor ="Red" ></ asp:Label >< br />< br />
None.gif
None.gif                    
None.gif
None.gif                
</ ContentTemplate >
None.gif
None.gif            
</ asp:UpdatePanel >
None.gif
None.gif             
< asp:Button  ID ="Button1"  runat ="server"  Text ="Button"   OnClick  = "Button1_Click" />
None.gif
None.gif        
</ div >
None.gif
None.gif    
</ form >
None.gif
None.gif
</ body >
None.gif
None.gif
</ html >
这时候可以看到,已经是异步提交了:
二. UpdatePanel的嵌套使用
UpdatePanel 还可以嵌套使用,即在一个UpdatePanelContentTemplate中还可以放入另一个UpdatePanel。当最外面的UpdatePanel被触发更新时,它里面的子UpdatePanel也随着更新,里面的UpdatePanel触发更新时,只更新它自己,而不会更新外层的UpdatePanel。看下面的例子:
ExpandedBlockStart.gif <% @ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2"  %>
None.gif
ExpandedBlockStart.gif
< script  runat ="server" >
ExpandedBlockEnd.gif
None.gif
</ script >
None.gif
None.gif 
None.gif
None.gif
< html  xmlns ="http://www.w3.org/1999/xhtml" >
None.gif
None.gif
< head  id ="Head1"  runat ="server" >
None.gif
None.gif    
< title > UpdatePanelUpdateMode Example </ title >
None.gif
ExpandedBlockStart.gif    
< style  type ="text/css" >
InBlock.gif
InBlock.gif    div.NestedPanel
InBlock.gif
ExpandedSubBlockStart.gif    
{
InBlock.gif
InBlock.gif      position
: relative;
InBlock.gif
InBlock.gif      margin
: 2% 5% 2% 5%;
InBlock.gif
ExpandedSubBlockEnd.gif    
}

InBlock.gif
ExpandedBlockEnd.gif    
</ style >
None.gif
None.gif
</ head >
None.gif
None.gif
< body >
None.gif
None.gif    
< form  id ="form1"  runat ="server" >
None.gif
None.gif        
< div >
None.gif
None.gif            
< asp:ScriptManager  ID ="ScriptManager"  
None.gif
None.gif                               runat
="server"   />
None.gif
None.gif            
< asp:UpdatePanel  ID ="OuterPanel"  
None.gif
None.gif                             UpdateMode
="Conditional"  
None.gif
None.gif                             runat
="server" >
None.gif
None.gif                
< ContentTemplate >
None.gif
None.gif                    
< div >
None.gif
None.gif                        
< fieldset >
None.gif
None.gif                            
< legend > Outer Panel  </ legend >
None.gif
None.gif                            
< br  />
None.gif
None.gif                            
< asp:Button  ID ="OPButton1"  
None.gif
None.gif                                        Text
="Outer Panel Button"  
None.gif
None.gif                                        runat
="server"   />
None.gif
None.gif                            
< br  />
None.gif
None.gif                            Last updated on
None.gif
None.gif                            
<% =  DateTime.Now.ToString()  %>
None.gif
None.gif                            
< br  />
None.gif
None.gif                            
< br  />
None.gif
None.gif                            
< asp:UpdatePanel  ID ="NestedPanel1"  
None.gif
None.gif                                               UpdateMode
="Conditional"
None.gif
None.gif                                               runat
="server" >
None.gif
None.gif                                
< ContentTemplate >
None.gif
None.gif                                    
< div  class ="NestedPanel" >
None.gif
None.gif                                        
< fieldset >
None.gif
None.gif                                            
< legend > Nested Panel 1 </ legend >
None.gif
None.gif                                            
< br  />
None.gif
None.gif                                            Last updated on
None.gif
None.gif                                            
<% =  DateTime.Now.ToString()  %>
None.gif
None.gif                                            
< br  />
None.gif
None.gif                                            
< asp:Button  ID ="NPButton1"
None.gif
None.gif                                                        Text
="Nested Panel 1 Button"  
None.gif
None.gif                                                        runat
="server"   />
None.gif
None.gif                                        
</ fieldset >
None.gif
None.gif                                    
</ div >
None.gif
None.gif                                
</ ContentTemplate >
None.gif
None.gif                            
</ asp:UpdatePanel >
None.gif
None.gif                        
</ fieldset >
None.gif
None.gif                    
</ div >
None.gif
None.gif                
</ ContentTemplate >
None.gif
None.gif            
</ asp:UpdatePanel >
None.gif
None.gif        
</ div >
None.gif
None.gif    
</ form >
None.gif
None.gif
</ body >
None.gif
None.gif
</ html >
运行后如下:

三.同一页面上使用多个UpdatePanel
使用UpdatePanel的时候并没有限制在一个页面上用多少个UpdatePanel,所以我们可以为不同的需要局部更新的页面区域加上不同的UpdatePanel。由于UpdatePanel默认的UpdateModeAlways,如果页面上有一个局部更新被触发,则所有的UpdatePanel都将更新,这是我们不愿看到的,我们只需要UpdatePanel在它自己的触发器触发的时候更新就可以了,所以需要把UpdateMode设置为Conditional
来看一下官方网站上提供的一个例子:包括两个UpdatePanel,其中一个用来用户输入而另一个则用来显示数据,每一个UpdatePanelUpdateMode属性都设置为Conditional。当我们单击Cancel按钮时,只有用来用户输入的那个UpdatePanel刷新,当单击Insert按钮时,两个UpdatePanel都刷新。代码如下:
ExpandedBlockStart.gif <% @ Page Language="C#"  %>
None.gif
ExpandedBlockStart.gif
<% @ Import Namespace="System.Collections.Generic"  %>
None.gif
None.gif 
None.gif
None.gif
< html  xmlns ="http://www.w3.org/1999/xhtml"   >
None.gif
None.gif
< head  id ="Head1"  runat ="server" >
None.gif
None.gif    
< title > Enter New Employees </ title >
None.gif
ExpandedBlockStart.gif    
< script  runat ="server" >
InBlock.gif
InBlock.gif        private List
<Employee> EmployeeList;
InBlock.gif
InBlock.gif 
InBlock.gif
InBlock.gif        protected 
void Page_Load()
InBlock.gif
ExpandedSubBlockStart.gif        
{
InBlock.gif
InBlock.gif            
if (!IsPostBack)
InBlock.gif
ExpandedSubBlockStart.gif            
{
InBlock.gif
InBlock.gif                EmployeeList 
= new List<Employee>();
InBlock.gif
InBlock.gif                EmployeeList.Add(
new Employee(1"Jump""Dan"));
InBlock.gif
InBlock.gif                EmployeeList.Add(
new Employee(2"Kirwan""Yvette"));
InBlock.gif
InBlock.gif                ViewState[
"EmployeeList"= EmployeeList;
InBlock.gif
ExpandedSubBlockEnd.gif            }

InBlock.gif
InBlock.gif            
else
InBlock.gif
InBlock.gif                EmployeeList 
= (List<Employee>)ViewState["EmployeeList"];
InBlock.gif
InBlock.gif            
InBlock.gif
InBlock.gif            EmployeesGridView.DataSource 
= EmployeeList;
InBlock.gif
InBlock.gif            EmployeesGridView.DataBind();
InBlock.gif
ExpandedSubBlockEnd.gif        }

InBlock.gif
InBlock.gif        
InBlock.gif
InBlock.gif        protected 
void InsertButton_Click(object sender, EventArgs e)
InBlock.gif
ExpandedSubBlockStart.gif        
{
InBlock.gif
InBlock.gif            
if (String.IsNullOrEmpty(FirstNameTextBox.Text) ||
InBlock.gif
ExpandedSubBlockStart.gif               String.IsNullOrEmpty(LastNameTextBox.Text)) 
return; }
InBlock.gif
InBlock.gif 
InBlock.gif
InBlock.gif            
int employeeID = EmployeeList[EmployeeList.Count-1].EmployeeID + 1;
InBlock.gif
InBlock.gif            
InBlock.gif
InBlock.gif            string lastName 
= Server.HtmlEncode(FirstNameTextBox.Text);
InBlock.gif
InBlock.gif            string firstName 
= Server.HtmlEncode(LastNameTextBox.Text);
InBlock.gif
InBlock.gif            
InBlock.gif
InBlock.gif            FirstNameTextBox.Text 
= String.Empty;
InBlock.gif
InBlock.gif            LastNameTextBox.Text 
= String.Empty;
InBlock.gif
InBlock.gif            
InBlock.gif
InBlock.gif            EmployeeList.Add(
new Employee(employeeID, lastName, firstName));
InBlock.gif
InBlock.gif            ViewState[
"EmployeeList"= EmployeeList;
InBlock.gif
InBlock.gif            
InBlock.gif
InBlock.gif            EmployeesGridView.DataBind();
InBlock.gif
InBlock.gif            EmployeesGridView.PageIndex 
= EmployeesGridView.PageCount;
InBlock.gif
ExpandedSubBlockEnd.gif        }

InBlock.gif
InBlock.gif 
InBlock.gif
InBlock.gif        protected 
void CancelButton_Click(object sender, EventArgs e)
InBlock.gif
ExpandedSubBlockStart.gif        
{
InBlock.gif
InBlock.gif            FirstNameTextBox.Text 
= String.Empty;
InBlock.gif
InBlock.gif            LastNameTextBox.Text 
= String.Empty;
InBlock.gif
ExpandedSubBlockEnd.gif        }

InBlock.gif
InBlock.gif    
InBlock.gif
InBlock.gif        [Serializable]
InBlock.gif
InBlock.gif        public class Employee
InBlock.gif
ExpandedSubBlockStart.gif        
{
InBlock.gif
InBlock.gif            private 
int _employeeID;
InBlock.gif
InBlock.gif            private string _lastName;
InBlock.gif
InBlock.gif            private string _firstName;
InBlock.gif
InBlock.gif 
InBlock.gif
InBlock.gif            public 
int EmployeeID
InBlock.gif
ExpandedSubBlockStart.gif            
{
InBlock.gif
ExpandedSubBlockStart.gif                get 
return _employeeID; }
InBlock.gif
ExpandedSubBlockEnd.gif            }

InBlock.gif
InBlock.gif            
InBlock.gif
InBlock.gif            public string LastName
InBlock.gif
ExpandedSubBlockStart.gif            
{
InBlock.gif
ExpandedSubBlockStart.gif                get 
return _lastName; }
InBlock.gif
ExpandedSubBlockEnd.gif            }

InBlock.gif
InBlock.gif            
InBlock.gif
InBlock.gif            public string FirstName
InBlock.gif
ExpandedSubBlockStart.gif            
{
InBlock.gif
ExpandedSubBlockStart.gif                get 
return _firstName; }
InBlock.gif
ExpandedSubBlockEnd.gif            }

InBlock.gif
InBlock.gif            
InBlock.gif
InBlock.gif            public Employee(
int employeeID, string lastName, string firstName)
InBlock.gif
ExpandedSubBlockStart.gif            
{
InBlock.gif
InBlock.gif                _employeeID 
= employeeID;
InBlock.gif
InBlock.gif                _lastName 
= lastName;
InBlock.gif
InBlock.gif                _firstName 
= firstName;
InBlock.gif
ExpandedSubBlockEnd.gif            }

InBlock.gif
ExpandedSubBlockEnd.gif        }

InBlock.gif
InBlock.gif 
InBlock.gif
ExpandedBlockEnd.gif    
</ script >
None.gif
None.gif
</ head >
None.gif
None.gif
< body >
None.gif
None.gif    
< form  id ="form1"  runat ="server" >
None.gif
None.gif    
< div >
None.gif
None.gif        
&nbsp; </ div >
None.gif
None.gif        
< asp:ScriptManager  ID ="ScriptManager1"  runat ="server"  EnablePartialRendering ="true"   />
None.gif
None.gif        
< table >
None.gif
None.gif            
< tr >
None.gif
None.gif                
< td  style ="height: 206px"  valign ="top" >
None.gif
None.gif                    
< asp:UpdatePanel  ID ="InsertEmployeeUpdatePanel"  runat ="server"  UpdateMode ="Conditional" >
None.gif
None.gif                        
< ContentTemplate >
None.gif
None.gif                          
< table  cellpadding ="2"  border ="0"  style ="background-color:#7C6F57" >
None.gif
None.gif                            
< tr >
None.gif
None.gif                              
< td >< asp:Label  ID ="FirstNameLabel"  runat ="server"  AssociatedControlID ="FirstNameTextBox"  
None.gif
None.gif                                             Text
="First Name"  ForeColor ="White"   /></ td >
None.gif
None.gif                              
< td >< asp:TextBox  runat ="server"  ID ="FirstNameTextBox"   /></ td >
None.gif
None.gif                            
</ tr >
None.gif
None.gif                            
< tr >
None.gif
None.gif                              
< td >< asp:Label  ID ="LastNameLabel"  runat ="server"  AssociatedControlID ="LastNameTextBox"  
None.gif
None.gif                                             Text
="Last Name"  ForeColor ="White"   /></ td >
None.gif
None.gif                              
< td >< asp:TextBox  runat ="server"  ID ="LastNameTextBox"   /></ td >
None.gif
None.gif                            
</ tr >
None.gif
None.gif                            
< tr >
None.gif
None.gif                              
< td ></ td >
None.gif
None.gif                              
< td >
None.gif
None.gif                                
< asp:LinkButton  ID ="InsertButton"  runat ="server"  Text ="Insert"  OnClick ="InsertButton_Click"  ForeColor ="White"   />
None.gif
None.gif                                
< asp:LinkButton  ID ="Cancelbutton"  runat ="server"  Text ="Cancel"  OnClick ="CancelButton_Click"  ForeColor ="White"   />
None.gif
None.gif                              
</ td >
None.gif
None.gif                            
</ tr >
None.gif
None.gif                          
</ table >
None.gif
None.gif                          
< asp:Label  runat ="server"  ID ="InputTimeLabel" > <% = DateTime.Now  %> </ asp:Label >
None.gif
None.gif                        
</ ContentTemplate >
None.gif
None.gif                    
</ asp:UpdatePanel >
None.gif
None.gif                
</ td >
None.gif
None.gif                
< td  style ="height: 206px"  valign ="top" >
None.gif
None.gif                    
< asp:UpdatePanel  ID ="EmployeesUpdatePanel"  runat ="server"  UpdateMode ="Conditional" >
None.gif
None.gif                        
< ContentTemplate >
None.gif
None.gif                            
< asp:GridView  ID ="EmployeesGridView"  runat ="server"  BackColor ="LightGoldenrodYellow"  BorderColor ="Tan"
None.gif
None.gif                                BorderWidth
="1px"  CellPadding ="2"  ForeColor ="Black"  GridLines ="None"  AutoGenerateColumns ="False" >
None.gif
None.gif                                
< FooterStyle  BackColor ="Tan"   />
None.gif
None.gif                                
< SelectedRowStyle  BackColor ="DarkSlateBlue"  ForeColor ="GhostWhite"   />
None.gif
None.gif                                
< PagerStyle  BackColor ="PaleGoldenrod"  ForeColor ="DarkSlateBlue"  HorizontalAlign ="Center"   />
None.gif
None.gif                                
< HeaderStyle  BackColor ="Tan"  Font-Bold ="True"   />
None.gif
None.gif                                
< AlternatingRowStyle  BackColor ="PaleGoldenrod"   />
None.gif
None.gif                                
< Columns >
None.gif
None.gif                                    
< asp:BoundField  DataField ="EmployeeID"  HeaderText ="Employee ID"   />
None.gif
None.gif                                    
< asp:BoundField  DataField ="LastName"  HeaderText ="Last Name"   />
None.gif
None.gif                                    
< asp:BoundField  DataField ="FirstName"  HeaderText ="First Name"   />
None.gif
None.gif                                
</ Columns >
None.gif
None.gif                                
< PagerSettings  PageButtonCount ="5"   />
None.gif
None.gif                            
</ asp:GridView >
None.gif
None.gif                            
< asp:Label  runat ="server"  ID ="ListTimeLabel" > <% = DateTime.Now  %> </ asp:Label >
None.gif
None.gif                        
</ ContentTemplate >
None.gif
None.gif                        
< Triggers >
None.gif
None.gif                            
< asp:AsyncPostBackTrigger  ControlID ="InsertButton"  EventName ="Click"   />
None.gif
None.gif                        
</ Triggers >
None.gif
None.gif                    
</ asp:UpdatePanel >
None.gif
None.gif                
</ td >
None.gif
None.gif            
</ tr >
None.gif
None.gif        
</ table >
None.gif
None.gif    
</ form >
None.gif
None.gif
</ body >
None.gif
None.gif
</ html >
运行后效果如下:
 













本文转自lihuijun51CTO博客,原文链接:  http://blog.51cto.com/terrylee/67711 ,如需转载请自行联系原作者
相关文章
|
2月前
|
开发框架 前端开发 .NET
七天.NET 8操作SQLite入门到实战 - (1)第七天BootstrapBlazor UI组件库引入
七天.NET 8操作SQLite入门到实战 - (1)第七天BootstrapBlazor UI组件库引入
|
2月前
|
XML JSON 前端开发
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
69 1
|
2月前
|
开发框架 前端开发 JavaScript
ASP.NET AJAX使用方法概述(三)
ASP.NET AJAX使用方法概述(三)
28 1
|
2月前
|
开发框架 .NET 中间件
七天.NET 8操作SQLite入门到实战 - (2)第七天Blazor班级管理页面编写和接口对接
七天.NET 8操作SQLite入门到实战 - (2)第七天Blazor班级管理页面编写和接口对接
|
27天前
|
存储 IDE C#
C#入门:在JetBrains Rider中创建.Net Framework控制台应用程序,输出“Hello, World!”
C#入门:在JetBrains Rider中创建.Net Framework控制台应用程序,输出“Hello, World!”
69 0
|
2月前
|
开发框架 缓存 前端开发
安装ASP.NET AJAX (一安装)
安装ASP.NET AJAX (一安装)
41 0
|
2月前
|
开发框架 .NET 程序员
C#/.NET该如何自学入门?
C#/.NET该如何自学入门?
|
2月前
|
开发框架 .NET 物联网
.NET从入门到精通,零基础也能搞定的基础知识教程
.NET从入门到精通,零基础也能搞定的基础知识教程
70 0
|
2月前
|
SQL 开发框架 JavaScript
分享33个ASP.NET电子商务源码和40个ASP.NET控件组件源码,总有一款适合您
分享33个ASP.NET电子商务源码和40个ASP.NET控件组件源码,总有一款适合您
55 0
|
2月前
|
设计模式 缓存 前端开发
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)(下)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
23 1