結合JavaScript與ASP.NET Web表單進行程式開發

ASP.NET為Web程式開發提供了新的範例。其中包括一系列基於伺服器的控制項，這些控制項類似於HTML表單中諸如文字框、按鈕等元素。使用這些控制項的問題是必須調用伺服器。JavaScript為很多任務提供多種選擇的機會，而這些過程不需要調用伺服器。讓我們來看結合JavaScript與ASP.NET所帶來的強大功能。

效能是必需的
調用伺服器要求頻寬和伺服器處理時間，然而對一個可以享受高速流通的區域網路程式將不會有任何問題，但是在廣域網路中就是不同的情況。一個網際網路使用者連線速度的不同主要取決於使用者的撥號數據機、頻寬或者纜線數據機。使用使用者型的JavaScript可以不需要調用伺服器。

傳統方法
一個標準的網頁表單包括像標題框、本文和表單在內的頁面。JavaScript函數按傳統方法被放置在網頁表單的標題框，這些函數允許被頁面的其它部分載入和利用，一旦被載入，這些函數將從HTML元素中調用。

讓我們看看一個簡單的JavaScript的例子：

 1function valSubmit() {
 2    var doc = document.forms[0];
 3    varmsg = "";
 4
 5    if (doc.firstName.value == "") {
 6
 7        msg += "- Please enter a first name.n";
 8    }
 9
10    if (doc.lastName.value == "") {
11        msg += "- Please enter a last name.n";
12    }
13
14    if (msg == "") {
15        doc.submit();
16    } else {
17        alert("The following errors were
18        encountered.nn" + msg);
19    }
20}

這一函數將檢驗資料被傳送到表單中的兩個HIML區。如果其中一個區是空的，將顯示錯誤資訊並且停止運行。如果兩個區都有值時，表單被提交，你可以使用以下的代碼調用這一函數：

1＜input type="button" value="submit" name="btnSubmit" onClick="valSubmit();"＞

利用這一關係，在HIML區沒有資料之前，表單是不會被提交的。這樣我們可以看到，代碼變得更加簡單，但是由於無需調用額外的伺服器而不會產生任何副作用。JavaScript簡短而實用，這就意味著表單不需要額外的載入時間。

將JavaScript和ASP.NET結合在一起
ASP.NET網頁表單允許使用標準的HTML，因此你可以容易地使用前面的範例。ASP.NET使用者控制項允許你很輕鬆地調用伺服器代碼來處理 Web表單。慶幸的是，使用者控制項和JavaScript的結合使用完全是可以的。我將利用一個ASP.NET按鈕控制項的例子來說明這一使用過程。

按鈕控制項的所有屬性提供了將JavaScript串連到控制項的方式。首先，將JavaScript函數放置在ASP.NET網頁表單中，但是通過添加傳回值可以改變放置的方法。如果確認通過，函數值返回為真，與按鈕相關的伺服器函數就會別調用。如果傳回值為假，則表單不會被提交。

 1＜%@ Page language="c#" %＞
 2＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ＞
 3＜html＞＜head＞
 4＜title＞WebForm1＜/title＞
 5＜script language="javascript"＞
 6function valSubmit() {
 7    var doc = document.forms[0];
 8    varmsg = "";
 9    
10    if (doc.firstName.value == "") {
11        msg += "- Please enter a first name.n";
12    }
13    if (doc.lastName.value == "") {
14        msg += "- Please enter a last name.n";
15    }
16    if (msg == "") {
17        doc.submit();
18        return true;
19    } else {
20        alert("The following errors were encountered.nn" + msg);
21        return false;
22    } 
23}
24＜/script＞
25＜script language="C#" runat="server"＞
26private void btnSearch_Click(object sender, System.EventArgs e) {
27    Response.Write("Search");
28}
29private void Page_Load(object sender, System.EventArgs e) {
30    btnSubmit.Attributes.Add("onClick", "return valSubmit();");
31}
32＜/script＞＜/head＞
33＜body＞
34＜form id="frmBuilderTest" method="post" runat="server"＞
35＜label style="Z-INDEX: 101; LEFT: 10px; POSITION: absolute; TOP: 48px"＞First Name:＜/label＞
36＜input style="Z-INDEX: 102; LEFT: 88px; POSITION: absolute; TOP: 48px" type="text" name="firstName" id="firstName"＞
37＜label style="Z-INDEX: 103; LEFT: 10px; POSITION: absolute; TOP: 88px"＞Last Name:＜/label＞
38＜input style="Z-INDEX: 104; LEFT: 88px; POSITION: absolute; TOP: 88px" type="text" name="lastName" id="lastName"＞
39＜br /＞＜br /＞
40＜asp:Button id="btnSubmit" style="Z-INDEX: 105; LEFT: 64px; POSITION: absolute;
41  TOP: 128px" runat="server" Text="Submit" Width="136px" OnClick="btnSearch_Click"＞＜/asp:Button＞
42＜/form＞
43＜/body＞
44＜/html＞

這些代碼中最為關鍵的一行是：

1btnSubmit.Attributes.Add("onClick", "return valSubmit();");

通過風格屬性使用CSS可以將元素放置在HIML表單。表單將JavaScript函數和ASP.NET 按鈕 (btnSubmit)以及HTML的onClick事件串連起來。在表單被提交給伺服器時，ASP.NET Button 中的onClick屬性會通知系統調用哪些函數。

如果你是一名VB.NET開發人員，對於前面代碼，只需要改變代碼中的C#模組。VB.NET相應的代碼如下：

1＜script language="vb" runat="server"＞
2Private btnSearch_Click (sender As Object, e As System.EventArgs)
3      Response.Write("Search")
4End Sub
5Private Page_Load(sender As Object, e As System.EventArgs)
6      btnSubmit.Attributes.Add("onClick", "return valSubmit();")
7End Sub
8＜/script＞

功能強大的JavaScript和ASP.NET結合

JavaScript是面向使用者網頁開發的實用標準語言，它與ASP.NET Web表單的結合，為開發人員提供了一個功能強大的用於構建穩固程式的工具集，而程式的穩固性被認為軟體效能的一個關鍵組成部分。