使用C＃和Javascript隱藏/顯示html表

Question

我正在使用ajax和C＃在網站上工作。 幾個月前我開始學習這些語言，所以我並不總是確定最佳實踐是什么。

我有一個表單，根據用戶的操作，需要隱藏或顯示某些控件。 它開始顯示“id”字段（以及其他字段），但如果用戶不知道他們的id，他們會點擊一個鏈接，導致“id”字段隱藏並顯示包含其他控件的表格一個“查找”按鈕。 我目前正在使用Javascript來處理點擊並隱藏/顯示控件：

function showSearchTable() {
    document.getElementById('IDNumberRow').style.display = 'none';
    document.getElementById('DontKnowId').style.display = 'none';
    document.getElementById('infoSearchTable').style.display = 'block';
}

單擊“查找”按鈕時，應用程序將嘗試在數據庫中查找其他信息並告知用戶結果。 作為服務器調用的結果，頁面被重新加載，這導致表再次被隱藏。 這是我的問題：如果找不到電話號碼，我想保持表格可見，以便用戶可以糾正任何錯誤。

我已經嘗試添加使表隱藏到代碼隱藏的代碼，以便post-back不會導致表變得不可見：

protected void Page_Load(object sender, EventArgs e)
{
    if(!Page.IsPostBack)
    {
        infoSearchTable.Visible = false;
    }
}

但是，由於表現在包含屬性runat =“server”以便在c＃代碼中看到它，我似乎無法在我的javascript代碼中引用它以便從客戶端設置它。 我試過這個javascript：

function showSearchTable() {
    document.getElementById('IDNumberRow').style.display = 'none';
    document.getElementById('DontKnowId').style.display = 'none';

    var infoSearch = document.getElementById('<%=infoSearchTable.ClientID%>');
    infoSearch.style.display = 'block';
}

和表格的html：

<table id="infoSearchTable" runat="server">
....table rows/columns containing controls
</table>

但我得到一個錯誤，說'infoSearch'為空。

我想我能夠完成這兩項任務（用Javascript設置隱藏表，但在帖子后面保持可見），但我認為我的代碼最終會變得比必要的更復雜，特別是因為我是新手到ajax，.net和C＃。 所以我正在尋求建議 - 我是否走在正確的軌道上？ 我用錯了方法嗎？ 還有另一種方法嗎？

Answer 1

if(!Page.IsPostBack)
{
    infoSearchTable.Visible = false;
}

我認為這將阻止控件被發送回客戶端（因此空引用） - 嘗試類似於：

if(!Page.IsPostBack)
{
    infoSearchTable.Attributes.Add("style", "display: none;");

}

Answer 2

你可以做那樣的事情

<table id="infoSearchTable" runat="server">
....table rows/columns containing controls
</table>

並在后面的代碼中

infoSearchTable.Attributes.Add("class", "yourclass");

在你.css

.yourclass{display:none;}

Answer 3

將runat="server"添加到元素后，必須通過JavaScript中的ClientID引用它：

var table = document.getElementById("<%=infoSearchTable.ClientID%>");
if (table){
    table.style.display = "none";
}

Answer 4

在ASP.NET中，當你使用runat=server它會獲取你的ID並修改它以包含程序中的其他信息，我完全忘記了什么，但我認為主頁或命名空間或其他東西使它獨特。 您的getElementByID（）需要更改為包含所有其他信息（在頁面上查看源以獲取實際ID）或使用像JQuery這樣的javascript框架，它具有用於在頁面上查找元素的高級選擇器。