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

Question

В сущности, я хочу знать, как лучше скрыть / показать элемент управления ASP.NET из функции Javascript. Я подумал, что я бы просто получить доступ к элементу управления в Javascript, используя:

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

Затем просто установите для свойства элемента управления Visible значение true / false. Кажется, это не работает, я не могу понять, как установить для параметра «Видимый» значение true / false. Как я могу это сделать? Кроме того, это лучший способ скрыть / показать элемент управления ASP.NET из функции Javascript?

Спасибо, Джефф

Answer 1

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

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

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

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

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

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

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

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

.invisible { display: none; }

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

Answer 2

Установить стиль для «отображения: нет».

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

Answer 3

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

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

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

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

Answer 4

Нельзя скрыть / показать версию 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;
}

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

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

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

Answer 5

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

theControl.style.display = "none";

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

Answer 6

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

theControl.style.display = 'none';

Answer 7

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

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

Answer 8

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

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

   theControl.style.display = 'none';

   theControl.style.display = null;

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

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

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

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