单击按钮后更新 ASP.NET 标签，使用 UpdatePanel答案

【问题标题】：Updating ASP.NET label after button click, using UpdatePanel单击按钮后更新 ASP.NET 标签，使用 UpdatePanel
【发布时间】：2013-05-24 22:15:52
【问题描述】：

我试图在单击 ASP.NET 页面中的按钮时发生两件事：

更改 ASP:Label 中的文本。
禁用该按钮。

我在这方面做了很多研究，但我都遇到了困难。

对于#1，我认为这应该可行，但它没有：

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">


    Protected Sub BtnSubmit_Click(sender As Object, e As System.EventArgs)
        Label1.Text = "Working..."

        System.Threading.Thread.Sleep(5000)

        Label1.Text = "Done."

    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <ajaxToolkit:ToolkitScriptManager runat="server" />
    <div>
        <asp:ListBox runat="server" Height="100px" />
        <br />
        <asp:UpdatePanel runat="server">
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="BtnSubmit" EventName="Click" />
            </Triggers>
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text="Press the button" />
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        <asp:Button runat="server" ID="BtnSubmit" OnClick="BtnSubmit_Click" Text="Submit Me!" />
    </div>
    </form>
</body>
</html>

永远不会显示“工作中...”消息。

至于#2，我在按钮上添加了这个（我忘记了在哪里找到的）：

OnClientClick="this.disabled = true; this.value = 'Working...';"
            UseSubmitBehavior="false"

这具有禁用按钮并更改其文本（值）的预期效果，但无法使用 Text 和 Enabled 属性将其更改回来。

【问题讨论】：

标签： asp.net updatepanel

【解决方案1】：

我刚刚在 msdn (http://msdn.microsoft.com/en-us/library/bb386518.aspx)) 上找到了一个解决方案。添加了一些代码并删除了一些不必要的部分。

<%@ 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 btnDoWork_Click(object sender, EventArgs e)
{
    /// do something long lasting
    System.Threading.Thread.Sleep(3000);
}
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</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();
    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 == 'btnDoWork') {
            $get('btnDoWork').value = 'Working ...';
            $get('btnDoWork').disabled = true;
        }
    }
    function EndRequest(sender, args) {
        if (postBackElement.id == 'btnDoWork') {
            $get('btnDoWork').value = 'Done!';
            $get('btnDoWork').disabled = false;
        }
    }
    // -->
    </script>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Label ID="Label1" runat="server" Text="Hello World!"></asp:Label><br />
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="btnDoWork" />
        </Triggers>
    </asp:UpdatePanel>
    <asp:Button ID="btnDoWork" runat="server" Text="Start!" OnClick="btnDoWork_Click" />
</div>
</form>
</body>
</html>

您的基本工作是为 Initialize_ 和 End_Request 注册一些 eventHandler - 在您禁用和启用按钮的那些中！

HTH

【讨论】：

谢谢先生，正是我想要的。
您可以考虑将此问题标记为已回答 - 提前谢谢：D

【解决方案2】：

即使您使用 UpdatePanel，ASP 也不会在工作时将结果刷新到浏览器。它将在刷新之前完成作业（包括睡眠）。

您可以使用 UpdateProgress 来显示“Working..”文本。

<asp:UpdateProgress>

这将在 UpdatePanel 工作时显示其内容。一旦UpdatePanel完成，内容就会消失。

您需要的 ClickEvent 是：

Label1.Text = "Done."
btnSubmit.Enabled = false

这将显示完成文本并禁用按钮。并告诉 UpdateProgress 消失。

【讨论】：

【解决方案3】：

Working 消息永远不会显示，因为您正在服务器上执行脚本，该脚本在方法退出之前不会响应客户端。

ASP.NET AJAX 有一个内置控件，用于在 UpdatePanel 在服务器上等待时显示这样的消息。

查看 UpdateProgress 控件：

<asp:UpdateProgress runat="server" id="progress" ><ProgressTemplate>Working...</ProgressTemplate></asp:UpdateProgress>

您可以通过在服务器端方法中将 Enabled 属性设置为 false 来禁用该按钮。

BtnSubmit.Enabled = false

【讨论】：

完美。我有点尴尬，我没有找到这个。感谢您和其他所有人的宝贵时间。

【解决方案4】：

@1：当您停止线程时，您将永远不会看到消息“工作中”...。当您的进程“结束”时，将显示每条消息。

@2：您编写了客户端以禁用按钮，没有代码可以重新启用您的按钮

第

【讨论】：

【解决方案5】：

首先，“工作”永远不会出现，因为回发时标签的最终值是“完成”。想想这里发生了什么——您单击导致回发到服务器的按钮。它处理包括运行按钮单击代码的回发，然后将其结果发送回浏览器。您的“工作”文本永远不会通过网络返回。

我不清楚你想用客户端代码完成什么，但要完成你描述的事情，你几乎没有服务器端：

Protected Sub BtnSubmit_Click(sender As Object, e As System.EventArgs)
    Label1.Text = "Done."
    btnSubmit.Enabled = false
End Sub

另外，你的按钮在你的更新面板模板标签中，所以它参与了 ajax-postback。

【讨论】：