如何从 Javascript 函数设置 ASP.NET 控件的“可见”属性？答案

【问题标题】：How do you set the "Visible" property of a ASP.NET control from a Javascript function?如何从 Javascript 函数设置 ASP.NET 控件的“可见”属性？
【发布时间】：2010-09-20 23:58:02
【问题描述】：

基本上我想知道从 Javascript 函数中隐藏/显示 ASP.NET 控件的最佳方法。我想我只需使用 Javascript 访问控件：

var theControl = document.getElementById("txtEditBox");

然后只需将控件的 Visible 属性设置为 true/false。它似乎不起作用，我似乎无法弄清楚如何将“可见”设置为真/假。我怎样才能做到这一点？另外，这是从 Javascript 函数隐藏/显示 ASP.NET 控件的最佳方式吗？

谢谢，杰夫

【问题讨论】：

为什么所有回复的人都被否决了？
我对他们中的一些人投了反对票，因为他们只不过是后来者重复了几个人已经说过的话，他们甚至不想回答所有 OP 的问题，而只是一次性回答。这个问题的答案比 el.style.display = 'none' 更复杂
我明白； SO 有一个功能，可以让您知道其他人是否已经回答了问题，并允许您在页面中加载这些问题。如果有人看到其他人已经提供了相同的答案，他们应该避免发帖。
如果该功能由于某种原因无法正常工作，用户可以在发布后立即删除他们的帖子并注意到其他 4 个回答完全相同的人，当然，除非他们是“第一"（按最旧或最新排序，它会告诉你谁“赢了”）。我只是厌倦了一堆乱七八糟的回答。
我对 8 个答案中的 3 个投了反对票（值得称赞的是，一位用户在意识到自己复制了许多其他人已经提到的内容后删除了他的帖子）。再说一次，对我来说更大的问题是人们认为他们的单行答案可以解决所有 OP 的问题，而实际上并没有。

标签： asp.net javascript

【解决方案1】：

ASP.NET 控件的“Visible”属性决定了它是否会在客户端呈现（即发送到客户端）。如果页面渲染时为false，则永远不会到达客户端。

因此，从技术上讲，您不能设置控件的该属性。

也就是说，如果控件呈现在客户端上，因为在呈现页面时 Visible 属性为 true，那么您可以使用 javascript 将其隐藏，如下所示：

var theControl = document.getElementById("txtEditBox");
theControl.style.display = "none";

// to show it again:
theControl.style.display = "";

假定控件的id 属性在客户端上确实是“txtEditBox”并且它已经可见。

另外，这是从 Javascript 函数隐藏/显示 ASP.NET 控件的最佳方式吗？

不一定有“最佳”方式，但更好的方式是使用 CSS 类定义：

.invisible { display: none; }

当你想隐藏某些东西时，动态地将该类应用到元素上；当您想再次显示时，请将其删除。请注意，我相信这仅适用于 display 值以 block 开头的元素。

【讨论】：

“style.display”还有哪些其他选项？如何再次显示？
没有线索...但是感谢您指出疯狂的重复...我已经删除了我的副本：P

【解决方案2】：

不使用可见，而是将其 css 设置为 display:none

//css:
.invisible { display:none; }

//C#
txtEditBox.CssClass = 'invisible';
txtEditBox.CssClass = ''; // visible again

//javascript
document.getElementById('txtEditBox').className = 'invisible'
document.getElementById('txtEditBox').className = ''

【讨论】：

【解决方案3】：

将样式设置为“显示：无”。

var theControl = document.getElementById("<%= txtEditBox.ClientID %>");
theControl.style.display = "none";

【讨论】：

"txtEditBox.ClientID" 很重要——如果它是 runat="server"，你每次都需要它。 +1
您不必每次都需要它 - 只有当控件不直接位于没有母版页的页面中时才需要它。如果是在简单的 ASPX 页面上，ID 将保持不变。
你说得对...我习惯总是使用 ASP.NET 母版页...+1
UserControls 和 Templated Controls 也需要您使用 Control.ClientID。面板将添加到生成的 ID
有点晚了，但我刚刚开始使用 ASP.NET，这段 JavaScript 帮助了我。谢谢！ +1 :)

