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控件概述
UpdatePanel 可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用编写任何客户端脚本,只要在一个页面上添加几个UpdatePanel控件和一个ScriptManager控件就可以自动实现局部更新。通过本文来学习一下UpdatePanel工作原理和使用方法。简单的UpdatePanel定义如下:
None.gif < asp:UpdatePanel  ID ="UpdatePanel1"  runat ="server" >
None.gif
None.gif    
< ContentTemplate >
None.gif
None.gif        
<!-- dot.gif -->
None.gif
None.gif    
</ ContentTemplate >
None.gif
None.gif    
< Triggers >
None.gif
None.gif        
< asp:AsyncPostBackTrigger  />
None.gif
None.gif        
< asp:PostBackTrigger  />
None.gif
None.gif    
</ Triggers >
None.gif
None.gif
</ asp:UpdatePanel >
UpdatePanel 重要的属性如下:
属性
说明
ChildrenAsTriggers
UpdateMode属性为Conditional时,UpdatePanel中的子控件的异步回送是否会引发UpdatePanle的更新。
RenderMode
表示UpdatePanel最终呈现的HTML元素。Block(默认)表示<div>Inline表示<span>
UpdateMode
表示UpdatePanel的更新模式,有两个选项:AlwaysConditionalAlways是不管有没有Trigger,其他控件都将更新该UpdatePanelConditional表示只有当前UpdatePanelTrigger,或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的例子。
None.gif < asp:UpdatePanel  ID ="UpdatePanel1"  runat ="server" >
None.gif
None.gif    
< ContentTemplate >
None.gif
None.gif        
< asp:Calendar  ID ="Calendar1"  ShowTitle ="True"  runat ="server"   />
None.gif
None.gif        
< div >
None.gif
None.gif            Background:
None.gif
None.gif            
< br  />
None.gif
None.gif            
< asp:DropDownList  ID ="ColorList"  AutoPostBack ="True"  OnSelectedIndexChanged ="DropDownSelection_Change"
None.gif
None.gif                runat
="server" >
None.gif
None.gif                
< asp:ListItem  Selected ="True"  Value ="White" >  
None.gif
None.gif                White 
</ asp:ListItem >
None.gif
None.gif                
< asp:ListItem  Value ="Silver" >  
None.gif
None.gif                Silver 
</ asp:ListItem >
None.gif
None.gif                
< asp:ListItem  Value ="DarkGray" >  
None.gif
None.gif                Dark Gray 
</ asp:ListItem >
None.gif
None.gif                
< asp:ListItem  Value ="Khaki" >  
None.gif
None.gif                Khaki 
</ asp:ListItem >
None.gif
None.gif                
< asp:ListItem  Value ="DarkKhaki" >  D
None.gif
None.gif                ark Khaki 
</ asp:ListItem >
None.gif
None.gif            
</ asp:DropDownList >
None.gif
None.gif        
</ div >
None.gif
None.gif    
</ ContentTemplate >
None.gif
None.gif
</ asp:UpdatePanel >
事件代码:
ExpandedBlockStart.gif < script  runat ="server" >
InBlock.gif
InBlock.gif    
void DropDownSelection_Change(Object sender, EventArgs e)
InBlock.gif
ExpandedSubBlockStart.gif    
{
InBlock.gif
InBlock.gif        Calendar1.DayStyle.BackColor 
=
InBlock.gif
InBlock.gif            System.Drawing.Color.FromName(ColorList.SelectedItem.Value);
InBlock.gif
ExpandedSubBlockEnd.gif    }

ExpandedBlockEnd.gif
None.gif
</ script >
四.ContentTemplateContainer属性
如果要使用编程的手法去设置UpdatePanel中的内容,需要创建一个UpdatePanel,并且添加控件到ContentTemplateContainer,而不能直接添加控件到ContentTemplate,如果想直接设置ContentTemplate,则需要编写一个自定义的Template,并去实现位于System.Web.UI命名空间下的接口ITemplate。看一个简单的来自于官方网站的例子:
ExpandedBlockStart.gif <% @ Page Language="C#"  %>
None.gif
ExpandedBlockStart.gif
< script  runat ="server" >
InBlock.gif
InBlock.gif    protected 
void Page_Load(object sender, EventArgs e)
InBlock.gif
ExpandedSubBlockStart.gif    
{
InBlock.gif
InBlock.gif        UpdatePanel up1 
= new UpdatePanel();
InBlock.gif
InBlock.gif        up1.ID 
= "UpdatePanel1";
InBlock.gif
InBlock.gif        up1.UpdateMode 
= UpdatePanelUpdateMode.Conditional;
InBlock.gif
InBlock.gif        Button button1 
= new Button();
InBlock.gif
InBlock.gif        button1.ID 
= "Button1";
InBlock.gif
InBlock.gif        button1.Text 
= "Submit";
InBlock.gif
InBlock.gif        button1.Click 
+= new EventHandler(Button_Click);
InBlock.gif
InBlock.gif        Label label1 
= new Label();
InBlock.gif
InBlock.gif        label1.ID 
= "Label1";
InBlock.gif
InBlock.gif        label1.Text 
= "A full page postback occurred.";
InBlock.gif
InBlock.gif        up1.ContentTemplateContainer.Controls.Add(button1);
InBlock.gif
InBlock.gif        up1.ContentTemplateContainer.Controls.Add(label1);
InBlock.gif
InBlock.gif        Page.Form.Controls.Add(up1);
InBlock.gif
ExpandedSubBlockEnd.gif    }

