Code
using System;
using System.Web.UI;
using System.Data;
using System.Data.SqlClient;
// 實作 ICallbackEventHandler 介面,以啟用 ClientCallback 功能
public partial class TextBox_OnBlur : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler
{
protected string strOrderInfo;// txtUserInfo; // 全域變數,用來暫存從資料庫查到、要傳回前端 .aspx 的訂單資料
protected void Page_Load(object sender, EventArgs e)
{
string strScript = string.Empty;
// 將使用者在 tbOrderID 輸入的關鍵字,查詢資料庫後,將查詢結果傳送回前端 JavaScript 的 getCallbackResult() 函數中,做其他的顯示處理
strScript = Page.ClientScript.GetCallbackEventReference(this, tbOrderID.ClientID + ".value", "getCallbackResult", null);
// 設定 TextBox 的 JavaScript 事件 (如:onblur、onkeyup) 被觸發時,會觸發 Callback 的事件處理
//this.tbOrderID.Attributes["onblur"] = strScript;
// 上面這一行,若改成 onkeyup,可達到如 Google 的即時輸入查詢效果,但會造成資料庫查詢過於頻繁,和 IIS Log 增長過快
this.tbOrderID.Attributes["onkeyup"] = strScript;
}
// 觸發 Callback 事件處理。此方法可接收前端 JavaScript OnBlur 事件被觸發時,所傳來的資料。
// 在此方法中,所發生的錯誤訊息 (如:使用者輸入不合理內容、資料庫查詢錯誤),皆無法在前端頁面顯示錯誤訊息,以告知使用者。
public void RaiseCallbackEvent(string eventArgument)
{
if (!string.IsNullOrEmpty(eventArgument)) // 若使用者有輸入,才去資料庫做查詢
{
//string strConnString = System.Configuration.ConfigurationManager.ConnectionStrings["ConnString_SqlClient"].ToString();
//SqlConnection conn = null;
//SqlCommand cmd = null;
//SqlDataReader dr = null;
//string strSql = "SELECT * FROM Orders WHERE OrderID=@OrderID";
//try
//{
// conn = new SqlConnection(strConnString);
// conn.Open();
// if (conn.State == ConnectionState.Open) // 若開啟資料庫連線有成功
// {
// cmd = new SqlCommand(strSql, conn);
// cmd.Parameters.Add("@OrderID", SqlDbType.Int).Value = eventArgument.Trim();
// // 若確定查詢結果只會有一筆時,可用 CommandBehavior.SingleRow 以提升查詢效能
// dr = cmd.ExecuteReader(CommandBehavior.SingleRow);
// if (dr.HasRows)
// {
// if (dr.Read())
// {
// strOrderInfo = "訂單代號:" + dr["OrderID"] + ""r"n";
// strOrderInfo += "客戶代號:" + dr["CustomerID"] + ""r"n";
// strOrderInfo += "訂單日期:" + dr["OrderDate"] + ""r"n";
// strOrderInfo += "運送地址:" + dr["ShipAddress"] + ""r"n";
// strOrderInfo += "Server 上的查詢時間:" + DateTime.Now.ToString("yyyy/MM/dd HH:mm:ss");
// }
// }
// else
// {
// strOrderInfo = "查無資料";
// }
// }
//}
//catch (Exception ex) // 雖然能捕捉到錯誤訊息,但無法在頁面中,顯示任何錯誤資訊
//{
// //myMessage.popupAlert("這是 JavaScript alert 的錯誤訊息"); // 無法在 Callback 的方法中使用 JavaScript 的 alert
// Response.Write(ex.ToString()); // 無法在 Callback 的方法中使用 Response.Write()
// lblErrorMessage.Text = "Callback 發生錯誤!"; // 無法在 Callback 的方法中,在頁面上的 Control 顯示訊息
// strOrderInfo = "Callback 發生錯誤!"; // 這裡指派的回傳值,無法送回前端的 JavaScript 函數,因此也無法在 div 中顯示出來
//}
//finally
//{
// if (dr != null)
// {
// if (dr.IsClosed == false)
// dr.Close();
// dr.Dispose();
// }
// if (cmd != null)
// {
// cmd.Dispose();
// }
// if (conn.State == ConnectionState.Open)
// {
// conn.Close();
// }
// conn.Dispose();
//}
strOrderInfo = "!!!!您未輸入任何資料!請輸入 OrderID";
}
else
{
strOrderInfo = "您未輸入任何資料!請輸入 OrderID";
}
} // end of RaiseCallbackEvent()
// 回傳 Callback 的查詢結果
public string GetCallbackResult()
{
// 將查詢結果傳送回前端 JavaScript 的 getCallbackResult() 函數中,做其他的顯示處理
return strOrderInfo;
}
// 測試 Error 訊息
private void Page_LoadComplete(object sender, EventArgs e)
{
//Response.Write("Page_LoadComplete");
//lblErrorMessage.Text = "Page_LoadComplete!";
//strOrderInfo = "Page_LoadComplete!";
}
} // end of class
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TextBox_OnBlur.aspx.cs" Inherits="TextBox_OnBlur" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>一個 TextBox + JavaScript OnBlur (或 OnKeyup) 觸發資料庫查詢</title>
<script type="text/JavaScript">
function getCallbackResult(strOrderInfo)
{
divResult.innerText = strOrderInfo;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
一個 TextBox,其 OnBlur (或 OnKeyup) 事件被觸發時,會去 Northwind 資料庫的 Orders 資料表查詢:
<p></p>
請輸入 OrderID,例如:10248<br />
<asp:TextBox ID="tbOrderID" runat="server"></asp:TextBox>
<br />
<div id="divResult" style="background-color: Menu; width: auto;"></div>
<br />
<asp:Literal ID="lblErrorMessage" runat="server"></asp:Literal>
</div>
</form>
</body>
</html>