CODEWITHSUNDEEP
asp.netupdatepanel
rht341
rht341

Reputation: 841

Updating ASP.NET label after button click, using UpdatePanel

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.

Upvotes: 6

Views: 21114

Answers (5)

Pilgerstorfer Franz
Pilgerstorfer Franz

Reputation: 8359

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

Upvotes: 5

Eystein Bye
Eystein Bye

Reputation: 5126

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.

Upvotes: 0

Pilgerstorfer Franz
Pilgerstorfer Franz

Reputation: 8359

@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

Upvotes: 0

Kyle Trauberman
Kyle Trauberman

Reputation: 25684

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

Upvotes: 0

n8wrl
n8wrl

Reputation: 19765

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.

Upvotes: -1

Related Questions