本帖并无高来高去的高深技术，但提供一个做 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 里既有的文字。
图 1 网站项目中常用到的功能。以本示例的做法，不论网页上有多少个 TextBox 需要此功能，都不会相互干扰
图 2 输入不合理或错误类型的 EmployeeID，JavaScript 接收到 C# 返回的錯誤信息
关键代码如下：
Default.aspx.cs
{
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 有更好的做法，亦请留言告知。
--------------------------------------------------
相关文章：
[1] AJAX.NET 用户开发指南, 程守华 译, 原出处：博客园
http://dev.yesky.com/msdn/398/2307398.shtml
[2] AJAX .Net Wrapper usage guide (Ajax.dll 下载内附 Word 文件)
http://ajax.schwarz-interactive.de/download/ajax.zip
[3] Ajax.Utility.RegisterTypeForAjax(typeof(Chat))
http://forums.asp.net/p/1178313/1990148.aspx
[4] AJAX.NET 安装配置全指南
http://developer.51cto.com/art/200908/142497.htm
http://developer.51cto.com/art/200601/16545.htm
[5] 在 vs 2005 中使用 ajax.dll
http://maybe723.javaeye.com/blog/87341
[6] 在asp.net 1.1中运用AjaxPro简要步骤
http://www.cnblogs.com/wlb854/archive/2006/10/08/523143.html
[7] ASP.NET ajax.dll ajaxmethod 使用技巧总结
http://and114.blog.hexun.com/34187290_d.html
[8] Ajax 实现无刷新三联动下拉框 - 小山 - 博客园
http://singlepine.cnblogs.com/articles/257954.html
[9] PageHandlerFactory 类 (msdn)
http://msdn.microsoft.com/zh-cn/library/system.web.ui.pagehandlerfactory(VS.80).aspx
--------------------------------------------------
扫一扫
326
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
