使用JavaScript更改ASP.NET標簽的可見性

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>

不要使用服務器端代碼來執行此操作，因為這需要回發。 您可以只設置隱藏按鈕的CSS屬性，而不是使用Visibility =“false”。 然后，在javascript中，只要您想再次顯示該按鈕，就可以切換該屬性。

使用ClientID是因為如果按鈕位於命名容器控件內，它可能與服務器ID不同。 這些包括各種面板。

Answer 3

繼續戴夫沃德說的話：

• 您不能將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 4

在做這樣的事情時你需要警惕XSS ：

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

在這種情況下，沒有人能夠篡改Label1的ClientID，但為了安全起見，您可能希望通過AntiXss庫的方法之一傳遞它的值：

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

Answer 5

這是我找到的最簡單的方法：

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

我在Else中有相反的，所以它也處理它們。 這可以在頁面的加載或方法中進行刷新頁面上的控件。

Answer 6

如果您等到頁面加載，然后將按鈕的顯示設置為無，那應該可以。 然后你可以在以后看到它。

Answer 7

確保Visible屬性設置為true或控件不會呈現給頁面。 然后你可以使用腳本來操縱它。