看看如何透過JavaScript調用C#函數

作者：WizardWu 2009-08-31 09:21:38

本文介紹了透過JavaScript調用C#函數，實現高速訪問數據庫、查找對應多個字段的值等相關知識。

本帖并無高來高去的高深技術，但提供一個做 ASP.NET 項目時，很實用的 Ajax 示例下載。透過 AJAX.NET 的功能，改善舊式 Callback 寫法的缺點，讓用戶在一或多個 TextBox 輸入完查找條件、鼠標離開并觸發 onBlur 事件時，透過JavaScript 調用C#自定義類的函數，實現高速訪問數據庫、查找對應多個字段的值。

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

只能透過固定單一個內附的 RaiseCallbackEvent 函數，去訪問數據庫。當頁面上有多個 TextBox 同時要實現相同功能時，程序撰寫上會很困難。

無法透過 try-catch-finally block 捕捉錯誤信息。當發生錯誤時，也無法提供相關信息給用戶或程序員。

因為在 ASP.NET 項目中常會用到此一功能，因此日前我用 AJAX.NET 這套 free library 重寫了一個示例 (相關的 dll 已內附), 下載地址及功能如下：

本帖的示例代碼下載點：

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

(執行本示例，需要 SQL Server 的 Northwind 數據庫，以及 VS 2008 或 IIS)

此示例功能：

如下圖 1，在***個 TextBox1 輸入 EmployeeID，鼠標離開 TextBox1 失去焦點、觸發 onBlur 事件時，會自動高速訪問數據庫，取得該筆記錄的另外兩個字段，顯示在下方的兩個 TextBox 中。

如下圖 2，當用戶輸入不合理的 EmployeeID 時，會提示錯誤信息，并清空另外兩個 TextBox 里既有的文字。

當用戶輸入不存在于數據表 Employees 的 EmployeeID 時，會提示錯誤信息，并清空另外兩個 TextBox 里既有的文字。

當用戶手動清空 TextBox1，鼠標離開 TextBox1 失去焦點、觸發 onBlur 事件時，會清空另外兩個 TextBox 里既有的文字。

透過JavaScript調用C#函數圖 1　網站項目中常用到的功能。以本示例的做法，不論網頁上有多少個 TextBox 需要此功能，都不會相互干擾

透過JavaScript調用C#函數圖 2　輸入不合理或錯誤類型的 EmployeeID，JavaScript 接收到 C# 返回的錯誤信息

關鍵代碼如下：

Default.aspx.cs   
 
public partial class _Default : System.Web.UI.Page   
{  
    protected void Page_Load(object sender, EventArgs e)  
    {  
        //設置 TextBox 的 OnBlur 事件被觸發時，所要調用的 JavaScript 函數  
        this.TextBox1.Attributes["onblur"] = "getEmployeeInfo('TextBox1', 'TextBox2', 'TextBox3');";  
        this.TextBox4.Attributes["onblur"] = "getProductInfo('TextBox4', 'TextBox5', 'TextBox6');";  
 
        //設置在 JavaScript 文件中，所能調用的 C# 自定義類的名稱   
        Ajax.Utility.RegisterTypeForAjax(typeof(MyClass01));  
    }  
}

我們看到上方，透過 RegisterTypeForAjax 函數，可向 AJAX.NET 注冊我們寫的 C# 自定義類 MyClass01。接著 AJAX.NET 會瀏覽這個自定義類，里面標示有 AjaxMethodAttribute 的函數，如下方代碼中的 getEmployeeInfo 和 getProductInfo 函數，我們并在這兩個函數里，實際去訪問數據庫并取回需要的一或多個字段的值。

App_Code/MyClass01.cs  
public class MyClass01  
{  
    public static string strConnString = WebConfigurationManager.ConnectionStrings["ConnString_SqlClient"].ConnectionString;  
 
    //由 EmployeeID (如: 1, 2 ,3 , ...)，去數據庫取出他的 LastName、Title  
    [Ajax.AjaxMethod()]       //告知 Ajax 封裝類，為此方法創建一個 JavaScript 代理，這樣才能被客戶端調用  
    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」參數，以優化性能、節省系統資源  
                    using (SqlDataReader dr = cmd.ExecuteReader(CommandBehavior.SingleRow))  
                    {  
                        if (dr.Read())  
                        {  
                            strResult = dr[0].ToString() + "§" + dr[1].ToString();  
                        }  
                    }  
                }  
            }  
        }  
 
        return strResult;     //strResult = "result1§result2";   //返回值為用 "§" 字符所分割的一或多個字符串  
    }  
 
 
    //由 ProductID (如: 1, 2 ,3 , ...)，去數據庫取出他的 ProductName、QuantityPerUnit  
    [Ajax.AjaxMethod()]       //告知 Ajax 封裝類，為此方法創建一個 JavaScript 代理，這樣才能被客戶端調用  
    public string getProductInfo(string strProductID)  
    {  
        //...中間略...  
    }  
 
} //end of class

如下，onBlur 事件被觸發時，會在 JavaScript 里調用 C# 的同名函數，并從數據庫里取得返回值。

js/MyJs01.js  
//由 EmployeeID (如: 1, 2 ,3 , ...)，去數據庫取出他的 LastName、Title  
function getEmployeeInfo(TextBox1, TextBox2, TextBox3) {  
 
    //調用 App_Code 文件夾里，C# 自定義類的 getEmployeeInfo 函數  
    var response = MyClass01.getEmployeeInfo(document.getElementById(TextBox1).value);  
 
    //response 為從 C# 自定義類里的函數所傳回來的，由一或多個 "§" 字符所組成的一個字符串  
    if ((response.value == null) || (response.value.length == 0)) {  //若用戶輸入「不合理的字符」或「無對應數據的ID號碼」  
        alert('數據庫里查無數據 !');  
        document.getElementById(TextBox2).value = "";  
        document.getElementById(TextBox3).value = "";  
    }  
    else if (response.value.length > 0) {      //若數據庫里有查找到對應的數據  
        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 的請求，改由 Ajax.PageHandlerFactory 產生的 HTTP Handler 處理，而不再由默認的 System.Web.UI.PageHandlerFactory 處理程序工廠 [9] 來處理。

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

因為此一需求我在 ASP.NET 項目常遇到，因此特地整理成一篇文章。若有網友知道 ASP.NET AJAX 3.5 有更好的做法，亦請留言告知。

到這里，透過JavaScript調用C#函數的相關內容就介紹完了。

【編輯推薦】

學習C#消息：循序漸進
解惑答疑：C#委托和事件
學習C#實現HTTP協議：多線程文件傳輸
進一步接觸C#委托與事件
淺析四種C#轉換的區別

責任編輯：book05 來源： cnblogs

JavaScript調用C#函數