我有一个 ASP.NET 页面,其中有一个不可见的 asp:button。我无法使用 JavaScript 将其变为可见,因为它没有呈现到页面上。
我能做些什么来解决这个问题?
我有一个 ASP.NET 页面,其中有一个不可见的 asp:button。我无法使用 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(如果它们不同)。
试试这个。
<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 不同。其中包括各种面板。
继续戴夫·沃德所说的话:
页面/控件设计
<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
这是我发现的最简单的方法:
BtnUpload.Style.Add("display", "none");
FileUploader.Style.Add("display", "none");
BtnAccept.Style.Add("display", "inherit");
BtnClear.Style.Add("display", "inherit");
我在 Else 中有相反的情况,所以它也处理显示它们。这可以在页面的加载中进行,也可以在刷新页面上的控件的方法中进行。
如果您等到页面加载完毕,然后将按钮的显示设置为无,那应该可以。然后你可以让它在以后可见。
确保 Visible 属性设置为 true,否则控件不会呈现到页面。然后你可以使用脚本来操作它。