ASP.NET Web应用后台控制按钮、标签、图片显隐的实现咨询

Key Takeaways #

• To show the "Working..." label immediately when clicking the first button, you need client-side JavaScript—server-side code alone can't trigger this before backend processing finishes, since ASP.NET postbacks wait for server logic to complete before updating the page.
• Use an UpdatePanel for partial postbacks to avoid full page reloads, which makes the experience smoother for users.
• Server-side code will handle showing subsequent controls once backend tasks are done.

Modified ASPX Code #

<head runat="server">
    <link href="StyleSheet1.css" rel="stylesheet" />
    <title></title>
    <script type="text/javascript">
        function showProcessingLabel() {
            // Show the label right when the button is clicked (before postback)
            document.getElementById('<%= Label2.ClientID %>').style.display = 'block';
        }
    </script>
</head>

<form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td class="alignleft">
                    <img src="Logotyp04.png" class="auto-style6" />
                </td>
            </tr>
        </table>

        <table class="header">
            <tr>
                <td>
                    <asp:Label ID="Label1" runat="server" Text="Washing Machine" CssClass="label"></asp:Label>
                </td>
            </tr>
        </table>
    </div>
    <br /><br /><br />

    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div style="text-align:center">
                <asp:ImageButton ID="Run_Button" runat="server" ImageAlign="Bottom" ImageUrl="~/download.png" 
                    OnClick="run_Click1" OnClientClick="showProcessingLabel();" />
                
                <asp:ImageButton ID="Download_Button" runat="server" ImageAlign="Bottom" ImageUrl="~/images.jpg" 
                    OnClick="download_Click1" Visible="false" />
                
                <asp:Label ID="Label2" runat="server" Text="Working with the laundry..." Height="100px" 
                    Width="200px" Font-Bold="True" Font-Size="80px" ForeColor="Red" style="display:none;"></asp:Label>
                
                <asp:Image ID="Image1" runat="server" ImageUrl="~/shutterstock_142333726b.jpg" Visible="false" />
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
</form>

Server-Side Code (C#) #

Add this to your code-behind file (e.g., YourPage.aspx.cs):

protected void run_Click1(object sender, ImageClickEventArgs e)
{
    // Replace with your actual backend processing logic
    System.Threading.Thread.Sleep(3000); // Simulate 3 seconds of work
    
    // Hide first button, show second button after processing
    Run_Button.Visible = false;
    Download_Button.Visible = true;
    
    // Optional: Hide the processing label once work is done
    Label2.Style["display"] = "none";
}

protected void download_Click1(object sender, ImageClickEventArgs e)
{
    // Replace with your actual backend processing logic
    System.Threading.Thread.Sleep(2000); // Simulate 2 seconds of work
    
    // Show the image after processing
    Image1.Visible = true;
    // Optional: Hide the second button
    Download_Button.Visible = false;
}

How It Works #

1. Client-Side Prompt: The showProcessingLabel() JS function makes the "Working..." label visible instantly when the first button is clicked, so users get immediate feedback before server processing starts.
2. Partial Postbacks: The UpdatePanel (paired with ScriptManager) ensures only the relevant section of the page updates after server logic runs, avoiding full page reloads.
3. Server Control Flow:
   • After processing in run_Click1, the first button is hidden and the second button becomes visible.
   • After processing in download_Click1, the final image is displayed.
4. Initial State:
   • Download_Button and Image1 start as Visible=false so they aren't rendered to the client initially.
   • Label2 uses style="display:none" to exist in the DOM but stay hidden until JS triggers it.

Why Server-Side Alone Won't Work #

If you tried to set Label2.Visible = true only in server code, the label would only appear after backend processing finishes (when the postback completes). Users wouldn't see the "Working..." prompt during processing, which defeats the purpose of the feedback message. JavaScript is necessary to trigger the prompt immediately on button click.

内容的提问来源于stack exchange，提问作者NiclasNilsson