使用 C# 和 Javascript 隐藏/显示 html 表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8012209/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hiding/Showing an html table with C# and Javascript
提问by purplecat
I am working on website using ajax and C#. I started learning these languages a couple months ago, so I'm not always sure what the best practice is to accomplish things.
我正在使用 ajax 和 C# 开发网站。几个月前我开始学习这些语言，所以我并不总是确定完成任务的最佳实践是什么。
I have a form in which certain controls need to be hidden or shown depending on the user's action. It starts out showing an "id" field (along with other fields), but if the user doesn't know their id, they click a link which causes the "id" field to become hidden and displays a table that contains additional controls and a "find" button. I am currently using Javascript to handle the click and hide/display the controls:
我有一个表单，其中某些控件需要根据用户的操作隐藏或显示。它开始显示“id”字段（以及其他字段），但如果用户不知道他们的 id，他们会单击一个链接，该链接会导致“id”字段隐藏并显示一个包含附加控件和“查找”按钮。我目前正在使用 Javascript 来处理点击和隐藏/显示控件：
function showSearchTable() {
document.getElementById('IDNumberRow').style.display = 'none';
document.getElementById('DontKnowId').style.display = 'none';
document.getElementById('infoSearchTable').style.display = 'block';
}
When the "find" button is clicked, the application attempts to look up the additional info in the database and tells the user the result. As a result of the server call, the page is re-loaded, which causes the table to become hidden again. Here's my problem: if the phone number cannot be found, I would like to keep the table visible so that the user can correct any mistakes.
单击“查找”按钮时，应用程序会尝试在数据库中查找附加信息并将结果告知用户。作为服务器调用的结果，页面被重新加载，这导致表再次变得隐藏。这是我的问题：如果找不到电话号码，我希望保持表格可见，以便用户可以更正任何错误。
I have tried adding code that makes the table hidden to the code-behind so that the post-back won't cause the table to become invisible:
我曾尝试添加使表隐藏到代码隐藏中的代码，以便回发不会导致表变得不可见：
protected void Page_Load(object sender, EventArgs e)
{
if(!Page.IsPostBack)
{
infoSearchTable.Visible = false;
}
}
However, as the table now contains the attribute runat="server" in order to see it in the c# code, I can't seem to reference it in my javascript code in order to set it visible from the client. I tried this for the javascript:
但是，由于该表现在包含属性 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';
}
and the table's html:
和表格的html：
<table id="infoSearchTable" runat="server">
....table rows/columns containing controls
</table>
but I get an error saying that 'infoSearch' is null.
但我收到一条错误消息，指出“infoSearch”为空。
I think I'd be able to accomplish both tasks (set hidden table visible with Javascript, but keep it visible on post back) myself, but I think that my code would end up being more complicated than necessary, especially as I'm new to ajax, .net and C#. So I'm looking for advice - Am I on the right track? Did I use something the wrong way? Is there another way to do this?
我想我可以自己完成这两项任务（设置隐藏表可以用 Javascript 可见，但在回发时保持可见），但我认为我的代码最终会比必要的复杂，尤其是当我是新手时到 ajax、.net 和 C#。所以我正在寻求建议 - 我在正确的轨道上吗？我是否以错误的方式使用了某些东西？有没有其他方法可以做到这一点？
采纳答案by iandayman
if(!Page.IsPostBack)
{
infoSearchTable.Visible = false;
}
I think this will stop the control being sent back to the client (hence the null reference) - try something like:
我认为这将停止将控件发送回客户端（因此为空引用） - 尝试如下操作：
if(!Page.IsPostBack)
{
infoSearchTable.Attributes.Add("style", "display: none;");
}
回答by John
In ASP.NET when you use runat=serverit takes your ID and modifies it to include other information from your program, I forget exactly what but I think the master page or namespace or something to make it unique. Your getElementByID() need to be changed to include all that other information (view source on a page to get the actual ID) or use a javascript framework like JQuerythat has advanced selectors for finding elements on a page.
在 ASP.NET 中，当您使用runat=server它时，它会获取您的 ID 并修改它以包含您程序中的其他信息，我忘记了究竟是什么，但我认为是母版页或命名空间或使其独一无二的东西。您的 getElementByID() 需要更改以包含所有其他信息（查看页面上的源代码以获取实际 ID）或使用具有高级选择器的 javascript 框架（如JQuery）来查找页面上的元素。
回答by huMpty duMpty
You can do something like that
你可以做这样的事情
<table id="infoSearchTable" runat="server">
....table rows/columns containing controls
</table>
and in the code behind
并在后面的代码中
infoSearchTable.Attributes.Add("class", "yourclass");
in youe .css
在你 .css
.yourclass{display:none;}
回答by James Johnson
Once you add runat="server"to an element, you have to reference it by the ClientIDin JavaScript:
一旦你添加runat="server"到一个元素，你必须ClientID在 JavaScript 中引用它：
var table = document.getElementById("<%=infoSearchTable.ClientID%>");
if (table){
table.style.display = "none";
}
