Question

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

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

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

谢谢，杰夫

Answer 1

ASP.NET控件的“Visible”属性确定它是否将在客户端上呈现（即发送到客户端）。如果在呈现页面时它是错误的，它将永远不会到达客户端。

因此，从技术上讲，您无法设置控件的属性。

也就是说，如果控件是在客户端呈现，因为在呈现页面时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开头的元素。

Answer 2

而不是使用visible，将其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 = ''

Answer 3

将样式设置为“display：none”。

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

Answer 4

这应隐藏控件：

theControl.style.display = 'none';

Answer 5

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

theControl.style.display = "none";

Display Property

Answer 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％正确，我是从记忆中做到的。

Answer 7

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

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

   theControl.style.display = 'none';

   theControl.style.display = null;

以jQuery方式实现：

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

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

Answer 8

或者如果您不想使用css：

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

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

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

9 个答案: