Показать скрытый div с помощью кода программной части

У меня есть 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";
}

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


person ravi    schedule 16.11.2009    source источник
comment
Находится ли div внутри какого-либо контейнера именования? Просмотрите исходный код страницы и проверьте, есть ли элемент с идентификатором «данные».   -  person rahul    schedule 16.11.2009
comment
Почему вы используете JS для отображения div при использовании AutoPostBack? Поместите DataList в панель или создайте div runat="server" и просто динамически добавьте стиль отображения.   -  person Mehdi Golchin    schedule 16.11.2009


Ответы (8)


Сделать 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.

person Nick Spiers    schedule 16.11.2009
comment
runat="server" — это ключ к возможности манипулировать div из кода позади. - person charliebrownie; 03.03.2015

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

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

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

Panel1.Visible = истина;

person Dan Diplo    schedule 16.11.2009

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

Визуализация и видимость

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

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

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

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

myDiv.Visible = someConditionalBool;

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

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

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

Скрытие в классе Code Behind

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

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();
person Jeff LaFay    schedule 11.10.2013

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

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

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

Div.Visible = false

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

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

person XtraSimplicity    schedule 06.09.2015

<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
person Aladein    schedule 04.11.2016

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

Я предполагаю, что это сработает, если вы добавите скрипт внизу страницы с RegisterStartupScript - по крайней мере, стоит попробовать.

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

данные.видимый = ложь

person JohnIdol    schedule 16.11.2009
comment
Если div получает атрибут runat=server и его видимость имеет значение false, то он не будет отображаться на странице и недоступен для JavaScript (что, похоже, может быть необходимо). RegisterStartupScript определенно стоит попробовать. - person NakedBrunch; 16.11.2009
comment
Да, я действительно предлагаю runat=server вместо подхода js, но не в комбинации. - person JohnIdol; 16.11.2009

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

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

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

person MWinstead    schedule 31.10.2013

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

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

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

Затем, чтобы показать снова:

myDivElem.style.display = "";

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

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

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

myDiv.show();
person siva vignesh    schedule 14.06.2016