Search code examples
asp.netcode-behind

Show and hide button, label and image in code behind

I have a asp.net Web Application with 2 buttons, label and image Only 1 button is visible when entering the page The when i click the button i want it to show a label, until the code is done in code behind, the show next button and when i click that one i want it to show an image when the code is done

Is that possible in code behind or do i need javascript in the aspx code? I have tried run_button.visible = "false" and so on

The code in the aspx is this:

<head runat="server">
<link href="StyleSheet1.css" rel="stylesheet" />
<title></title>

<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:UpdatePanel ID="UpdatePanel1" runat="server"></asp:UpdatePanel>


    <div style="text-align:center">

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

</form>
Solution

  • You can do this with pure 100% server-side controls.

    So, right after the form tag, drop in a script manager (this is required for update panels).

    Then drop in an update panel.

    Then type in this:

                <ContentTemplate>
            </ContentTemplate>

    Now, just place all of you markup between the above content tags.

    The full markup looks like this:

    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Button ID="Button1" runat="server" Text="Test Button 1"
            OnClick="Button1_Click"
            />
        <br />
        <br />
        <asp:Button ID="Button2" runat="server" Text="Test button 2" Visible="false"
            OnClick="Button2_Click"
            />
        <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="100">
            <ProgressTemplate>
            <h3>Content here ONLY shows during server processing</h3>

            <div id="But1Stuff" runat="server">
                <h3>Please wait button 1 code running</h3>
                <img src="Content/wait2.gif"  width="64"/>
            </div>

            <div id="But2Stuff" runat="server" visible="false">
                <h3>Please wait button 2 code running</h3>
                <img src="Content/wait2.gif"  width="64"/>
            </div>
            </ProgressTemplate>
        </asp:UpdateProgress>
    </ContentTemplate>               

</asp:UpdatePanel>

    And code behind:

    Protected Sub Button1_Click(sender As Object, e As EventArgs)

    Button2.Visible = True
    Dim MyDivBut1 As HtmlGenericControl = UpdateProgress1.FindControl("But1Stuff")
    Dim MyDivBut2 As HtmlGenericControl = UpdateProgress1.FindControl("But2Stuff")

    ' hide butt1 one area (but this ONLY takes effect AFTER this code runs!!!
    MyDivBut1.Visible = False
    MyDivBut2.Visible = True    ' will show, but ONLY during progress area showing....

    ' fake a 4 second wait
    System.Threading.Thread.Sleep(4000)

End Sub

Protected Sub Button2_Click(sender As Object, e As EventArgs)

    ' fake a 4 second wait
    System.Threading.Thread.Sleep(4000)

End Sub

    And the result looks like this:

    enter image description here

    Note that the Progress template will automatically hide, or show DURING server-side processing. However, the content inside can still be changed by code behind.

    So, code behind on first button click hides the first div area, and shows the second div area. However, like any server-side code, such changes to the markup (DOM) cannot be seen until code behind running is 100% complete, and that part of the web page travels back down to the client to be rendered in browser. However, the update panel still automatic hides or shows each time for you. And the update panel keeps the settings of the markup we changed above (visible = true/false).

    So, on button one click, we have code to hide the button 1 div area - but that update will not take place until button 1 code is done.

    Thus, on the next button click (button 2), then the progress template again shows, but this time we have hidden div 1 area, and have shown div 2 area.

    As above shows, you can hide or show some content on a button click, and you can conditionally use code behind to hide/show such content.

    And you can achieve this without having to write any JavaScript code.

    Edit: Example in c#

    The markup can be the same, but let's change it a bit anyway.

    So, at top of page, right after form tag, we of course drag + drop in a script manager (this is required for update panel).

    then our markup of 2 buttons. note how we start out with the second button as visible = false.

    So, this markup:

            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Button ID="Button1" runat="server" Text="Test Button 1"
                    OnClick="Button1_Click"
                    CssClass="btn" />
                <br />
            </ContentTemplate>
        </asp:UpdatePanel>

        <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="100"
            AssociatedUpdatePanelID="UpdatePanel1">
            <ProgressTemplate>
                <h3>Content here ONLY shows during server processing</h3>
                <div id="But1Stuff" runat="server">
                    <h3>Please wait button 1 code running</h3>
                    <img src="Content/wait2.gif" width="64" />
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>

        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <br />
                <asp:Button ID="Button2" runat="server" Text="Button 2 test"
                    OnClick="Button2_Click"
                    CssClass="btn" Visible="false" />
            </ContentTemplate>
        </asp:UpdatePanel>

        <asp:UpdateProgress ID="UpdateProgress2" runat="server" DisplayAfter="100"
            AssociatedUpdatePanelID="UpdatePanel2">
            <ProgressTemplate>
                <h3>Please wait button 2 code running</h3>
                <img src="Content/wait2.gif" width="64" />
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>

    Code behind is this:

        protected void Page_Load(object sender, EventArgs e)
    {
            
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        Button2.Visible = true;
        System.Threading.Thread.Sleep(3000);    // fake 3 second long process

    }

    protected void Button2_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);    // fake 3 second long process
    }

    And the result is this:

    enter image description here