javascript - 使用 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';
}

单击“查找”按钮时，应用程序会尝试在数据库中查找附加信息并将结果告诉用户。作为服务器调用的结果，页面被重新加载，这导致表再次隐藏。这是我的问题:如果找不到电话号码，我想让表格保持可见，以便用户可以更正任何错误。

我已经尝试添加使表隐藏到代码隐藏的代码，以便回发不会导致表变得不可见:

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;");

}