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

时间:2008-08-11 13:24:19

标签: asp.net javascript

我有一个ASP.NET页面,其中包含一个不可见的asp:按钮。我无法用JavaScript将其显示,因为它没有呈现给页面。

我该怎么做才能解决这个问题?

7 个答案:

答案 0 :(得分:42)

如果需要在客户端操作它,则不能在服务器端使用Visible属性。而是将其CSS显示样式设置为“none”。例如:

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

答案 1 :(得分:10)

试试这个。

<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不同。这些包括各种各样的小组。

答案 2 :(得分:4)

继续 Dave Ward 说:

  • 您无法将 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文件,无论是设置全局变量还是通过函数参数,如我的示例

答案 3 :(得分:3)

在做这样的事情时,你需要警惕XSS

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

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

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

答案 4 :(得分:1)

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

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

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

答案 5 :(得分:0)

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

答案 6 :(得分:0)

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