看看如何透过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# 返回的錯誤信息

关键代码如下：

 
 
 
 
    
  
  
  
  
  1. Default.aspx.cs  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. public partial class _Default : System.Web.UI.Page  
    4. 
  
  
  
  
  4. { 
    5. 
  
  
  
  
  5.     protected void Page_Load(object sender, EventArgs e) 
    6. 
  
  
  
  
  6.     { 
    7. 
  
  
  
  
  7.         //设置 TextBox 的 OnBlur 事件被触发时，所要调用的 JavaScript 函数 
    8. 
  
  
  
  
  8.         this.TextBox1.Attributes["onblur"] = "getEmployeeInfo('TextBox1', 'TextBox2', 'TextBox3');"; 
    9. 
  
  
  
  
  9.         this.TextBox4.Attributes["onblur"] = "getProductInfo('TextBox4', 'TextBox5', 'TextBox6');"; 
    10. 
  
  
  
  
  10. 
  
  
  
  
  11.         //设置在 JavaScript 文件中，所能调用的 C# 自定义类的名称  
    12. 
  
  
  
  
  12.         Ajax.Utility.RegisterTypeForAjax(typeof(MyClass01)); 
    13. 
  
  
  
  
  13.     } 
    14. 
  
  
  
  
  14. } 
    15.

我们看到上方，透过 RegisterTypeForAjax 函数，可向 AJAX.NET 注册我们写的 C# 自定义类 MyClass01。接着 AJAX.NET 会浏览这个自定义类，里面标示有 AjaxMethodAttribute 的函数，如下方代码中的 getEmployeeInfo 和 getProductInfo 函数，我们并在这两个函数里，实际去访问数据库并取回需要的一或多个字段的值。

 
 
 
 
    
  
  
  
  
  1. App_Code/MyClass01.cs 
    2. 
  
  
  
  
  2. public class MyClass01 
    3. 
  
  
  
  
  3. { 
    4. 
  
  
  
  
  4.     public static string strConnString = WebConfigurationManager.ConnectionStrings["ConnString_SqlClient"].ConnectionString; 
    5. 
  
  
  
  
  5. 
  
  
  
  
  6.     //由 EmployeeID (如: 1, 2 ,3 , ...)，去数据库取出他的 LastName、Title 
    7. 
  
  
  
  
  7.     [Ajax.AjaxMethod()]       //告知 Ajax 封装类，为此方法创建一个 JavaScript 代理，这样才能被客户端调用 
    8. 
  
  
  
  
  8.     public string getEmployeeInfo(string strEmployeeID) 
    9. 
  
  
  
  
  9.     { 
    10. 
  
  
  
  
  10.         string strResult = string.Empty; 
    11. 
  
  
  
  
  11.         string strSql = "SELECT LastName, Title FROM EMPLOYEES WHERE EmployeeID = @EmployeeID"; 
    12. 
  
  
  
  
  12. 
  
  
  
  
  13.         using (SqlConnection conn = new SqlConnection(strConnString)) 
    14. 
  
  
  
  
  14.         { 
    15. 
  
  
  
  
  15.             conn.Open(); 
    16. 
  
  
  
  
  16.             if (conn.State == ConnectionState.Open) 
    17. 
  
  
  
  
  17.             { 
    18. 
  
  
  
  
  18.                 using (SqlCommand cmd = new SqlCommand(strSql, conn)) 
    19. 
  
  
  
  
  19.                 { 
    20. 
  
  
  
  
  20.                     cmd.Parameters.Add("@EmployeeID", SqlDbType.Int).Value = strEmployeeID.Trim(); 
    21. 
  
  
  
  
  21. 
  
  
  
  
  22.                     //若确定要捉的记录只有一笔，可加上此 ADO.NET 的「SingleRow」参数，以优化性能、节省系统资源 
    23. 
  
  
  
  
  23.                     using (SqlDataReader dr = cmd.ExecuteReader(CommandBehavior.SingleRow)) 
    24. 
  
  
  
  
  24.                     { 
    25. 
  
  
  
  
  25.                         if (dr.Read()) 
    26. 
  
  
  
  
  26.                         { 
    27. 
  
  
  
  
  27.                             strResult = dr[0].ToString() + "§" + dr[1].ToString(); 
    28. 
  
  
  
  
  28.                         } 
    29. 
  
  
  
  
  29.                     } 
    30. 
  
  
  
  
  30.                 } 
    31. 
  
  
  
  
  31.             } 
    32. 
  
  
  
  
  32.         } 
    33. 
  
  
  
  
  33. 
  
  
  
  
  34.         return strResult;     //strResult = "result1§result2";   //返回值为用 "§" 字符所分割的一或多个字符串 
    35. 
  
  
  
  
  35.     } 
    36. 
  
  
  
  
  36. 
  
  
  
  
  37. 
  
  
  
  
  38.     //由 ProductID (如: 1, 2 ,3 , ...)，去数据库取出他的 ProductName、QuantityPerUnit 
    39. 
  
  
  
  
  39.     [Ajax.AjaxMethod()]       //告知 Ajax 封装类，为此方法创建一个 JavaScript 代理，这样才能被客户端调用 
    40. 
  
  
  
  
  40.     public string getProductInfo(string strProductID) 
    41. 
  
  
  
  
  41.     { 
    42. 
  
  
  
  
  42.         //...中間略... 
    43. 
  
  
  
  
  43.     } 
    44. 
  
  
  
  
  44. 
  
  
  
  
  45. } //end of class
    46.

