没有合适的资源?快使用搜索试试~ 我知道了~
ASP.NET Ajax程序设计—第I卷(第四章)
需积分: 0 19 下载量 45 浏览量
2007-12-11
10:07:21
上传
评论
收藏 5.79MB PDF 举报
温馨提示
试读
32页
服務器端控件UpdatePanel介紹
资源详情
资源评论
资源推荐
使用 UpdatePanel 控件
实现局部更新
信很多朋友都是被
UpdatePanel强大而易用的功能吸引而开始接触ASP.NET AJAX
的。的确,说
UpdatePanel是ASP.NET AJAX框架中最有用的控件丝毫不足为过。它
将Ajax程序引以为豪(或是被人诟病)的客户端异步更新模式的实现,极为平滑地引入到了
ASP.NET这种以服务器端逻辑为主的Web编程框架中。无需繁琐的JavaScript,无需处理浏览器之
间XMLHttpRequest的不同,无需精通如此多的Ajax相关技术,甚至无需懂得Ajax实现的原理,开
发者唯一要做的就是把需要实现异步更新功能的ASP.NET服务器端控件统统塞进
UpdatePanel
中,余下的事情——ASP.NET AJAX将全部为你搞定!
4.1 UpdatePanel 介绍
UpdatePanel,顾名思义,是一种面板,也可以理解成为一个区域,而这个面板是用来做什
么的呢?显然——update(更新)。严格来说,
UpdatePanel还应该有一个前缀,即变成AjaxUpdate-
Panel或是AsyncUpdatePanel,分别代表“以Ajax方式更新的面板”和“异步更新面板”,或者是
PartialUpdatePanel,代表“局部更新面板”,这样才能更加贴切地说明其用途。
UpdatePanel将
在现有的ASP.NET 2.0页面中充当一个容器,在这个容器中的服务器端控件将一改往日“武断”
的作风,不再引发一次次的整页回送,而是进行“温和”的局部更新。一句话,
UpdatePanel
为其包含的局部页面提供了异步回送、局部更新的功能。
当页面中只有一部份需要更新时,
UpdatePanel省去了整页更新时传送其他不变部分带来
的不必要的网络流量。对于用户来讲,这种页面的局部更新方式也避免了整页更新方式所带来的
页面闪烁,让页面中内容的切换显得更为平滑,特别是对于在某些页面中经常被触发的回送,例
如对
GridView的分页、排序等操作而言更加如此。
借助于强大的
UpdatePanel,在现有的ASP.NET 2.0页面中启用这种局部更新非常的简单。
我们只需要在页面中添加一个
ScriptManager,并设置其允许局部更新(将在本章稍后介绍),
再添加一个或多个
UpdatePanel把将要采用异步更新的页面部分包围起来即可。UpdatePanel
同样可以放置在用户控件(User Control)、主控页面(Master Page)或内容页面(Content Page)
中,与现有的ASP.NET 2.0开发模型完美地无缝集成。
相
第4章
4.2 在页面中添加 UpdatePanel 77
当然,引入了UpdatePanel 的页面并不代表它失去了原有的整页回送能力,包围在
UpdatePanel中的控件将自然执行异步的回送(使用PostBackTrigger也可以让其引发整页回
送,将在稍后介绍),而在
UpdatePanel之外的控件仍将可以进行整页的回送。不过,若某个控
件被指派成了引发某个
UpdatePanel进行更新的AsyncPostBackTrigger触发器(将在本章稍
后介绍),或是用
ScriptManager.RegisterAsyncPostBackControl()方法将其注册成了异
步回送控件,则它还是会选择异步的回送方式。实际上,
UpdatePanel中的控件以及被指定为
UpdatePanel 的 AsyncPostBackTrigger 触发器的控件也是通过ScriptManager.-
RegisterAsyncPostBackControl()
方法来实现对异步回送的支持的。
看起来似乎很神奇,对吗?而
UpdatePanel的实现原理也同样非常简单:首先ScriptManager
和UpdatePanel在服务器端达成一致,截获了Page的Render()方法并在页面上为需要进行异步
回送的控件输出了一些专门的JavaScript脚本。然后在客户端,若这些控件通过
__doPostBack()
函数试图引发整页的回送,则上面提到的JavaScript脚本将截获这个调用,并将页面中各个用户输
入控件的值,加上当前的视图状态(ViewState)用XMLHttpRequest对象发送回服务器。而此时
服务器却对此丝毫不知,仍把它当作一次传统的回送,老老实实地引发了一次页面的完整生存周
期,并根据回送生成新的页面结构。随后又是在
Page的Render()方法中,ScriptManager和
UpdatePanel再一次截获了其中的实现过程,把不在UpdatePanel中的内容统统剔出,只发送
给客户端真正更新了的部分。最后,客户端的XMLHttpRequest对象收到了这部分信息,并在不
知不觉中悄悄地更新了
UpdatePanel中定义的内容。
十分巧妙,不是吗?也正因为使用了这样的机制,
UpdatePanel才能如此完美地整合在现
有的ASP.NET页面中,甚至让其感觉不到丝毫的变化。
接下来就让我们通过示例一步步学习使用
UpdatePanel的强大功能。
4.2 在页面中添加 UpdatePanel
首先,从Visual Studio的Toolbox中将一个ScriptManager拖到页面的设计器中。若是使用
CTP版本的ASP.NET AJAX,细心的你会发现设计器中的
ScriptManager的右上角有一个指向右
面的小箭头,点击这个小箭头,将会弹出一个小型的Tasks菜单(参见图4-1),其中有一个Enable
Partial Rendering的选项。这个Tasks菜单是Visual Studio 2005新增的一个特性,将控件的常用属性
/设定置于其中,这样开发人员不必每次都切换到Properties窗口中进行修改。选中Enable Partial
Rendering选项,实际上是设定了
ScriptManager的EnablePartialRendering属性为true。
这是使用
UpdatePanel所必需的。
图4-1 在CTP版本中为ScriptManager中启用局部更新功能
78 第 4 章 使用 UpdatePanel 控件实现局部更新
而在最新的正式版中,由于EnablePartialRendering属性的默认值改成了true,所以我
们没有必要再对
ScriptManager进行另外的设置,只要将其添加到页面中即可。
同样再从Toolbox 中拖入一个
UpdatePanel 控件。然后再将一个Label 控件和一个
LinkButton控件拖入到UpdatePanel中,并分别指定其ID为lbText和lbtnInside,以及相
应的显示文本。随后再向页面中拖入一个
LinkButton,指 定 ID为lbtnOutside。这样设计器中
的界面将如图4-2所示。
图4-2 添加UpdatePanel
切换到源代码视图,可以看到UpdatePanel部分的代码如下:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="lbText" runat="server"></asp:Label><br />
<asp:LinkButton ID="lbtnInside" runat="server" OnClick="lbtnInside_Click">
Set Text (Inside UpdatePanel)</asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>
通过观察上述代码,我们知道UpdatePanel所包含的内容,即异步更新之后将要被刷新的
内容要定义在
<ContentTemplate>标签中。
然后双击
lbtnInside LinkButton,并在后台代码中设定lbText中的文字,代码如下:
protected void lbtnInside_Click(object sender, EventArgs e)
{
lbText.Text = "Set by inside button.";
}
用同样的方法双击lbtnOutside LinkButton,也是设定lbText中的文字:
protected void lbtnOutside_Click(object sender, EventArgs e)
{
lbText.Text = "Set by outside button.";
}
可以看到,lbtnInside和lbtnOutside两个LinkButton在点击后均将设定lbText中的文
字,不过它们一个在
UpdatePanel之内,一个在UpdatePanel之外。这也就将造成了它们回送
方式的不同。
在浏览器中查看一下该页面,如图4-3所示。
4.2 在页面中添加 UpdatePanel 79
图4-3 浏览器中的包含UpdatePanel的页面
在图4-3中可以看到,UpdatePanel并没有一个可视化的边界,并且因为lbText的Text属
性值为空字符串,所以该
Label并没有显示出来。点击页面上的两个LinkButton,可以分别得
到图4-4和图4-5所示的界面。
图4-4 点击Set Text (Inside UpdatePanel)按钮后的页面
图4-5 点击Set Text (Outside UpdatePanel)按钮后的页面
可以看到,这两个按钮均更新了Label中的文字。但如果你仔细观察的话,会发现点击Set Text
(Inside UpdatePanel)按钮时的更新是局部进行的,并没有发生页面闪烁;而点击Set Text(Outside
UpdatePanel)按钮则导致了这个页面的回送,页面中所有内容均被重新显示。
仅仅一个控件就实现了我们垂涎已久的页面局部更新功能,是不是很方便呢?
让我们修改一下上面的程序,把
Label从UpdatePanel中拖出来。这时设计器界面将如图4-6
所示。
80 第 4 章 使用 UpdatePanel 控件实现局部更新
图4-6 将Label从UpdatePanel中拖出到页面中
再次运行该页面并分别点击两个LinkButton,你会发现只有在UpdatePanel外面的那个
LinkButton可以正常地设定Label的文字。这是因为点击UpdatePanel中的LinkButton将只
会更新
UpdatePanel中包含的内容,而现在Label却在UpdatePanel之外,自然不会被更新。
这也是我们在最开始把
Label放置于UpdatePanel中的原因。
需要特别注意的是,虽然在异步回送过程中服务器端无法更新定义于
UpdatePanel之外的
页面内容,但整个页面中所有控件的状态,无论其是否在某个
UpdatePanel中,均可以被访问
到。这是因为
UpdatePanel在进行异步回送时将当前的视图状态也一并发送回了服务器,而通
过解析视图状态,ASP.NET在服务器端即可重新构建出页面中的各个控件。
在浏览器中查看一下该页面的客户端源代码,可以发现
UpdatePanel实际上呈现为了一对
<div>标签(如图4-7选中部分所示)。
图4-7 默认情况下UpdatePanel将呈现为<div>标签
这很合理,不是吗?正如本章开头部分所说的,UpdatePanel是一个面板,而按照常识来
说,面板确实就是方方正正的,所以
UpdatePanel也自然选用了<div>作为最终HTML中的布局
元素(
<div>标签默认的CSS display属性即为block)。
但更多时候,我们却将
UpdatePanel 仅仅作为一个逻辑上的控件的容器,表示这个
UpdatePanel中的控件有着某种同样的行为(即一同进行局部更新)。这样我们也许会需要
UpdatePanel最终呈现成一对<span>标签,来包含一些流式布局的元素(<span>标签默认的
CSS
display属性为inline)。
UpdatePanel的RenderMode属性就提供给了控制其最终呈现出的HTML标签的能力。
RenderMode有两个可选值:Block(默认)和Inline,前者将用<div>标签呈现UpdatePanel,
如前面的示例程序所示,而后者则将使用
<span>。Block和Inline的名字也非常直观——与CSS
剩余31页未读,继续阅读
fengzhigu1980
- 粉丝: 1
- 资源: 1
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0