Как установить свойство «Visible» элемента управления ASP.NET из функции Javascript?

Свойство Visible элемента управления ASP.NET определяет, будет ли он отображаться на клиенте (т.е. отправляться клиенту). Если это ложь, когда страница отображается, она никогда не будет доставлена ​​клиенту.

Таким образом, вы не можете, технически, установить это свойство элемента управления.

Тем не менее, если элемент управления является отображается на клиенте из-за того, что свойство Visible имеет значение true, когда страница отображается, вы можете скрыть его с помощью javascript следующим образом:

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

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

Это предполагает, что атрибут id элемента управления действительно является «txtEditBox» на клиенте и что он уже виден.

Also, is that the best way to hide/show a ASP.NET control from a Javascript function?

Не обязательно «лучший» способ, хотя лучший подход - использовать определения классов CSS:

.invisible { display: none; }

Если вы хотите что-то скрыть, динамически примените этот класс к элементу; когда вы захотите показать его снова, удалите его. Обратите внимание, я считаю, что это будет работать только для элементов, значение display которых начинается как block.

вместо использования 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 = ''

Это должно скрыть элемент управления:

theControl.style.display = 'none';

Установите стиль на «display: none».

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

Для этого вы можете использовать свойство display. Но, как заметил Джейсон, это свойство DHTML DOM (на стороне клиента), которое полностью не зависит от свойства Visible ASP.NET (на стороне сервера), которое контролирует рендеринг.

theControl.style.display = "none";

Показать свойство

Вы хотите установить для свойства стиля отображения значение «none» (чтобы скрыть) или null для отображения.

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

   theControl.style.display = 'none';

   theControl.style.display = null;

Делаем это способом jQuery:

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

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

Вы не можете скрыть / показать версию элемента управления 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% правильно, я сделал это по памяти.

Или, если вы не хотите использовать css:

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

Я думаю, что лучшим решением будет поместить ваш ASP-элемент управления в div и установить свойство display на элемент 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>