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

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

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

Ответов (7)

Решение

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

<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, а не идентификатор на стороне сервера, если они различаются.

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

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

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

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

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

  • Вы не можете установить для свойства Visible значение 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, либо задав глобальные переменные, либо через параметр функции, как в моем примере.

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

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

<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 используется, потому что он может отличаться от идентификатора сервера, если кнопка находится внутри элемента управления Naming Container. К ним относятся различные виды панелей.

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

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

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

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