如下，onBlur 事件被触发时，会在 JavaScript 里调用 C# 的同名函数，并从数据库里取得返回值。

 
 
 
 
    
  
  
  
  
  1. js/MyJs01.js 
    2. 
  
  
  
  
  2. //由 EmployeeID (如: 1, 2 ,3 , ...)，去数据库取出他的 LastName、Title 
    3. 
  
  
  
  
  3. function getEmployeeInfo(TextBox1, TextBox2, TextBox3) { 
    4. 
  
  
  
  
  4. 
  
  
  
  
  5.     //调用 App_Code 文件夹里，C# 自定义类的 getEmployeeInfo 函数 
    6. 
  
  
  
  
  6.     var response = MyClass01.getEmployeeInfo(document.getElementById(TextBox1).value); 
    7. 
  
  
  
  
  7. 
  
  
  
  
  8.     //response 为从 C# 自定义类里的函数所传回来的，由一或多个 "§" 字符所组成的一个字符串 
    9. 
  
  
  
  
  9.     if ((response.value == null) || (response.value.length == 0)) {  //若用户输入「不合理的字符」或「无对应数据的ID号码」 
    10. 
  
  
  
  
  10.         alert('数据库里查无数据 !'); 
    11. 
  
  
  
  
  11.         document.getElementById(TextBox2).value = ""; 
    12. 
  
  
  
  
  12.         document.getElementById(TextBox3).value = ""; 
    13. 
  
  
  
  
  13.     } 
    14. 
  
  
  
  
  14.     else if (response.value.length > 0) {      //若数据库里有查找到对应的数据 
    15. 
  
  
  
  
  15.         var strArrResult = response.value.split("§"); 
    16. 
  
  
  
  
  16.         if (strArrResult[0].length > 0) 
    17. 
  
  
  
  
  17.             document.getElementById(TextBox2).value = strArrResult[0]; 
    18. 
  
  
  
  
  18.         if (strArrResult[1].length > 0) 
    19. 
  
  
  
  
  19.             document.getElementById(TextBox3).value = strArrResult[1]; 
    20. 
  
  
  
  
  20.     } 
    21. 
  
  
  
  
  21. }
    22.

如下，在 web.config 里添加配置，让所有 ajax/*.ashx 的请求，改由 Ajax.PageHandlerFactory 产生的 HTTP Handler 处理，而不再由默认的 System.Web.UI.PageHandlerFactory 处理程序工厂 [9] 来处理。

 
 
 
 
    
  
  
  
  
  1. web.config 
    2. 
  
  
  
  
  2. < system.web>
    3. 
  
  
  
  
  3.     < httpHandlers>
    4. 
  
  
  
  
  4.         < add verb="POST,GET" path="ajax/*.ashx"
    5. 
  
  
  
  
  5.            type="Ajax.PageHandlerFactory, Ajax" />
    6. 
  
  
  
  
  6.     < /httpHandlers>
    7. 
  
  
  
  
  7. < /system.web>
    8.

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

到这里，透过JavaScript调用C#函数的相关内容就介绍完了。

当前标题：看看如何透过JavaScript调用C#函数
当前路径：http://www.shufengxianlan.com/qtweb/news12/440662.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

商城网站知识

同城分类信息

成都主机托管　　 　重庆移动机房托管　　 　Android开发　　 　网站制作　　 　微信小程序开发　　 　广告媒介投放　　 　软文平台　　 　网络营销　　 　绵阳梓潼网站建设　　 　企业网站建设公司　　 　成都移动主机托管　　 　成都服务器租用　　 　成都小程序开发　　 　乐山服务器托管　　 　成都网站建设　　 　广安迈傲建站　　 　成都网站推广　　 　成都网站建设　　 　小程序　　 　雪茄烟