在代码后面显示和隐藏按钮、标签和图像

Question

我有一个 ASP.NET Web 应用程序，有 2 个按钮、标签和图像进入页面时仅可见1个按钮当我单击按钮时，我希望它显示一个标签，直到代码在后面的代码中完成，显示下一个按钮，当我单击该按钮时，我希望它在代码完成时显示图像

这可以在代码后面实现吗？或者我需要在 aspx 代码中使用 javascript 吗？我尝试过 run_button.visible = "false" 等等

aspx中的代码是这样的：

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

Answer 1

您可以使用纯 100% 服务器端控件来做到这一点。

因此，在表单标签之后，放入脚本管理器（这是更新面板所必需的）。

然后放入更新面板。

然后输入：

            <ContentTemplate>
            </ContentTemplate>

现在，只需将所有标记放在上面即可。

完整的标记如下所示：

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

背后的代码如下所示：

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

结果如下所示：

嗯，你不必编写一些 JavaScript 代码例程，但从某种意义上说，是的，你至少必须使用 JavaScript 表达式！（这里有很多语义，因为是的，你必须在这里编写“一些”JavaScript）。

但是，您可以实现此目标，甚至不必编写任何 JavaScript，并使用更新面板。

但是，让我们采取简单的方法，使用 JavaScript 来完成此操作，我们假设您已经

在代码后面显示和隐藏按钮、标签和图像

问题描述投票：0回答：1

1个回答

最新问题

在代码后面显示和隐藏按钮、标签和图像

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1