一种Ajax效果的简单实现
2009-02-10 09:46
218 查看
这个效果是借助ICallbackEventHandler接口来实现的。简单实现步骤如下：
在我们的behindCode类中添加接口：System.Web.UI.ICallbackEventHandler
后台代码中用到的两个方法如下：
// 觸發 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();
}
}
else
{
strOrderInfo = "您未輸入任何資料！請輸入 OrderID";
}
} // end of RaiseCallbackEvent()
// 回傳 Callback 的查詢結果
public string GetCallbackResult()
{
// 將查詢結果傳送回前端 JavaScript 的 getCallbackResult() 函數中，做其他的顯示處理
return strOrderInfo;
}
在Page_Load()中实现以下方法属性的标识：
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;
}
前台，HTML中，添加javascript代码：
<script type="text/JavaScript">
function getCallbackResult(strOrderInfo)
{
divResult.innerText = strOrderInfo;
}
</script>
完整的html代码：
<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>
在我们的behindCode类中添加接口：System.Web.UI.ICallbackEventHandler
后台代码中用到的两个方法如下：
// 觸發 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();
}
}
else
{
strOrderInfo = "您未輸入任何資料！請輸入 OrderID";
}
} // end of RaiseCallbackEvent()
// 回傳 Callback 的查詢結果
public string GetCallbackResult()
{
// 將查詢結果傳送回前端 JavaScript 的 getCallbackResult() 函數中，做其他的顯示處理
return strOrderInfo;
}
在Page_Load()中实现以下方法属性的标识：
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;
}
前台，HTML中，添加javascript代码：
<script type="text/JavaScript">
function getCallbackResult(strOrderInfo)
{
divResult.innerText = strOrderInfo;
}
</script>
完整的html代码：
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ASP.NET2.0中Tabs的简单实现 不用Asp.net Ajax ControlToolKit中的Tabs控件实现Tabs效果的简单实现方法：
- 第107天：Ajax 实现简单的登录效果
- 简单示例AJAX结合PHP代码实现登录效果代码
- 简单实现ajax三级联动效果
- 一种简单的方法在程序中实现透明效果(JAVA)(源代码)
- ajax的一种简单实现
- 一种简单的方法在程序中实现透明效果(JAVA)
- AJAX分页效果简单实现
- Struts2+Spring 整合成功测试案例----利用Dojo实现简单的Ajax的效果（一） .
- Struts2+Spring 整合成功测试案例----利用Dojo实现简单的Ajax的效果
- jQuery实现的AJAX简单弹出层效果代码
- 一种UCB1算法的简单实现及效果对比
- 简单示例AJAX结合PHP代码实现登录效果代码-2
- jquery+ajax实现省市区三级联动效果简单示例
- 简单示例AJAX结合PHP代码实现登录效果代码
- jquery的ajax效果最简单实现 及innerhtml()和innertext()的区别
- 用JS类实现简单Ajax效果
- jQuery实现的AJAX简单弹出层效果代码
- Ajax实现简单下拉选项效果【推荐】
- javascript 实现简单 ajax 效果（不支持跨域）