ASP.NET使用Ajax主要分為5個(gè)步驟(粗略描述一下):
第一步 引用Ajax.dll 或AjaxPro.dll
第二步 在Web.Config的<system.web>和</system.web>中添加
<httpHandlers>
<!-- Register the ajax handler -->
<add verb="POST,GET" path="ajax/*.ashx"
type="Ajax.PageHandlerFactory, Ajax" />
</httpHandlers>
第三步 在腰使用ajax的頁(yè)面中注冊,在load事件中注冊 如下:
private void Page_Load(object sender, System.EventArgs e)
{
// 在此處放置用戶(hù)代碼以初始化頁(yè)面
Ajax.Utility.RegisterTypeForAjax(typeof(這個(gè)頁(yè)面的類(lèi)名字));
}
第四步標記要在前臺用ajax調用的后臺函數如下:
[AjaxPro.AjaxMethod()]加這個(gè)標記
public string ServerSideAdd()
{
//this.TextBox1.Text = "Hello Server";
return "Hello Server";
}
第五步 前臺調用后臺函數 如下:
<script language="javascript">
function GetValue_CallBack()
{
var c = Test_Ajax.WebForm1.ServerSideAdd();
document.getElementById("TextBox1").value = c.value ;
}
</script>
注意:引用后臺方法的時(shí)候得順序是 項目名稱(chēng).頁(yè)名稱(chēng).方法名稱(chēng)。(不要項目名稱(chēng)也可以反而我要了不行)
代碼如下:
頁(yè)面代碼:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>無(wú)標題頁(yè)</title>
<script language="javascript">
function GetValue_CallBack()
{
//var c=_Default.ServerSideAdd(cl);
_Default.ServerSideAdd(cl);//cl為處理返回結果的函數,如果需要給后臺傳遞參數寫(xiě)為 _Default.ServerSideAdd("val",cl);
document.getElementById("TextBox1").value = "正在處理,請等待" ;
document.getElementById("div1").innerHTML = "正在處理,請等待" ;
//alert("兩個(gè)alert的區別\r\n程序會(huì )彈出后繼續執行到完");
//alert(c);//這條語(yǔ)句是錯的,這時(shí)還沒(méi)有執行完成,所以還沒(méi)有c變量
}
function cl(result)
{
//alert("兩個(gè)alert的區別\r\n程序停到這里等確認后,才能執行下面兩句");
document.getElementById("TextBox1").value = result.value ;
document.getElementById("div1").innerHTML = result.value ;
//alert(result.value);//此語(yǔ)句可以正常執行。這時(shí)后臺已經(jīng)處理完畢
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" onChange="GetValue_CallBack()"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" /></div>
用戶(hù)名: <input type="text" name="u_name" id="u_name" onChange="GetValue_CallBack();" />
<div id="div1">base</div><div id="count1">1</div>
</form>
</body>
</html>
上面的javascript也可以寫(xiě)成這樣的格式
***************************************
<script language="javascript">
function GetValue_CallBack()
{
//var c=_Default.ServerSideAdd(cl);
_Default.ServerSideAdd(
function cl(result)
{
//alert("兩個(gè)alert的區別\r\n程序停到這里等確認后,才能執行下面兩句");
document.getElementById("TextBox1").value = result.value ;
document.getElementById("div1").innerHTML = result.value ;
//alert(result.value);//此語(yǔ)句可以正常執行。這時(shí)后臺已經(jīng)處理完畢
}
);//cl為處理返回結果的函數
document.getElementById("TextBox1").value = "正在處理,請等待" ;
document.getElementById("div1").innerHTML = "正在處理,請等待" ;
//alert("兩個(gè)alert的區別\r\n程序會(huì )彈出后繼續執行到完");
//alert(c);//這條語(yǔ)句是錯的,這時(shí)還沒(méi)有執行完成,所以還沒(méi)有c變量
}
</script>
***************************************
后臺代碼:
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Ajax.Utility.RegisterTypeForAjax(typeof(_Default));
}
[Ajax.AjaxMethod()]
public string ServerSideAdd()
{
//this.TextBox1.Text = "Hello Server";
return "<a href='#'>aa</a><br>this is ok";
}
}