使用 JavaScript 更改 ASP.NET 标签的可见性
-
08-06-2019 - |
题
我有一个 ASP.NET 页面,其中有一个不可见的 asp:button。我无法使用 JavaScript 将其变为可见,因为它没有呈现到页面上。
我可以做什么来解决这个问题?
解决方案
如果需要在客户端操作它,则不能在服务器端使用 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(如果它们不同)。
其他提示
尝试这个。
<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 不同。其中包括各种类型的面板。
继续什么 戴夫·沃德 说:
- 您无法设置 可见的 属性设置为 false,因为该控件不会被呈现。
- 您应该使用 风格 属性来设置它的 展示 到 没有任何.
页面/控件设计
<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 文件中,可以设置全局变量,也可以通过函数参数(如我的示例中所示)。
你需要警惕 跨站脚本攻击 当做这样的事情时:
document.getElementById('<%= Label1.ClientID %>').style.display
在这种情况下,很可能没有人能够篡改 Label1 的 ClientID,但为了安全起见,您可能希望通过其中一个来传递它的值 AntiXss 库的 方法:
document.getElementById('<%= AntiXss.JavaScriptEncode(Label1.ClientID) %>').style.display
这是我发现的最简单的方法:
BtnUpload.Style.Add("display", "none");
FileUploader.Style.Add("display", "none");
BtnAccept.Style.Add("display", "inherit");
BtnClear.Style.Add("display", "inherit");
我在 Else 中有相反的内容,所以它也可以处理显示它们。这可以进入页面的加载或刷新页面上的控件的方法中。
如果您等到页面加载,然后将按钮的显示设置为无,那么应该可以工作。然后您可以稍后使其可见。
确保 Visible 属性设置为 true,否则控件将不会呈现到页面。然后你可以使用脚本来操作它。