InBlock.gif
InBlock.gif    protected 
void Button_Click(object sender, EventArgs e)
InBlock.gif
ExpandedSubBlockStart.gif    
{
InBlock.gif
InBlock.gif        ((Label)Page.FindControl(
"Label1")).Text = "Panel refreshed at " +
InBlock.gif
InBlock.gif            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  id ="Head1"  runat ="server" >
None.gif
None.gif    
< title > UpdatePanel Added Programmatically Example </ title >
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 ="TheScriptManager"
None.gif
None.gif                               runat
="server"   />
None.gif
None.gif        
</ div >
None.gif
None.gif    
</ form >
None.gif
None.gif
</ body >
None.gif
None.gif
</ html >

五.Triggers属性
ASP.NET AJAX中有两种Triggers:分别为AsyncPostBackTriggerPostBackTriggerAsyncPostBackTrigge用来指定某个服务器端控件以及其将触发的服务器端事件作为该UpdatePanel的异步更新触发器,它需要设置的属性有控件ID和服务端控件的事件;PostBackTrigger用来指定在UpdatePanel中的某个服务端控件,它所引发的回送不使用异步回送,而仍然是传统的整页回送。这一点跟Atlas有很大的区别,大家需要注意。看一个小例子,虽然两个Button都放在了UpdatePanel中,但是由于在PostBackTrigger中指定了Button2,所以它使用的仍然是整页回送。
ExpandedBlockStart.gif <% @ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2"  %>
None.gif
ExpandedBlockStart.gif
< script  runat ="server" >
InBlock.gif
InBlock.gif    
void Button1_Click(object sender, EventArgs e)
InBlock.gif
ExpandedSubBlockStart.gif    
{
InBlock.gif        
this.Label1.Text = "更新时间:" + System.DateTime.Now.ToString();
ExpandedSubBlockEnd.gif    }

InBlock.gif
InBlock.gif    
void Button2_Click(object sender, EventArgs e)
InBlock.gif
ExpandedSubBlockStart.gif    
{
InBlock.gif        
this.Label1.Text = "更新时间:" + System.DateTime.Now.ToString();
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 > UpdatePanel Trigger Sample </ title >
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 ="ScriptManager1"  runat ="server" >
None.gif
None.gif        
</ asp:ScriptManager >
None.gif
None.gif    
</ div >
None.gif
None.gif        
< asp:UpdatePanel  ID ="UpdatePanel1"  runat ="server" >
None.gif
None.gif            
< ContentTemplate >
None.gif
None.gif                
< div >
None.gif
None.gif                    
< asp:Button  ID ="Button1"  runat ="server"  Text ="异步回送"  OnClick ="Button1_Click" /> &nbsp;&nbsp;
None.gif
None.gif                    
< asp:Button  ID ="Button2"  runat ="server"  Text ="整页回送"  OnClick ="Button2_Click" />< br  />
None.gif
None.gif                    
< br  />
None.gif
None.gif                    
< asp:Label  ID ="Label1"  runat ="server"  Text ="当前时间"  Font-Bold ="True"  Font-Size ="Large" ></ asp:Label ></ div >
None.gif
None.gif            
</ ContentTemplate >
None.gif
None.gif            
< Triggers >
None.gif
None.gif                
< asp:AsyncPostBackTrigger  ControlID ="Button1" />
None.gif
None.gif                
< asp:PostBackTrigger  ControlID ="Button2"   />
None.gif
None.gif            
</ Triggers >
None.gif
None.gif        
</ asp:UpdatePanel >
None.gif
None.gif    
</ form >
None.gif
None.gif
</ body >
None.gif
None.gif
</ html >

(未完待续)











本文转自lihuijun51CTO博客,原文链接: http://blog.51cto.com/terrylee/67710 ,如需转载请自行联系原作者

相关文章
|
2月前
|
开发框架 JavaScript 前端开发
震撼!破解 ASP.NET 服务器控件 Button 执行顺序之谜,颠覆你的开发认知!
【8月更文挑战第16天】在ASP.NET开发中,通过Button控件实现先执行JavaScript再触后台处理的需求十分常见。例如,在用户点击按钮前需前端验证或提示,确保操作无误后再传递数据至后台深度处理。此过程可通过设置Button的`OnClientClick`属性调用自定义JavaScript函数完成验证;若验证通过,则继续触发后台事件。此外,结合jQuery也能达到相同效果,利用`__doPostBack`手动触发服务器端事件。这种方式增强了应用的交互性和用户体验。
41 8
|
5月前
|
开发框架 前端开发 JavaScript
ASP.NET AJAX使用方法概述(三)
ASP.NET AJAX使用方法概述(三)
44 1
|
1月前
|
开发框架 JavaScript 前端开发
|
5月前
|
开发框架 缓存 前端开发
安装ASP.NET AJAX (一安装)
安装ASP.NET AJAX (一安装)
71 0
|
5月前
|
SQL 开发框架 JavaScript
分享33个ASP.NET电子商务源码和40个ASP.NET控件组件源码,总有一款适合您
分享33个ASP.NET电子商务源码和40个ASP.NET控件组件源码,总有一款适合您
73 0
|
5月前
|
设计模式 缓存 前端开发
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)(下)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
41 1
|
5月前
|
前端开发 JavaScript fastjson
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)(上)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
61 1
|
5月前
|
SQL 开发框架 前端开发
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
76 0
|
.NET 开发框架
在ASP.net中的UpdatePanel,弹窗失败解决办法
原文:在ASP.net中的UpdatePanel,弹窗失败解决办法 最开始我用: Response.Write("alert('和哈呵呵呵呵呵呵!')"); 在没有UpdatePanel时,这个有效,能够正确弹出提示窗口。
936 0
|
1月前
|
开发框架 前端开发 JavaScript
ASP.NET MVC 教程
ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架。
31 7