【解决方案4】：

这应该隐藏控件：

theControl.style.display = 'none';

【讨论】：

添加了什么？其他人都已经重复了这一点，令人作呕。这只会给页面增加更多的混乱。
更不用说，它甚至不能真正回答他的所有问题。下次尝试制定更长、更深思熟虑的回应，而不是一次性希望获得声誉积分。
哦，你是一个 VB 人......这解释了它。 :P
没有什么比阻止参与更重要了。请注意，在启动我希望是朝着正确方向提供有用线索的过程中，许多其他人也做了同样的事情。下次我一定会允许您在尝试提供帮助之前正确审核所有答案。

【解决方案5】：

您可以为此使用 display 属性。但正如 Jason 所指出的，这是一个 DHTML DOM（客户端）属性，完全独立于控制渲染的 ASP.NET（服务器端）Visible 属性。

theControl.style.display = "none";

Display Property

【讨论】：

【解决方案6】：

您不能隐藏/显示控件的ASP.NET 版本，因为它只存在于服务器上下文中。要使用 JavaScript，您需要使用控件样式/可见性状态。

唯一的方法是将控件包装在 UpdatePanel 中，并具有以下内容：

<asp:UpdatePanel ID="panel" runat="server">
  <ContentTemplate>
    <asp:TextBox ID="myTextBox" runat="server" />
  </ContentTemplate>
  <Triggers>
    <asp:AsynchronousPostbackTrigger ControlID="button" EventName="Click" />
  </Triggers>
</asp:UpdatePanel>
<asp:Button ID="button" runat="server" OnClick="toggle" Text="Click!" />

那么你需要在你的代码中使用这个：

protected void toggle(object sender, EventArgs e){
  myTextBox.Visibility = !myTextBox.Visibility;
}

现在，当您单击按钮时，会发生异步回发，并且会刷新 UpdatePanel。

注意：这不是一个好的解决方案，因为这将是一个非常繁重的 AJAX 请求，因为您需要提交 ViewState。

另外，它可能不是 100% 正确的，我是凭记忆做到的。

【讨论】：

废话 - 谈论回家的路！
嘿，从来没有说过这是一个好的解决方案，只是一个完全 .NET 的解决方案；）如果你不打算使用 display = "none" 那么你就是个傻瓜！我刚刚看到这些解决方案中的每一个都被否决了，我想也许需要一个纯 ASP.NET 解决方案：P
可怕的是，你和我都知道这不是一个真正的好方法，但我敢打赌，有人会看到你的解决方案并认为“嘿，这是一个好方法做到这一点 - 没有 JavaScript ！！！” - 那些人吓到我了。 :)
然后我们提交给每日 wtf！我应该把这段代码放在我的博客上，作为不该做什么的例子。
我同意 - 有时有一个不好的例子很好。哎呀，我确信我上周的一些代码可以作为一个坏例子。不断学习...

【解决方案7】：

您想将显示样式属性设置为“无”（隐藏）或null 显示。

   var theControl = document.getElementById("txtEditBox");

   theControl.style.display = 'none';

   theControl.style.display = null;

以 jQuery 方式进行：

   $('#txtEditBox').hide();

   $('#txtEditBox').show();

【讨论】：

【解决方案8】：

或者如果你不想使用 css：

<asp:TextBox ID="txtBox" runat="server" style="display:none;">

【讨论】：

【解决方案9】：

我认为最好的解决方案是将您的 ASP 控件放在一个 div 中，并将属性显示设置为 div 元素。

<div id="divTest">            
   <asp:TextBox ID="txtTest" runat="server"></asp:TextBox>
</div>

<script type="text/javascript">
    SIN JQuery
    document.getElementById('divTest').style.display = "none";

    CON JQuery
    $('#divTest').hide();
</script>

【讨论】：