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

Question

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

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

Answer 1

Если вам нужно манипулировать им на стороне клиента, вы не можете использовать свойство 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, а не ID на стороне сервера, если они различаются.

Answer 2

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

<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. К ним относятся панели различных видов.

Answer 3

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

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

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

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

Answer 4

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

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

---

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

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

Answer 5

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

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

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

Answer 6

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

Answer 7

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