如下圖 1，在第一個(gè) TextBox1 輸入 EmployeeID，鼠標(biāo)離開(kāi) TextBox1 失去焦點(diǎn)、觸發(fā) onBlur 事件時(shí)，會(huì)自動(dòng)高速訪(fǎng)問(wèn)數(shù)據(jù)庫(kù)，取得該筆記錄的另外兩個(gè)字段，顯示在下方的兩個(gè) TextBox 中。
如下圖 2，當(dāng)用戶(hù)輸入不合理的 EmployeeID 時(shí)，會(huì)提示錯(cuò)誤信息，并清空另外兩個(gè) TextBox 里既有的文字。
當(dāng)用戶(hù)輸入不存在于數(shù)據(jù)表 Employees 的 EmployeeID 時(shí)，會(huì)提示錯(cuò)誤信息，并清空另外兩個(gè) TextBox 里既有的文字。
當(dāng)用戶(hù)手動(dòng)清空 TextBox1，鼠標(biāo)離開(kāi) TextBox1 失去焦點(diǎn)、觸發(fā) onBlur 事件時(shí)，會(huì)清空另外兩個(gè) TextBox 里既有的文字。
 
圖 1 網(wǎng)站項(xiàng)目中常用到的功能。以本示例的做法，不論網(wǎng)頁(yè)上有多少個(gè) TextBox 需要此功能，都不會(huì)相互干擾
圖 2 輸入不合理或錯(cuò)誤類(lèi)型的 EmployeeID，JavaScript 接收到 C# 返回的錯(cuò)誤信息
關(guān)鍵代碼如下：
Default.aspx.cs
- public partial class _Default : System.Web.UI.Page
- {
- protected void Page_Load(object sender, EventArgs e)
- {
- //設(shè)置 TextBox 的 OnBlur 事件被觸發(fā)時(shí)，所要調(diào)用的 JavaScript 函數(shù)
- this.TextBox1.Attributes["onblur"] = "getEmployeeInfo('TextBox1', 'TextBox2', 'TextBox3');";
- this.TextBox4.Attributes["onblur"] = "getProductInfo('TextBox4', 'TextBox5', 'TextBox6');";
- //設(shè)置在 JavaScript 文件中，所能調(diào)用的 C# 自定義類(lèi)的名稱(chēng)
- Ajax.Utility.RegisterTypeForAjax(typeof(MyClass01));
- }
- }
復(fù)制代碼
我們看到上方，透過(guò) RegisterTypeForAjax 函數(shù)，可向 AJAX.NET 注冊(cè)我們寫(xiě)的 C# 自定義類(lèi) MyClass01。接著 AJAX.NET 會(huì)瀏覽這個(gè)自定義類(lèi)，里面標(biāo)示有 AjaxMethodAttribute 的函數(shù)，如下方代碼中的 getEmployeeInfo 和 getProductInfo 函數(shù)，我們并在這兩個(gè)函數(shù)里，實(shí)際去訪(fǎng)問(wèn)數(shù)據(jù)庫(kù)并取回需要的一或多個(gè)字段的值。
- public class MyClass01
- {
- public static string strConnString = WebConfigurationManager.ConnectionStrings["ConnString_SqlClient"].ConnectionString;
- //由 EmployeeID (如: 1, 2 ,3 , ...)，去數(shù)據(jù)庫(kù)取出他的 LastName、Title
- [Ajax.AjaxMethod()] //告知 Ajax 封裝類(lèi)，為此方法創(chuàng)建一個(gè) JavaScript 代理，這樣才能被客戶(hù)端調(diào)用
- public string getEmployeeInfo(string strEmployeeID)
- {
- string strResult = string.Empty;
- string strSql = "SELECT LastName, Title FROM EMPLOYEES WHERE EmployeeID = @EmployeeID";
- using (SqlConnection conn = new SqlConnection(strConnString))
- {
- conn.Open();
- if (conn.State == ConnectionState.Open)
- {
- using (SqlCommand cmd = new SqlCommand(strSql, conn))
- {
- cmd.Parameters.Add("@EmployeeID", SqlDbType.Int).Value = strEmployeeID.Trim();
- //若確定要捉的記錄只有一筆，可加上此 ADO.NET 的「SingleRow」參數(shù)，以?xún)?yōu)化性能、節(jié)省系統(tǒng)資源
- using (SqlDataReader dr = cmd.ExecuteReader(CommandBehavior.SingleRow))
- {
- if (dr.Read())
- {
- strResult = dr[0].ToString() + "§" + dr[1].ToString();
- }
- }
- }
- }
- }
- return strResult; //strResult = "result1§result2"; //返回值為用 "§" 字符所分割的一或多個(gè)字符串
- }
- //由 ProductID (如: 1, 2 ,3 , ...)，去數(shù)據(jù)庫(kù)取出他的 ProductName、QuantityPerUnit
- [Ajax.AjaxMethod()] //告知 Ajax 封裝類(lèi)，為此方法創(chuàng)建一個(gè) JavaScript 代理，這樣才能被客戶(hù)端調(diào)用
- public string getProductInfo(string strProductID)
- {
- //...中間略...
- }
- } //end of class
復(fù)制代碼
如下，onBlur 事件被觸發(fā)時(shí)，會(huì)在 JavaScript 里調(diào)用 C# 的同名函數(shù)，并從數(shù)據(jù)庫(kù)里取得返回值。
- //由 EmployeeID (如: 1, 2 ,3 , ...)，去數(shù)據(jù)庫(kù)取出他的 LastName、Title
- function getEmployeeInfo(TextBox1, TextBox2, TextBox3) {
- //調(diào)用 App_Code 文件夾里，C# 自定義類(lèi)的 getEmployeeInfo 函數(shù)
- var response = MyClass01.getEmployeeInfo(document.getElementById(TextBox1).value);
- //response 為從 C# 自定義類(lèi)里的函數(shù)所傳回來(lái)的，由一或多個(gè) "§" 字符所組成的一個(gè)字符串
- if ((response.value == null) || (response.value.length == 0)) { //若用戶(hù)輸入「不合理的字符」或「無(wú)對(duì)應(yīng)數(shù)據(jù)的ID號(hào)碼」
- alert('數(shù)據(jù)庫(kù)里查無(wú)數(shù)據(jù) !');
- document.getElementById(TextBox2).value = "";
- document.getElementById(TextBox3).value = "";
- }
- else if (response.value.length > 0) { //若數(shù)據(jù)庫(kù)里有查找到對(duì)應(yīng)的數(shù)據(jù)
- var strArrResult = response.value.split("§");
- if (strArrResult[0].length > 0)
- document.getElementById(TextBox2).value = strArrResult[0];
- if (strArrResult[1].length > 0)
- document.getElementById(TextBox3).value = strArrResult[1];
- }
- }
- 如下，在 web.config 里添加配置，讓所有 ajax/*.ashx 的請(qǐng)求，改由 Ajax.PageHandlerFactory 產(chǎn)生的 HTTP Handler 處理，而不再由默認(rèn)的 System.Web.UI.PageHandlerFactory 處理程序工廠(chǎng) [9] 來(lái)處理。
- web.config
- <system.web>
- <httpHandlers>
- <add verb="POST,GET" path="ajax/*.ashx"
- type="Ajax.PageHandlerFactory, Ajax" />
- </httpHandlers>
- </system.web>
復(fù)制代碼
源碼下載：  090828.zip (30.03 KB) |
