使用 asp:update 更新进度答案

【问题标题】：Update progress using asp:update使用 asp:update 更新进度
【发布时间】：2014-08-27 09:59:00
【问题描述】：

我需要在我的页面中将进度显示为模式。我已经编写了以下代码，但它不工作。单击提交按钮时，模式未显示。我已经花了足够多的时间在谷歌上搜索，但没有用。有人可以帮忙吗？

<%@ 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 Page_Load(object sender, EventArgs e)
    {
        ScriptManager scriptManager = ScriptManager.GetCurrent(this.Page);
        scriptManager.RegisterPostBackControl(this.Button1);
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
body
{
    margin: 0;
    padding: 0;
    font-family: Arial;
}
.modal
{
    position: fixed;
    z-index: 999;
    height: 100%;
    width: 100%;
    top: 0;
    background-color: Black;
    filter: alpha(opacity=60);
    opacity: 0.6;
    -moz-opacity: 0.8;
}
.center
{
    z-index: 1000;
    margin: 300px auto;
    padding: 10px;
    width: 130px;
    background-color: White;
    border-radius: 10px;
    filter: alpha(opacity=100);
    opacity: 1;
    -moz-opacity: 1;
}
.center img
{
    height: 128px;
    width: 128px;
}
</style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
        <ProgressTemplate>
            <div class="modal">
                <div class="center">
                    <img alt="" src="/Content/images/loading.gif" />
                </div>
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div align="center">
                <h1>
                    Click the button to see the UpdateProgress!</h1>
                <asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Button1_Click" />
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>   
</body>
</html>

【问题讨论】：

标签： html asp.net

【解决方案1】：

<script runat="server">

protected void Page_Load(object sender, EventArgs e)
{
    ScriptManager scriptManager = ScriptManager.GetCurrent(this.Page);
    scriptManager.RegisterPostBackControl(this.Button1);
}
protected void Button1_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(3000);
}
</script>

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
    <ProgressTemplate>
        <div class="modal">
            <div class="center">
                <img alt="" src="/Content/images/loading.gif" />
            </div>
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div align="center">
            <h1>
                Click the button to see the UpdateProgress!</h1>
            <asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Button1_Click" />
        </div>
    </ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="click" />
</Triggers>
</asp:UpdatePanel>

更新：尝试添加AsyncPostBackTrigger。我已经更新了上面的代码。

【讨论】：

不，它不起作用。我收到错误错误：Sys.WebForms.PageRequestManagerParserErrorException：无法解析从服务器收到的消息。
点击按钮后能否在开发者控制台窗口的网络窗口中查看。检查回发是否返回 http 状态码 500。
不，只要我单击按钮，我就会在开发人员控制台窗口中收到上述错误
您是否尝试过评论Thread.Sleep() 行？如果是并且仍然存在该错误。尝试放置一个断点，然后调试应用程序以找出确切的错误行。我自己会做的，但我没有收到那个错误。
我发现单击 asp:button 时没有触发 Button1_Click 函数

【解决方案2】：

这是因为您的 UpdateProgress 标记超出了您的更新面板内容模板。将 UpdateProgress 标签放在更新面板内容模板中，它就会起作用。

另请注意，您不需要在页面加载中使用代码。控件默认注册。

<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

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

        <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
            <ProgressTemplate>
                <div class="modal">
                    <div class="center">
                        <img alt="" src="/Content/images/loading.gif" />
                    </div>
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>

        <div align="center">
            <h1>
                Click the button to see the UpdateProgress!</h1>
            <asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Button1_Click" />
        </div>
    </ContentTemplate>
</asp:UpdatePanel>
</form>

【讨论】：