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

Posted 2023-03-05

【中文标题】使用 C# 和 Javascript 隐藏/显示 html 表格

【英文标题】：Hiding/Showing an html table with C# and Javascript

【发布时间】：2011-12-22 04:04:34

【问题描述】：

我正在使用 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# 的新手。所以我在寻求建议——我在正确的轨道上吗？我是否以错误的方式使用了某些东西？有没有其他方法可以做到这一点？

【参考方案1】：

你可以这样做

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

在后面的代码中

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

在你.css

.yourclassdisplay:none;

【参考方案2】：

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

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

【讨论】：

我在使用 runat="server" 时确实这样做了（尽管我在 javascript 中将显示设置为“阻止”，而不是“无”），但“表”仍然为空。

【参考方案3】：

if(!Page.IsPostBack)

    infoSearchTable.Visible = false;

我认为这将停止将控件发送回客户端（因此为空引用） - 尝试类似：

if(!Page.IsPostBack)

    infoSearchTable.Attributes.Add("style", "display: none;");

【讨论】：

这似乎是我的问题。 <%=infoSearchTable.ClientID%> 在 javascript 中不再为空。我仍然有回发导致信息表隐藏的问题。但我想我可以自己解决这个问题，因为我可以从 C# 和 javascript 访问 table 元素。

感谢您的回答。它引导我朝着正确的方向前进，现在我可以像我想要的那样隐藏/显示表格了。

【参考方案4】：

在 ASP.NET 中，当您使用 runat=server 时，它会获取您的 ID 并对其进行修改以包含您程序中的其他信息，我忘记了具体是什么，但我认为是母版页或命名空间或使其独一无二的东西。需要更改您的 getElementByID() 以包含所有其他信息（查看页面上的源代码以获取实际 ID）或使用像 JQuery 这样的 JavaScript 框架，该框架具有用于在页面上查找元素的高级选择器。