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

Ответ 1

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

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

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

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

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

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

Кроме того, это лучший способ скрыть/показать элемент управления ASP.NET из функции Javascript?

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

.invisible { display: none; }

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

Ответ 2

вместо использования видимого, установите его css для отображения: none

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

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

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

Ответ 3

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

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

Ответ 4

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

theControl.style.display = 'none';

Ответ 5

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

theControl.style.display = "none";

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

Ответ 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;
}

Теперь, когда вы нажимаете кнопку, происходит обратная передача async, и она обновляет UpdatePanel.

Примечание. Это нехорошее решение, так как это будет очень тяжелый запрос AJAX, потому что вам нужно отправить ViewState.

Кроме того, он может быть не на 100% прав, я сделал это из памяти.

Ответ 7

Вы хотите установить для свойства стиля отображения значение 'none' (для скрытия) или 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 и установить для свойства 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>