js 调用 UpdateProgress

UpdateProgress一般这样用起来比较容易一些.

一般会这样用:

html:

<asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text="Label" Width="166px"></asp:Label>
                <br />
                <asp:Button ID="Button2" runat="server" OnClick="Button1_Click"
            Text="Button" />
            </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
        </Triggers>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
       <ProgressTemplate>
                progressing..
            </ProgressTemplate>          
        </asp:UpdateProgress>
    </asp:UpdateProgress>

cs:

protected void Button1_Click(object sender, EventArgs e)
    {
　　    System.Threading.Thread.Sleep(3000);
　　    Label1.Text = DateTime.Now.ToString();
    }

这样做一点问题都没有,也可以达到我们要的效果,但是如果触发updatepanel的控件在updatepanel外面的话,如下所示:

html:

<asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text="Label" Width="166px"></asp:Label>
            </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
        </Triggers>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
       <ProgressTemplate>
                progressing……
            </ProgressTemplate>          
        </asp:UpdateProgress>
    </asp:UpdateProgress>
                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />

cs代码和上面一样.这样子不论如何点击button按钮,也不会出现updateprogress的效果. 最后找到解决办法,在网页上scriptManager下面添加如下一段代码.

<script type="text/javascript">
        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 = 'BtnQuery') {
                $get('UpdateProgress1').style.display = 'block';
            }
        }
        function EndRequest(sender, args) {
            if (postBackElement.id = 'BtnQuery') {
                $get('UpdateProgress1').style.display = 'none';
            }
        }    
    </script>

这样再执行,进度条出来了.(一定要把这段代码加在<asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>之下,否则会提示找不到 Sys.
)