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

发布于 2024-11-16 15:26:13 字数 1763 浏览 0 评论 0原文

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

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

我对此做了很多研究,但我在做这两件事时都遇到了困难。

对于#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 和启用的属性。

I'm trying to have two things happen when I click on a button in an ASP.NET page:

  1. Change the text in an ASP:Label.
  2. Disable the button.

I've done a lot of research on this, but I've had difficulties doing either.

For #1, I thought that this should work, but it doesn't:

<%@ 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>

The "Working..." message is never displayed.

As for #2, I added this to the button (I forget where I found it):

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

That had the desired effect of disabling the button and changing its text (value), but it wasn't possible to change it back using Text and Enabled properties.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

左秋 2024-11-23 15:26:13

我刚刚在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 注册一些事件处理程序 - 在您禁用和启用按钮的事件处理程序中!

华泰

I just found a solution on msdn (http://msdn.microsoft.com/en-us/library/bb386518.aspx). Added some code and remove some unnecessary parts.

<%@ 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>

What you basically do, is you register some eventHandler for Initialize_ and End_Request - in those you disable and enable your button!

HTH

∞琼窗梦回ˉ 2024-11-23 15:26:13

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

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

<asp:UpdateProgress>

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

ClickEvent 中需要的是:

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

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

ASP will not flush the result to the browser while working even if you use an UpdatePanel. It will finish the jobb (including the sleep) before flushing.

You can use a UpdateProgress to show the "Working.." text.

<asp:UpdateProgress>

This will show its content while the UpdatePanel is working. Once the UpdatePanel is finished, the content will disappear.

What you need in you ClickEvent is:

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

This will show the Done text and disable the button. And tell the UpdateProgress to disappear.

小巷里的女流氓 2024-11-23 15:26:13

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

ASP.NET AJAX 有一个内置控件,用于在 UpdatePanel 在服务器上等待时显示此类消息。

查看 UpdateProgress 控件:

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

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

BtnSubmit.Enabled = false

The Working message is never displayed because you are executing the script on the server, which doesn't respond to the client until the method exits.

ASP.NET AJAX has a built in control for displaying messages like this while the UpdatePanel is waiting on the server.

Check out the UpdateProgress Control:

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

You can disable the button by setting the Enabled property to false in your server-side method.

BtnSubmit.Enabled = false
落墨 2024-11-23 15:26:13

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

@2:您编写了 clientSide 来禁用该按钮,没有代码可以重新启用您的按钮

hth

@1: You will never see the message "Working" as you stopped the thread .... Every Message will be shown when your process has "ended".

@2: you coded clientSide to disable the button, there is no code to re-enable your button

hth

掐死时间 2024-11-23 15:26:13

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

我不清楚你想用客户端代码来完成什么,但是要做你所描述的,你几乎就在服务器端:

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

另外,但是你的按钮在你的更新面板模板标签中,所以它参与了ajax 回发。

First off, "working" never appears because the final value of the label at the time of post-back is "Done." Think about what is happening here - you click the button which causes a post-back to the server. It processes the post-back which includes running the button click code, the result of which is then sent back to the browser. Your 'working' text never makes it back over the wire.

I am not clear on what you're trying to accomplish with the client-side code, but to do what you describe you're almsot there server-side:

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

Also, but your button inside your update panel template tags so it participates in the ajax-postback.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文