UpdateProgress学习

最新推荐文章于 2025-08-13 17:00:00 发布

转载最新推荐文章于 2025-08-13 17:00:00 发布 · 67 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/panjun-Donet/archive/2009/02/12/1389462.html

文章标签：

#javascript #ViewUI

本文探讨了在ASP.NET AJAX中如何正确配置UpdateProgress控件以显示加载提示。通过具体示例展示了当Button控件放置在UpdatePanel外部并使用Triggers触发更新时，如何通过JavaScript手动控制UpdateProgress的显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在updatePanel里面放了一个Button和Label，然后点击Button给Label赋值。这个是个很简单的过程了。
代码我就补贴了。
然后我再加了一个UpdateProgress控件，把它的AssociatedUpdatePanelID指向刚加的UpdatePanel,其代码如下：

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<asp:Label ID="Label1" runat="server" Text="Label" Width="204px"></asp:Label><br />

<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="1">

<p>

更新中......

</p>

</ProgressTemplate>

</asp:UpdateProgress>

</ContentTemplate>

        </asp:UpdatePanel>
Button事件：
protected void Button1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
        Label1.Text = DateTime.Now.ToString();
    }

运行结果正常，点击Button，“更新中...”出现，然后Label被赋值。

然后我把updateProgress拿到updatePanel控件外面来，运行，正常。
然后我再把button控件拿到updatePannel控件外面来，然后又在updatepanel里面加上triggers，代码如下：

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<asp:Label ID="Label1" runat="server" Text="Label" Width="204px"></asp:Label><br />

</ContentTemplate>

<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />

</Triggers>

</asp:UpdatePanel>

<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" Width="201px" />

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="1">

<p>

更新中......

</p>

</ProgressTemplate>

</asp:UpdateProgress>

运行，点击Button按钮，发现"更新中..."字段没有出现，但是赋值正常。
难道使用triggers的调用外部控件来进行异步传输，不会引发UpdateProgress?

后来在网上找到了解决方法：
在代码里面加入如下js:

var 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 = 'Button1') {

$get('UpdateProgress1').style.display = 'block';

}

function EndRequest(sender, args)

{

if (postBackElement.id = 'Button1')

{

$get('UpdateProgress1').style.display = 'none';

}

</script>

然后运行正常，从上面的js可以看出，如果是triggers触发的button事件，那么progress控件的style.display始终都是none，在button_click事件触发时，并没有使progress的 style.display变成block。所以里面的"更新中..."显示不出来。

再如：

    <div id="divUpdateProgress" style="position: absolute; right: 466px; top: 48px; height: 20px;">
        <asp:UpdateProgress ID="UpdateProgress1" runat="server">
            <ProgressTemplate>
                <div style="font-size: 12px; color: Blue; background-color: #FFFFD6; border: solid 1px blue;">
                    <img src="../Image/ajaxloader.gif" />
                    数据加载中，请稍候
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>
    </div>