Показать скрыть div с помощью codebehind

Question

У меня есть DropDownList, для которого я пытаюсь показать div OnSelectedIndexChanged, но там написано OBJECT REQUIRED.

Я связываю DataList в этом div:

ASPX :

<asp:DropDownList runat="server" ID="lstFilePrefix1" AutoPostBack="True" 
                  OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" >
  <asp:ListItem Text="Prefix1" Value="Prefix1" />
  <asp:ListItem Text="Prefix2" Value="Prefix2" />
  <asp:ListItem Text="Prefix3" Value="Prefix3" />
  <asp:ListItem Text="Prefix1 and Prefix2" Value="Prefix1 and Prefix2" />
  <asp:ListItem Text="Prefix2 and Prefix3" Value="Prefix2 and Prefix3" />
</asp:DropDownList>

<asp:DataList ID="DataList1" runat="server" RepeatColumns="4"  
              CssClass="datalist1"  OnItemDataBound="SOMENAMEItemBound"
              CellSpacing="6" onselectedindexchanged="DataList1_SelectedIndexChanged" 
              HorizontalAlign="Center" Width="500px">

код позади :

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
    if (lstFilePrefix1.SelectedItem.Text=="Prefix2")
    {
        int TotalRows = this.BindList(1);
        this.Prepare_Pager(TotalRows);
        Page.ClientScript.RegisterClientScriptBlock(GetType(), "JScript1", "ShowDiv('data');", true);
    }
}

Javascript

function ShowDiv(obj)
{
     var dataDiv = document.getElementById(obj);
     dataDiv.style.display = "block";
}

Что я делаю не так?

Answer 1

Вы можете использовать стандартную панель ASP.NET , а затем установить ее свойство visible в вашем коде.

<asp:Panel ID="Panel1" runat="server" visible="false" />

Чтобы отобразить панель в коде:

Panel1.Visible = true;

Answer 2

Сделать div

runat="server" 

и сделать

if (lstFilePrefix1.SelectedValue=="Prefix2")
{
    int TotalRows = this.BindList(1);
    this.Prepare_Pager(TotalRows);
    data.Style["display"] = "block";
}

Ваш метод не работает, потому что javascript отображается в верхней части тега body до отображения div. Вам нужно будет включить код, чтобы сообщить javascript, чтобы DOM был полностью готов принять ваш запрос, что, вероятно, будет проще всего сделать с jQuery.

Answer 3

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

Рендеринг и видимость

В некоторых случаях элементы на вашей странице не нужно отображать для пользователя из-за некоторого типа логики или значения базы данных. В этом случае вы можете полностью запретить рендеринг (создание элемента управления на возвращаемой веб-странице). Вы можете захотеть сделать это, если элемент управления не нужно показывать позже на стороне клиента, потому что, несмотря ни на что, пользователю, просматривающему страницу, никогда не нужно его видеть.

Видимость любого элемента управления или элемента может быть установлена ​​со стороны сервера. Если это обычный старый HTML-элемент, вам просто нужно установить значение атрибута runat на server на странице разметки.

<div id="myDiv" runat="server"></div>

Решение о том, визуализировать div или нет, теперь может быть принято в коде класса следующим образом:

myDiv.Visible = someConditionalBool;

Если установлено значение true, оно будет отображаться на странице, а если оно равно false, оно не будет отображаться вообще, даже не будет скрыто.

Скрытие на стороне клиента

Скрытие элемента выполняется только на стороне клиента. Это означает, что он отображается, но на нем установлен стиль CSS display, который указывает браузеру не показывать его пользователю. Это полезно, когда вы хотите скрыть / показать вещи на основе пользовательского ввода. Важно знать, что элемент МОЖЕТ быть скрыт на стороне сервера, если для элемента / элемента управления установлено runat=server, как я объяснил в предыдущем примере.

Скрытие в коде за классом

Чтобы скрыть элемент, который вы хотите отобразить на странице, но скрыть, есть еще одна простая строка кода:

myDiv.Style["display"] = "none";

Если вам необходимо удалить сторону сервера в стиле display, это можно сделать, удалив стиль display или установив для него другое значение, например inline или block (значения описаны здесь ).

myDiv.Style.Remove("display");
// -- or --
myDiv.Style["display"] = "inline";

Скрытие на стороне клиента с помощью JavaScript

Используя простой старый javascript, вы можете легко скрыть этот же элемент таким образом

var myDivElem = document.getElementById("myDiv");
myDivElem.style.display = "none";

// then to show again
myDivElem.style.display = "";

jQuery делает скрытие элементов немного проще, если вы предпочитаете использовать jQuery:

var myDiv = $("#<%=myDiv.ClientID%>");
myDiv.hide();

// ... and to show 
myDiv.show();

Answer 4

Другой метод (который, как кажется, еще никто не упомянул), заключается в добавлении дополнительной пары KeyValue в массив Style элемента. * 1001 то есть *

Div.Style.Add("display", "none");

Это дает дополнительное преимущество, заключающееся в простом сокрытии элемента вместо предотвращения его записи в DOM для начала - в отличие от свойства Visible. т.е.

Div.Visible = false

приводит к тому, что div никогда не записывается в DOM.

Редактировать: Это должно быть сделано в «коде позади», т.е. Файл * .aspx.cs.

Answer 5

<div id="OK1"  runat="server" style ="display:none" >
    <asp:DropDownList ID="DropDownList2" runat="server"></asp:DropDownList>
</div>

код vb.net

  Protected Sub DropDownList1_SelectedIndexChanged(sender As Object, e As EventArgs) Handles DropDownList1.SelectedIndexChanged
    If DropDownList1.SelectedIndex = 0 Then
        OK1.Style.Add("display", "none")
    Else
        OK1.Style.Add("display", "block")
    End If
End Sub

Answer 6

Скрытие на стороне клиента с помощью JavaScript

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

var myDivElem = document.getElementById("myDiv");
myDivElem.style.display = "none";

Затем показать снова:

myDivElem.style.display = "";

jQuery делает скрытие элементов немного проще, если вы предпочитаете использовать jQuery:

var myDiv = $("#<%=myDiv.ClientID%>");
myDiv.hide();

... и показать:

myDiv.show();

Answer 7

У меня была проблема, когда установка element.Visible = true в моем коде позади не имела никакого эффекта на реальном экране. Решение для меня заключалось в том, чтобы обернуть область моей страницы, где я хотел показать div, в ASP UpdatePanel, который используется для частичного обновления экрана.

http://msdn.microsoft.com/en-us/library/bb399001.aspx

Наличие элемента runat = server дало мне доступ к нему из кодовой области и поместив его в UpdatePanel, чтобы оно действительно обновлялось на экране.

Answer 8

RegisteredClientScriptBlock добавляет сценарий вверху страницы постбека с без гарантии порядка , что означает, что либо вызов вводится после объявления функции (ваш файл js с функция встроена после вашего вызова) или когда скрипт пытается выполнить div, вероятно, еще нет, потому что страница по-прежнему отображается. Хорошей идеей, вероятно, будет смоделировать два сценария, которые я описал выше для firebug, и посмотреть, есть ли у вас похожие ошибки.

Полагаю, это сработает, если вы добавите скрипт внизу страницы с помощью RegisterStartupScript - хотя бы того стоит.

В любом случае, в качестве альтернативного решения, если вы добавите атрибут runat="server" в div, вы сможете получить к нему доступ по его идентификатору в кодовой области (не обращаясь к js - как круто это может быть) и заставить его исчезнуть. как это:

data.visible = false