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

Question

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

当我点击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>

Run Code Online (Sandbox Code Playgroud)

永远不会显示"正在工作..."消息.

至于#2,我把它添加到按钮(我忘了我发现的地方):

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

Run Code Online (Sandbox Code Playgroud)

这具有禁用按钮和更改其文本(值)的预期效果,但无法使用"文本"和"启用"属性将其更改回来.

Answer 1

Pil*_*anz 5

我刚刚在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>

Run Code Online (Sandbox Code Playgroud)

您基本上做的是,为Initialize_和End_Request注册一些eventHandler - 在您禁用并启用按钮的那些!

HTH

Answer 2

Eys*_*Bye 0

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

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

<asp:UpdateProgress>

Run Code Online (Sandbox Code Playgroud)

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

ClickEvent 中您需要的是：

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

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	14 年，8 月前
查看次数：	20045 次
最近记录：	12 年，9 月前