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

Hiding/Showing an html table with C# and Javascript

本文关键字：显示 html 隐藏 Javascript 使用      更新时间：2023-09-26

我正在使用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"为null。

我认为我可以自己完成这两项任务(用Javascript设置隐藏表可见，但在返回时保持可见(，但我认为我的代码最终会变得更加复杂，尤其是当我刚接触ajax、.net和C#时。所以我在寻求建议-我走对了吗？我用错东西了吗？有别的办法吗？

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

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

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

您可以执行类似的操作

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

并且在后面的代码中

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

在您的.css 中

.yourclass{display:none;}

将runat="server"添加到元素后，必须通过JavaScript:中的ClientID引用它

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

在ASP.NET中，当您使用runat=server时，它会获取您的ID并将其修改为包含程序中的其他信息，我完全忘记了什么，但我认为主页面或命名空间或其他使其唯一的东西。您的getElementByID((需要更改为包括所有其他信息(查看页面上的源代码以获取实际ID(，或者使用JQuery之类的javascript框架，该框架具有用于查找页面上元素的高级选择器。

相关文章：