Изменение видимости метки ASP.NET с помощью JavaScript

StackOverflow https://stackoverflow.com/questions/7773

  •  08-06-2019
  •  | 
  •  

Вопрос

У меня есть страница ASP.NET с кнопкой asp:, которая не видна.Я не могу сделать его видимым с помощью JavaScript, поскольку он не отображается на странице.

Что я могу сделать, чтобы решить эту проблему?

Это было полезно?

Решение

Если вам нужно манипулировать им на стороне клиента, вы не можете использовать свойство Visible на стороне сервера.Вместо этого установите стиль отображения CSS на «нет».Например:

<asp:Label runat="server" id="Label1" style="display: none;" />

Затем вы можете сделать его видимым на стороне клиента с помощью:

document.getElementById('Label1').style.display = 'inherit';

Вы можете снова скрыть его с помощью:

document.getElementById('Label1').style.display = 'none';

Имейте в виду, что на практике могут возникнуть проблемы, если ClientID будет более сложным, чем «Label1».Вам нужно будет использовать ClientID с getElementById, а не идентификатор на стороне сервера, если они различаются.

Другие советы

Попробуй это. 

<asp:Button id="myButton" runat="server" style="display:none" Text="Click Me" />

<script type="text/javascript">
    function ShowButton() {
        var buttonID = '<%= myButton.ClientID %>';
        var button = document.getElementById(buttonID);
        if(button) { button.style.display = 'inherit'; }
    }
</script>

Не используйте для этого серверный код, поскольку для этого потребуется обратная передача.Вместо использования Visibility="false" вы можете просто установить свойство CSS, которое скроет кнопку.Затем в javascript переключите это свойство обратно, когда захотите снова отобразить кнопку.

ClientID используется, поскольку он может отличаться от идентификатора сервера, если кнопка находится внутри элемента управления «Контейнер именования».К ним относятся панели различных видов.

Продолжая то, что Дэйв Уорд сказал:

  • Вы не можете установить Видимый для свойства установлено значение false, поскольку элемент управления не будет отображен.
  • Вам следует использовать Стиль свойство, чтобы установить его отображать к никто.

Дизайн страницы/элемента управления

<asp:Label runat="server" ID="Label1" Style="display: none;" />

<asp:Button runat="server" ID="Button1" />

Код позади

Где-то в разделе загрузки:

Label label1 = (Label)FindControl("Label1");
((Label)FindControl("Button1")).OnClientClick = "ToggleVisibility('" + label1.ClientID + "')";

Javascript-файл

function ToggleVisibility(elementID)
{
    var element = document.getElementByID(elementID);

    if (element.style.display = 'none')
    {
        element.style.display = 'inherit';
    }
    else
    {
        element.style.display = 'none';
    }
}

Конечно, если вы хотите не переключаться, а просто показывать кнопку/метку, соответствующим образом настройте метод javascript.

Важным моментом здесь является то, что вам необходимо отправить информацию о ClientID элемента управления, которым вы хотите манипулировать на стороне клиента, в файле javascript, либо устанавливая глобальные переменные, либо через параметр функции, как в моем примере.

Вам нужно опасаться XSS когда делаешь такие вещи:

document.getElementById('<%= Label1.ClientID %>').style.display

Скорее всего, в этом случае никто не сможет подделать ClientID Label1, но на всякий случай вы можете передать его значение через один из Библиотека AntiXss методы:

document.getElementById('<%= AntiXss.JavaScriptEncode(Label1.ClientID) %>').style.display

Это самый простой способ, который я нашел:

        BtnUpload.Style.Add("display", "none");
        FileUploader.Style.Add("display", "none");
        BtnAccept.Style.Add("display", "inherit");
        BtnClear.Style.Add("display", "inherit");

У меня в Else все наоборот, поэтому он также обрабатывает их отображение.Это может быть загрузка страницы или метод обновления элементов управления на странице.

Если вы подождете, пока страница загрузится, а затем отключите отображение кнопки, это должно сработать.Позже вы сможете сделать его видимым.

Убедитесь, что для свойства Visible установлено значение true, иначе элемент управления не будет отображаться на странице.Затем вы можете использовать скрипт для управления им.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top