菜单

ASP.NET AJAX入门系列(6):UpdateProgress控件简单介绍

2019年7月7日 - 计算机教程

 

图片 1图片 2<script language=”javascript” type=”text/javascript”>图片 3
图片 4
图片 5<!– 
图片 6
图片 7var prm = Sys.WebForms.PageRequestManager.getInstance();
图片 8
图片 9图片 10function CancelAsyncPostBack() 图片 11{
图片 12
图片 13图片 14    if (prm.get_isInAsyncPostBack()) 图片 15{
图片 16
图片 17      prm.abortPostBack();
图片 18
图片 19    }
图片 20
图片 21}
图片 22
图片 23prm.add_initializeRequest(InitializeRequest);
图片 24
图片 25prm.add_endRequest(EndRequest);
图片 26
图片 27var postBackElement;
图片 28
图片 29图片 30function InitializeRequest(sender, args) 图片 31{
图片 32
图片 33图片 34    if (prm.get_isInAsyncPostBack()) 图片 35{
图片 36
图片 37        args.set_cancel(true);
图片 38    }
图片 39
图片 40    postBackElement = args.get_postBackElement();
图片 41
图片 42图片 43    if (postBackElement.id = ‘Panel1Trigger’) 图片 44{
图片 45
图片 46        $get(‘UpdateProgress1’).style.display = ‘block’;                
图片 47
图片 48    }
图片 49
图片 50}
图片 51
图片 52图片 53function EndRequest(sender, args) 图片 54{
图片 55
图片 56图片 57    if (postBackElement.id = ‘Panel1Trigger’) 图片 58{
图片 59
图片 60        $get(‘UpdateProgress1’).style.display = ‘none’;
图片 61
图片 62    }
图片 63
图片 64}
图片 65
图片 66// –>
图片 67
图片 68</script>

图片 69

图片 70

1.创建一个Web页面并切换到设计视图。

图片 71protected void Button1_Click(object sender, EventArgs e)
图片 72图片 73图片 74{
图片 75    System.Threading.Thread.Sleep(3000);
图片 76
图片 77    Label1.Text = DateTime.Now.ToString();
图片 78}

图片 79

主要内容

5.分别设置两个Label的Text属性值为“Initial Page
Rendered”。(官方网站这步有些问题)

12.单击refresh按钮,经过短暂的延时之后显示进度信息,完成异步更新之后UpdatePanel中的信息显示为当前的服务器时间。

1.UpdateProgress控件简单使用

2.在工具箱中双击ScriptManager、UpdatePanel、UpdateProgress控件添加到页面中。添加后页面如下:

10.在第二个UpdatePanel中添加UpdateProgress控件,Panel2
updating…

图片 80

4.在每一个UpdatePanel中分别添加一个Label和Button。

5.选择UpdatePanel控件,在属性窗口中Triggers属性行单击ellipsis
(…)。

4.双击UpdateProgress控件添加到页面中。

8.在Buttond的Click事件处理中添加如下代码,人为的创建一个3秒钟的延迟并显示当前服务器的时间,并附加上一条信息表示是由触发器引发的异步更新。

图片 81

图片 82

8.双击Button添加Click事件。

图片 83

一.UpdateProgress控件简单使用

图片 84图片 85<script language=”javascript” type=”text/javascript”>图片 86
图片 87<!– 
图片 88var prm = Sys.WebForms.PageRequestManager.getInstance();
图片 89
图片 90图片 91function CancelAsyncPostBack() 图片 92{
图片 93
图片 94图片 95    if (prm.get_isInAsyncPostBack()) 图片 96{
图片 97
图片 98      prm.abortPostBack();
图片 99
图片 100    }
图片 101}
图片 102// –>
图片 103</script>

二.使用多个UpdateProgress控件

5.在UpdateProgress控件中添加文本text
Processing…,并添加一个HtmlButton控件并设置它的Text属性为cancle。

 

图片 104

图片 105

4.设置Button的Text属性值为Trigger,并设置ID属性为Panel1Trigger。

图片 106

10.保存并按Ctrl + F5运行。

图片 107

9.在代码窗口,在已有的<Script>脚本块中添加如下代码:

9.在第一个UpdatePanel中添加UpdateProgrss控件,并添加文本Panel1 updating…

7.在Buttond的Click事件处理中添加如下代码,人为的创建一个3秒钟的延迟并显示当前服务器的时间。

2.在工具箱的AJAX
Extensions标签下,双击ScriptManager控件添加到页面中。

[翻译自官方文档]

12.单击第一个UpdatePanel中的Button按钮,进度信息只显示在第一个UpdatePanel中。

11.保存并按Ctrl + F5运行。

默认情况下,UpdageProgress控件将显示页面上所有的UpdatePanel控件更新的进度信息,在以前版本的UpdateProgress中,我们无法设置UpdateProgress只显示某一个UpdatePanel的更新,最新版本的UpdateProgress控件提供了AssociatedUpdatePanelID属性,可以指定UpdateProgress控件显示哪一个UpdatePanel控件。下面的这个例子中UpdateProgrss控件将只显示它所在的UpdatePanel更新信息。

    UpdateProgress控件没有关联任何UpdatePanel,不在UpdatePanel中的控件引发的异步更新(例如用代码实现的更新)。

图片 108protected void Button1_Click(object sender, EventArgs e)
图片 109图片 110图片 111{
图片 112    // Introducing delay for demonstration.
图片 113
图片 114    System.Threading.Thread.Sleep(3000);
图片 115
图片 116    Label1.Text = “Page refreshed at ” +
图片 117
图片 118        DateTime.Now.ToString();
图片 119}
图片 120
图片 121protected void Button2_Click(object sender, EventArgs e)
图片 122
图片 123图片 124图片 125{
图片 126    // Introducing delay for demonstration.
图片 127
图片 128    System.Threading.Thread.Sleep(3000);
图片 129
图片 130    Label2.Text = “Page refreshed at ” +
图片 131
图片 132        DateTime.Now.ToString();
图片 133}

 

主要内容

下面的例子将展示一个不在UpdateProgress所关联的UpdatePanel中的控件所引发的异步更新时,如何显示UpdateProgress控件。

图片 134

一.通过客户端脚本取消异步更新

3.双击UpdatePanel控件两次添加两个UpdatePanel控件到页面中。

在下列情况下,UpdateProgress控件将不会自动显示:

10.保存并按Ctrl + F5运行。

8.添加如下脚本,获取一个当前PageRequestManager类的实例,并创建一个函数调用abortPostBack方法来停止异步更新。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图