本帖并無(wú)高來(lái)高去的高深技術(shù)，但提供一個(gè)做 ASP.NET 項(xiàng)目時(shí)，很實(shí)用的 Ajax 示例下載。透過(guò) AJAX.NET 的功能，改善舊式 Callback 寫(xiě)法的缺點(diǎn)，讓用戶在一或多個(gè) TextBox 輸入完查找條件、鼠標(biāo)離開(kāi)并觸發(fā) onBlur 事件時(shí)，透過(guò)JavaScript 調(diào)用C#自定義類的函數(shù)，實(shí)現(xiàn)高速訪問(wèn)數(shù)據(jù)庫(kù)、查找對(duì)應(yīng)多個(gè)字段的值。

之前我曾寫(xiě)了一篇「用 ASP.NET Callback 和 JavaScript 高速訪問(wèn)數(shù)據(jù)庫(kù)」，并提供示例下載，內(nèi)容是用 Callback 異步調(diào)用技術(shù) (ASP.NET AJAX 還沒(méi)出現(xiàn)前，微軟提供的過(guò)渡技術(shù))，讓 Client-side (JavaScript) 能和 Server-side (.NET CLR) 直接溝通，讓用戶在 TextBox 失去焦點(diǎn)、觸發(fā) onBlur 事件時(shí)，能透過(guò) C# 自定義類的函數(shù)，以相當(dāng)高的效率訪問(wèn)數(shù)據(jù)庫(kù)并返回值。但該示例有兩個(gè)缺點(diǎn)：

只能透過(guò)固定單一個(gè)內(nèi)附的 RaiseCallbackEvent 函數(shù)，去訪問(wèn)數(shù)據(jù)庫(kù)。當(dāng)頁(yè)面上有多個(gè) TextBox 同時(shí)要實(shí)現(xiàn)相同功能時(shí)，程序撰寫(xiě)上會(huì)很困難。

無(wú)法透過(guò) try-catch-finally block 捕捉錯(cuò)誤信息。當(dāng)發(fā)生錯(cuò)誤時(shí)，也無(wú)法提供相關(guān)信息給用戶或程序員。

因?yàn)樵?ASP.NET 項(xiàng)目中常會(huì)用到此一功能，因此日前我用 AJAX.NET 這套 free library 重寫(xiě)了一個(gè)示例 (相關(guān)的 dll 已內(nèi)附), 下載地址及功能如下：

本帖的示例代碼下載點(diǎn)：

http://files.cnblogs.com/WizardWu/090828.zip

(執(zhí)行本示例，需要 SQL Server 的 Northwind 數(shù)據(jù)庫(kù)，以及 VS 2008 或 IIS)

此示例功能：

如下圖 1，在第一個(gè) TextBox1 輸入 EmployeeID，鼠標(biāo)離開(kāi) TextBox1 失去焦點(diǎn)、觸發(fā) onBlur 事件時(shí)，會(huì)自動(dòng)高速訪問(wèn)數(shù)據(jù)庫(kù)，取得該筆記錄的另外兩個(gè)字段，顯示在下方的兩個(gè) TextBox 中。

如下圖 2，當(dāng)用戶輸入不合理的 EmployeeID 時(shí)，會(huì)提示錯(cuò)誤信息，并清空另外兩個(gè) TextBox 里既有的文字。

當(dāng)用戶輸入不存在于數(shù)據(jù)表 Employees 的 EmployeeID 時(shí)，會(huì)提示錯(cuò)誤信息，并清空另外兩個(gè) TextBox 里既有的文字。

當(dāng)用戶手動(dòng)清空 TextBox1，鼠標(biāo)離開(kāi) TextBox1 失去焦點(diǎn)、觸發(fā) onBlur 事件時(shí)，會(huì)清空另外兩個(gè) TextBox 里既有的文字。 

透過(guò)JavaScript調(diào)用C#函數(shù)圖 1　網(wǎng)站項(xiàng)目中常用到的功能。以本示例的做法，不論網(wǎng)頁(yè)上有多少個(gè) TextBox 需要此功能，都不會(huì)相互干擾

透過(guò)JavaScript調(diào)用C#函數(shù)圖 2　輸入不合理或錯(cuò)誤類型的 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# 自定義類的名稱               
        Ajax.Utility.RegisterTypeForAjax(typeof(MyClass01));              
    }              
}  
        
        

我們看到上方，透過(guò) RegisterTypeForAjax 函數(shù)，可向 AJAX.NET 注冊(cè)我們寫(xiě)的 C# 自定義類 MyClass01。接著 AJAX.NET 會(huì)瀏覽這個(gè)自定義類，里面標(biāo)示有 AjaxMethodAttribute 的函數(shù)，如下方代碼中的 getEmployeeInfo 和 getProductInfo 函數(shù)，我們并在這兩個(gè)函數(shù)里，實(shí)際去訪問(wèn)數(shù)據(jù)庫(kù)并取回需要的一或多個(gè)字段的值。

        
            
App_Code/MyClass01.cs              
public class MyClass01              
{              
    public static string strConnString = WebConfigurationManager.ConnectionStrings["ConnString_SqlClient"].ConnectionString;              
             
    //由 EmployeeID (如: 1, 2 ,3 , ...)，去數(shù)據(jù)庫(kù)取出他的 LastName、Title              
    [Ajax.AjaxMethod()]       //告知 Ajax 封裝類，為此方法創(chuàng)建一個(gè) JavaScript 代理，這樣才能被客戶端調(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ù)，以優(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 封裝類，為此方法創(chuàng)建一個(gè) JavaScript 代理，這樣才能被客戶端調(diào)用              
    public string getProductInfo(string strProductID)              
    {              
        //...中間略...              
    }              
             
} //end of class 
        
        

如下，onBlur 事件被觸發(fā)時(shí)，會(huì)在 JavaScript 里調(diào)用 C# 的同名函數(shù)，并從數(shù)據(jù)庫(kù)里取得返回值。

        
            
js/MyJs01.js              
//由 EmployeeID (如: 1, 2 ,3 , ...)，去數(shù)據(jù)庫(kù)取出他的 LastName、Title              
function getEmployeeInfo(TextBox1, TextBox2, TextBox3) {              
             
    //調(diào)用 App_Code 文件夾里，C# 自定義類的 getEmployeeInfo 函數(shù)              
    var response = MyClass01.getEmployeeInfo(document.getElementById(TextBox1).value);              
             
    //response 為從 C# 自定義類里的函數(shù)所傳回來(lái)的，由一或多個(gè) "§" 字符所組成的一個(gè)字符串              
    if ((response.value == null) || (response.value.length == 0)) {  //若用戶輸入「不合理的字符」或「無(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 處理程序工廠 [9] 來(lái)處理。

        
            
web.config              
< system.web>             
    < httpHandlers>             
        < add verb="POST,GET" path="ajax/*.ashx"             
           type="Ajax.PageHandlerFactory, Ajax" />             
    < /httpHandlers>             
< /system.web> 
        
        

因?yàn)榇艘恍枨笪以?ASP.NET 項(xiàng)目常遇到，因此特地整理成一篇文章。若有網(wǎng)友知道 ASP.NET AJAX 3.5 有更好的做法，亦請(qǐng)留言告知。

到這里，透過(guò)JavaScript調(diào)用C#函數(shù)的相關(guān)內(nèi)容就介紹完了。