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

Question

我有一個不可見的asp：按鈕的ASP.NET頁面。我無法用JavaScript顯示它，因爲它沒有呈現給頁面。

我能做些什麼來解決這個問題？

Answer 1

如果您需要在客戶端對其進行操作，則不能在服務器端使用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」更復雜的問題。您需要使用帶有getElementById的ClientID，而不是服務器端ID（如果它們不同）。

Answer 2

如果等到頁面加載完畢，然後將按鈕的顯示設置爲無，那應該可以工作。然後你可以在稍後看到它。

Answer 3

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

Answer 4

試試這個。

<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 5

什麼戴夫·沃德繼續說：

• 您不能可見屬性設置爲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文件，可以通過設置全局變量或通過函數參數（如我的示例中）來設置。

Answer 6

你需要做的，當這樣的東西要警惕的XSS：

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

有機會，沒有人將能夠與Label1的在這種情況下，客戶端ID篡改，但只是爲了你可能想通過它在安全方面是通過對AntiXss library's方法之一值：

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

Answer 7

這是我發現的最簡單的方法：

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

我在else相反的，所以它能夠處理顯示它們。這可以通過頁面加載或方法來刷新頁面上的控件。