使用javascript將面板設置為可見

Question

如何使用JavaScript使<asp:Panel>可見？

我已完成以下操作，但收到錯誤消息（無法讀取null的屬性樣式）

 <asp:Panel runat="server" id="panNonAfricanCountries" Visible="false">

var panNonAfricaDropDown = document.getElementById("panNonAfricanCountries")
if (dropDownFirst == "Yes") {
    panNonAfricaDropDown.style.visibility = "visible";
}

Answer 1

asp.net控件上的Visible="false" 結果導致未在頁面上呈現該控件 。

您在這里嘗試做的是呈現它，但是使用CSS樣式將其隱藏在用戶面前，直到使用javascript顯示它為止。 要歸檔不使用“可見”但要為面板設置樣式或CSS的文件。

<asp:Panel ID="PanelId" runat="server" Visible="true" style="visibility:hidden" >
Some Content here...    
</asp:Panel>

asp.Panel呈現為div並且頁面上的html可能如下所示：

<div id="PanelId" style="visibility:hidden">
Some Content here...    
</div>

我之所以說是因為我們不確定Id的呈現方式。 要獲得它，我們使用PanelId.ClientID ，最后的javascript代碼將是：

var panNonAfricaDropDown = document.getElementById("<%=PanelId.ClientID%>");
if (dropDownFirst == "Yes" && panNonAfricaDropDown) {
    panNonAfricaDropDown.style.visibility = "visible";
}

Answer 2

ASP.NET修改服務器上運行的元素的名稱。 您將必須找到損壞的名稱，然后對該名稱執行document.getElementById。

或者，您可以使用asp：panel的ClientIDMode屬性來關閉重整（ http://msdn.microsoft.com/zh-cn/library/system.web.ui.control.clientidmode.aspx ）