使用Masterpage在ASP.Net頁面上進行JavaScript驗證的最佳方法是什么？

Question

我正在母版頁內的ASP.Net頁上實現Javascript驗證。 控件ID正在更改，因此我無法使用原始控件ID進行驗證。 我在網上查看了有關動態創建腳本的建議，並使用RegisterStartupScript將其添加到頁面中。 我不喜歡這種解決方案，因為它無法維護。

我可以在此頁面上執行javascript驗證並安排客戶端ID的方式有哪些？

另一個解決方案只是要求我繼續使用瀏覽器中顯示的最終clientID。 這是可行的，我希望它在運行時創建腳本。 你怎么看？

Answer 1

IMO，復制最終出現在瀏覽器中的ClientID值很難等待。 如果您在代碼中更改了控件ID，卻忘記了在JavaScript中進行更改，則直到驗證神秘地停止工作時，您才會注意到。 通過動態構建它，您至少將獲得編譯時錯誤的好處。

當我需要使用javascript訪問控件的客戶端ID時，將腳本塊放在頁面頂部：

<script>
    var SomeControl = <%= Control1.ClientID %>;
    var AnotherControl = <%= Control2.ClientID %>;
    // etc, etc.
</script>

不幸的是，它仍然感覺很丑陋。 將來的ASP.NET版本可能會解決此問題。

Answer 2

最佳解決方案取決於您的實際情況。 使用Asp.Net表單進行驗證的最簡單，最可維護的方法是使用內置的驗證控件。 它們采用您要驗證的控件的ID，然后在該控件上同時提供客戶端（javascript）和服務器端驗證。 他們為您處理自動接線和JavaScript創建。

如果由於某些原因這些方法不起作用，並且您想用javascript編寫自己的驗證函數，那么您將需要使用類似於上述Brant解決方案的方法。 正如布蘭特所說，使用

<%= Control1.ClientID%>

您的javascript中的優於從瀏覽器源復制最終呈現的控件ID，因為控件的最終ID會根據多種因素而變化，包括控件的ID和可能嵌套在其下的任何父控件的ID（用戶控件，網格，中繼器等）。 .ClientID將針對每種情況輸出控件的最終呈現ID。 這項技術看似很臟，但實際上是一種非常干凈的方法，用於處理框架中內置的ID重寫以防止命名沖突。 這是許多網站上使用的標准技術。

Answer 3

通過內聯代碼（例如<％％>標記）引用ClientID是完全可以接受的。 但是，給出的示例將無法真正起作用。 您需要訪問DOM ...

<script language="javascript" type="text/javascript">
  var control = document.getElementById('<%= control.ClientID %>');
</script>

Answer 4

另一種方法（不是性能較高的方法）是使用JQuery。

在要查找的每個控件中放置一個自定義CSS類。 如果是文本框，則可能如下所示：

< asp:TextBox id="NameTextBox" runat="server" cssClass="NameTextBox" >

這應該在瀏覽器中這樣顯示：

< input id="something_NameTextBox" type="text" class="NameTextBox" >

然后，使用JQuery，您可以找到如下所示的控件：

$(".NameTextBox")

您可以使用以下命令獲取文本框的值： $(".NameTextBox").val()

這不是很有效，通過控件的ID查找控件的速度更快，但是如果頁面不太大，則可以正常工作。

Answer 5

js代碼有兩件事需要滿足：1.在方便的JS編輯器中編輯JS代碼。 （例如，VS）2.確保多個控件實例共存。

有一種通用的方法可以提供這兩件事：分開

• 獨立於客戶端ID的通用代碼
• 取決於具體ID的代碼。

如果計划很少更改，則通用代碼可以存儲為.js文件或Web資源。 依賴ID的代碼可以按照Brant的答案進行排列，例如

   <script>
       var <%=c1.ClientID %> = new SomeJsClass(<%=c1.ClientID %>);
       var <%=c2.ClientID %> = document.getElementById('<%=c1.ClientID %>');
   </script>

處理這些變量的代碼可能位於單獨的.js文件中。

Answer 6

這是我使用的2種方法：

在主人：

Page.ClientScript.RegisterClientScriptInclude("somescript", ResolveUrl("some.js"));

以編程方式：

HtmlGenericControl JScript1 = new HtmlGenericControl("script");
JScript1.Attributes.Add("type", "text/javascript");
JScript1.Attributes.Add("src", ResolveUrl("some.js"));
this.Page.Header.Controls.Add(JScript1);