使用C#和Javascript隐藏/显示html表

我正在使用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';
}

函数showSearchTable（）{
document.getElementById（'IDNumberRow'）。style.display='none'；
document.getElementById（'DontKnowId'）。style.display='none'；
var infoSearch=document.getElementById（“”）；
infoSearch.style.display='block'；
}

以及表格的html：

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

..包含控件的表行/列

但是我得到一个错误，说“infoSearch”是空的

---

我想我自己可以完成这两项任务（使用Javascript设置隐藏表，但在回发时保持其可见），但我认为我的代码最终会变得比必要的更复杂，特别是因为我不熟悉ajax、.net和C。所以我在寻求建议——我走对了吗？我用错了什么东西了吗？还有别的方法吗？

你可以这样做

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

在youe

.css

.yourclass{display:none;}

将

runat=“server”

添加到元素后，必须通过JavaScript中的

ClientID

引用该元素：

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

var table=document.getElementById（“”）；
如果（表）{
table.style.display=“无”；
}

我认为这将停止将控件发送回客户端（因此为空引用）-请尝试以下操作：

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

}

---

在ASP.NET中，当您使用

runat=server

时，它会获取您的ID并对其进行修改以包含程序中的其他信息，我完全忘记了是什么，但我认为母版页或命名空间或使其唯一的东西。您的getElementByID（）需要更改以包含所有其他信息（查看页面上的源代码以获取实际ID），或者使用javascript框架，例如使用高级选择器查找页面上的元素。

我在使用

runat=“server”

（尽管我将显示设置为“block”，而不是javascript中的“none”），但“table”仍然是空的。这似乎是我的问题。

在javascript中不再是空的。我仍然存在回发导致信息表隐藏的问题。但我想我可以自己解决这个问题，现在我可以从C#和javascript访问table元素了。感谢这个答案。这让我找到了正确的di现在我可以像我想的那样隐藏/显示表格了。

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

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

}