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

时间:2020-03-05 18:38:57  来源:igfitidea点击:

我有一个带有asp:button的ASP.NET页面,该按钮不可见。我无法使用JavaScript将其显示为可见,因为它没有呈现到页面上。

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

解决方案

回答

如果需要在客户端进行操作,则不能在服务器端使用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。

回答

如果我们等到页面加载完毕,然后将按钮的显示设置为"无",那应该可以。然后,我们可以在以后使它可见。

回答

确保将Visible属性设置为true,否则控件将不会呈现到页面。然后,我们可以使用脚本进行操作。

回答

试试这个。

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

不要使用服务器端代码执行此操作,因为这需要回发。除了使用Visibility =" false",我们还可以设置隐藏按钮的CSS属性。然后,在javascript中,每当我们要再次显示该按钮时,都将其切换回该属性。

之所以使用ClientID,是因为如果该按钮位于"命名容器"控件中,则它可能与服务器ID不同。这些包括各种面板。

回答

继续戴夫·沃德(Dave Ward)的话:

  • 我们不能将Visible属性设置为false,因为将不会呈现控件。
  • 我们应该使用Style属性将其显示设置为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文件。

回答

在执行以下操作时,我们需要对XSS保持警惕:

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

在这种情况下,没有人可能会篡改Label1的ClientID,但是为了安全起见,我们可能希望通过AntiXss库的一种方法传递其值:

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