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 的建議進行操作。