ASP.NET 使用 javascript 获取控件列表中每个控件的 Id

Question

在 ASP.NET/C# 应用程序中，我在后面的代码中声明并添加了一个控件（例如文本框）列表（或数组）。

List<TextBox> LstOfBoxes = new List<TextBox>();

我想使用 Javascript 来更改列表（或数组）中所有控件的可见性。

我知道如果我想改变 1 个文本框的可见性，我会使用这个：

document.getElementById("<%=TextBox1.ClientID %>").style.display = 'none';

但是如何遍历所有列表（或数组），获取每个控件的 id 并将显示更改为“无”

非常感谢。

Answer 1

通过document.getElementsByTagName()或document.getElementsByClassName()方法获取list 。 另一种方法是将所有输入文本字段 (TextBox) 包装到一个<div>并将 style 属性设置为该<div> 。

Answer 2

请记住，列表本身不会在页面上创建 HTML 元素。 如果您有一个 List 并且在您后面的代码中循环遍历该列表以将项目放在页面上，那么您将没有任何明确的方法来定位这些文本框。 我会将它们包裹在一个容器中，如下所示：

List<TextBox> listOfTb = MethodToFillYourList();
var panel = new Panel { CssClass = "tbHolder" };
foreach (var textbox in listOfTb)
{
     panel.Controls.Add(textbox);
}
YourControlToAddTextBoxesTo.Controls.Add(panel);

现在在客户端，点击“tbHolder”div （面板控件 = .NET 中的 div 标签）并隐藏其中的每个文本框。 这是该隐藏例程的 jQuery 和普通 JS 版本。

// New JQuery hotness
$(".tbHolder input[type=text]").hide();

// Old and Busted JS
var tbs = document.getElementsByClassName("tbHolder").getElementsByTagName("input");
for (var i = 0; i < tbs.length; i++) {
     tbs[i].style.display = 'none';
}

Answer 3

您应该将每个控件存储在 div 中的中继器中。 当您将使用 jQuery 选择器（如父和子）时，它将对您有所帮助。 对不起我的英语不好 ：）

Answer 4

假设您已经以某种方式将控件添加到页面中，您可以简单地循环并为每个函数发出一行：

<script language="javascript" type="text/javascript">
function setVisibility(displayType) {
    var type = displayType || 'none';

    <% foreach (var textBox in LstOfBoxes) { %>
    document.getElementById("<%=textBox.ClientID %>").style.display = displayType;
    <% } %>
}
</script>

由于您没有提到您正在使用 jQuery，因此我不会在此处列出，但您确实应该考虑按照Graham 的建议进行操作。