使用 JavaScript 更改 ASP.NET 标签的可见性答案

【问题标题】：Change visibility of ASP.NET label with JavaScript使用 JavaScript 更改 ASP.NET 标签的可见性
【发布时间】：2010-09-05 16:27:30
【问题描述】：

我有一个 ASP.NET 页面，其中有一个不可见的 asp:button。我无法使用 JavaScript 将其变为可见，因为它未呈现到页面。

我能做些什么来解决这个问题？

【问题讨论】：

标签： asp.net javascript

【解决方案1】：

如果您需要在客户端对其进行操作，则不能在服务器端使用 Visible 属性。相反，将其 CSS 显示样式设置为“无”。例如：

<asp:Label runat="server" id="Label1" style="display: none;" />

然后，您可以通过以下方式使其在客户端可见：

document.getElementById('Label1').style.display = 'inherit';

您可以使用以下命令再次隐藏它：

document.getElementById('Label1').style.display = 'none';

请注意，在实践中，ClientID 可能比“Label1”更复杂。您需要将 ClientID 与 getElementById 一起使用，而不是服务器端 ID（如果它们不同）。

【讨论】：

【解决方案2】：

试试这个。

<asp:Button id="myButton" runat="server" style="display:none" Text="Click Me" />

<script type="text/javascript">
    function ShowButton() {
        var buttonID = '<%= myButton.ClientID %>';
        var button = document.getElementById(buttonID);
        if(button) { button.style.display = 'inherit'; }
    }
</script>

不要使用服务器端代码来执行此操作，因为这需要回发。您可以设置一个隐藏按钮的 CSS 属性，而不是使用 Visibility="false"。然后，在 javascript 中，只要您想再次显示该按钮，就将该属性切换回来。

使用 ClientID 是因为如果按钮位于命名容器控件内，它可能与服务器 ID 不同。其中包括各种面板。

【讨论】：

【解决方案3】：

继续戴夫·沃德所说的：

您不能将 Visible 属性设置为 false，因为不会呈现控件。
您应该使用 Style 属性将其 display 设置为 none。

页面/控件设计

<asp:Label runat="server" ID="Label1" Style="display: none;" />

<asp:Button runat="server" ID="Button1" />

背后的代码

加载部分的某处：

Label label1 = (Label)FindControl("Label1");
((Label)FindControl("Button1")).OnClientClick = "ToggleVisibility('" + label1.ClientID + "')";

Javascript 文件

function ToggleVisibility(elementID)
{
    var element = document.getElementByID(elementID);

    if (element.style.display = 'none')
    {
        element.style.display = 'inherit';
    }
    else
    {
        element.style.display = 'none';
    }
}

当然，如果您不想切换而只是显示按钮/标签，则相应地调整 javascript 方法。

这里的重点是，您需要将有关您想要在客户端操作的控件的ClientID 的信息发送到 javascript 文件，或者设置全局变量或通过函数参数，如我的示例中所示。

【讨论】：

【解决方案4】：

当你做这样的事情时，你需要警惕XSS：

document.getElementById('<%= Label1.ClientID %>').style.display

在这种情况下，没有人能够篡改 Label1 的 ClientID，但为了安全起见，您可能希望通过 AntiXss library's 方法之一传递它的值：

document.getElementById('<%= AntiXss.JavaScriptEncode(Label1.ClientID) %>').style.display

【讨论】：

【解决方案5】：

这是我找到的最简单的方法：

        BtnUpload.Style.Add("display", "none");
        FileUploader.Style.Add("display", "none");
        BtnAccept.Style.Add("display", "inherit");
        BtnClear.Style.Add("display", "inherit");

我在 Else 中有相反的内容，所以它也处理显示它们。这可以在页面的加载中或在刷新页面上的控件的方法中。

【讨论】：

【解决方案6】：

如果您等到页面加载完毕，然后将按钮的显示设置为无，那应该可以。然后你可以让它在以后可见。

【讨论】：

【解决方案7】：

确保 Visible 属性设置为 true，否则控件不会呈现到页面。然后你可以使用脚本来操作它。

【讨论】：