在本篇文章中,我们将通过编写JavaScript来使用客户端行为扩展UpdateProgress控件,客户端代码将使用ASP.NET AJAX Library中的PageRequestManager,在UpdateProgress控件中,将添加一个Button,来允许用户取消异步更新,并且使用客户端脚本来显示或者隐藏进度信息。
主要内容
1.通过客户端脚本取消异步更新
2.通过客户端脚本显示或者隐藏进度信息
一.通过客户端脚本取消异步更新
1.创建一个Web页面并切换到设计视图。
2.在工具箱中双击ScriptManager、UpdatePanel、UpdateProgress控件添加到页面中。添加后页面如下:
3.在UpdatePanel控件中添加一个Label控件并设置它的Text属性值为“Panel Rendered”。
4.添加一个Button控件并设置它的Text属性值为“refresh”。
5.在UpdateProgress控件中添加文本text Processing…,并添加一个HtmlButton控件并设置它的Text属性为cancle。
6.双击refresh控件添加Click事件。
7.在Buttond的Click事件处理中添加如下代码,人为的创建一个3秒钟的延迟并显示当前服务器的时间。
{
System.Threading.Thread.Sleep(3000);
Label1.Text = DateTime.Now.ToString();
}
8.添加如下脚本,获取一个当前PageRequestManager类的实例,并创建一个函数调用abortPostBack方法来停止异步更新。
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
if (prm.get_isInAsyncPostBack()) {
prm.abortPostBack();
}
}
// -->
</script>
9.设置HtmlButton的click特性为CancelAsyncPostBack。
10.添加如下的样式块到<head>元素之间。
#UpdatePanel1 {
width:200px; height:100px;
border: 1px solid gray;
}
#UpdateProgress1 {
width:200px; background-color: #FFC080;
bottom: 0%; left: 0px; position: absolute;
}
</style>
11.保存并按Ctrl + F5运行。
12.单击refresh按钮,经过短暂的延时之后显示进度信息,完成异步更新之后UpdatePanel中的信息显示为当前的服务器时间。
13.单击refresh按钮并立即单击Cancle按钮结束异步更新,注意到UpdatePanel中的时间信息并没有更新。
二.通过客户端脚本显示或者隐藏进度信息
在下列情况下,UpdateProgress控件将不会自动显示:
由UpdateProgress控件关联的UpdatePanel之外的控件引发的异步更新。
UpdateProgress控件没有关联任何UpdatePanel,不在UpdatePanel中的控件引发的异步更新(例如用代码实现的更新)。
下面的例子将展示一个不在UpdateProgress所关联的UpdatePanel中的控件所引发的异步更新时,如何显示UpdateProgress控件。
1.在我们前面所创建的页面中,切换到设计视图。
2.选中UpdateProgress控件,在属性窗口中,设置AssociatedUpdatePanelID属性为UpdatePanel1。
3.在UpdatePanel和UpdateProgress控件之外添加一个Button控件。
4.设置Button的Text属性值为Trigger,并设置ID属性为Panel1Trigger。
5.选择UpdatePanel控件,在属性窗口中Triggers属性行单击ellipsis (…)。
6.创建一个异步更新触发器,并设置控件ID为Panel1Trigger。
7.双击Trigger按钮添加Click事件。
8.在Buttond的Click事件处理中添加如下代码,人为的创建一个3秒钟的延迟并显示当前服务器的时间,并附加上一条信息表示是由触发器引发的异步更新。
9.在代码窗口,在已有的<Script>脚本块中添加如下代码:
<!--
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
if (prm.get_isInAsyncPostBack()) {
prm.abortPostBack();
}
}
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;
function InitializeRequest(sender, args) {
if (prm.get_isInAsyncPostBack()) {
args.set_cancel(true);
}
postBackElement = args.get_postBackElement();
if (postBackElement.id = 'Panel1Trigger') {
$get('UpdateProgress1').style.display = 'block';
}
}
function EndRequest(sender, args) {
if (postBackElement.id = 'Panel1Trigger') {
$get('UpdateProgress1').style.display = 'none';
}
}
// -->
</script>
10.保存并按Ctrl + F5运行。
11.单击Trigger按钮,如下所示:
[翻译自官方文档]
Worktile,新一代简单好用、体验极致的团队协同、项目管理工具,让你和你的团队随时随地一起工作。完全免费,现在就去了解一下吧。
https://worktile.com
你看清楚没有,楼主明明写的是onclick="CancelAsyncPostBack()" ,什么时候变成onclick="CancelAsyncPostBack"了,难道 onclick="javascript:CancelAsyncPostBack();" 不是等价于onclick="CancelAsyncPostBack()"吗?
<script language="javascript" type="text/javascript">
function CancelAsyncPostBack()
{
// var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm.get_isInAsyncPostBack())
{
prm.abortPostBack();
}
}
var prm;
window.onload = function()
{
prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
}
var postBackElement;
function InitializeRequest(sender, args) {
if (prm.get_isInAsyncPostBack()) {
args.set_cancel(true);
}
postBackElement = args.get_postBackElement();
if (postBackElement.id = 'Button3') {
$get('UpdateProgress1').style.display = 'block';
}
}
function EndRequest(sender, args) {
if (postBackElement.id = 'Button3') {
$get('UpdateProgress1').style.display = 'none';
}
}
</script>
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;
function InitializeRequest(sender, args) {
if (prm.get_isInAsyncPostBack()) {
args.set_cancel(true);
}
postBackElement = args.get_postBackElement();
if (postBackElement.id = 'PanelTargget') {
$get('UpdateProgress1').style.display = 'block';
}
}
function EndRequest(sender, args) {
if (postBackElement.id = 'PanelTargget') {
$get('UpdateProgress1').style.display = 'none';
}
}
阿蒙[匿名]: @Hunts.C
我想你的原因可能是这样:
你的ScriptManager控件放在body中
而你的javascript代码放在了ScriptManager控件之前的位置
因为html是逐行加载的
由于var prm = Sys.PageRequestManager.getInstance();在加载ScriptManager控件的js代码之前就被调用了,所以就出现了Sys未定义的情况
但是如果你把这行代码放在每个function中,或者把整段js代码放在ScriptManager控件之后,就不会出现这个问题了!
--------------------------------------------------------
这个好用,我试了半天,谢谢了呀
zagelover: --引用--------------------------------------------------
阿蒙[匿名]: @Hunts.C
我想你的原因可能是这样:
你的ScriptManager控件放在body中
而你的javascript代码放在了ScriptManager控件之前的位置
因为html是逐行加载的
由于var prm = Sys.PageRequestManager.getInstance();在加载ScriptManager控件的js代码之前就被调用了,所以就出现了Sys未定义的情况
但是如果你把这行代码放在每个function中,或者把整段js代码放在ScriptManager控件之后,就不会出现这个问题了!
--------------------------------------------------------
这个好用,我试了半天,谢谢了呀
--------------------------------------------------------
!~已阅~!
很容易范这个毛病!
应该就是这个原因
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
Label1.Text = DateTime.Now.ToString();
}
protected void Panel1Trigger_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
Label1.Text = DateTime.Now.ToString() + " - trigger";
}
</script>
<html xmlns=" http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>UpdateProgress Tutorial</title>
<style type="text/css">
#UpdatePanel1 {
width:200px; height:100px;
border: 1px solid gray;
}
#UpdateProgress1 {
width:200px; background-color: #FFC080;
bottom: 0%; left: 0px; position: absolute;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<script language="javascript" type="text/javascript">
<!--
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
if (prm.get_isInAsyncPostBack()) {
prm.abortPostBack();
}
}
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;
function InitializeRequest(sender, args) {
if (prm.get_isInAsyncPostBack()) {
args.set_cancel(true);
}
postBackElement = args.get_postBackElement();
if (postBackElement.id == 'Panel1Trigger') {
$get('UpdateProgress1').style.display = 'block';
}
}
function EndRequest(sender, args) {
if (postBackElement.id == 'Panel1Trigger') {
$get('UpdateProgress1').style.display = 'none';
}
}
// -->
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Panel rendered."></asp:Label><br />
<asp:Button ID="Button1" runat="server" Text="refresh" OnClick="Button1_Click" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Panel1Trigger" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="Panel1Trigger" runat="server" Text="Trigger" OnClick="Panel1Trigger_Click" />
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
Processing...
<input id="Button2"
type="button"
value="cancel"
onclick="CancelAsyncPostBack()" />
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</form>
</body>
</html>
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
Label1.Text = DateTime.Now.ToString();
}
</script>
<html xmlns=" http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>UpdateProgress Tutorial</title>
<style type="text/css">
#UpdatePanel1 {
width:200px; height:100px;
border: 1px solid gray;
}
#UpdateProgress1 {
width:200px; background-color: #FFC080;
bottom: 0%; left: 0px; position: absolute;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"/>
<script language="javascript" type="text/javascript">
<!--
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
if (prm.get_isInAsyncPostBack()) {
prm.abortPostBack();
}
}
// -->
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Panel rendered."></asp:Label><br />
<asp:Button ID="Button2" runat="server" OnClick="Button1_Click" Text="refresh" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Processing...
<input id="Button2"
type="button"
value="cancel"
onclick="CancelAsyncPostBack()" />
</ProgressTemplate>
</asp:UpdateProgress>
</form>
</body>
</html>
是这样的,你的这篇文章里面用到了控件开发者提供的一些类,这些类你是在哪里查到的??还有很多讲控件的只讲了些基本的用法,有些想自己扩展都不行,我想问的是:你拿到一个陌生的控件,你会去怎么熟悉它???
Lee,虽然是译文,但你翻译的很棒。但是我更奢求能劳烦您,在示例前讲解下自己的想法,比如这个例子是为了实现了什么?
Thanks
Lee,虽然是译文,但你翻译的很棒。但是我更奢求能劳烦您,在示例前讲解下自己的想法,比如这个例子是为了实现了什么?
Thanks
是的,我也碰到这个问题了。
怎么解决啊?
?,我的邮箱zxmzp2004@yahoo.com.cn十分感谢
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
Label1.Text = DateTime.Now.ToString();
}
</script>
the north face outlet 96 north face denali 96 northface outlet
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>UpdateProgress Tutorial</title>
<style type="text/css">
#UpdatePanel1 {
width:200px; height:100px;
border: 1px solid gray;
}
多谢了!正好解决了我的问题