ASP.NET使用Ajax主要分為5個步驟(粗略描述一下):
第一步 引用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的頁面中注冊,在load事件中注冊 如下:
private void Page_Load(object sender, System.EventArgs e)
{
// 在此處放置用戶代碼以初始化頁面
Ajax.Utility.RegisterTypeForAjax(typeof(這個頁面的類名字));
}
第四步標(biāo)記要在前臺用ajax調(diào)用的后臺函數(shù)如下:
[AjaxPro.AjaxMethod()]加這個標(biāo)記
public string ServerSideAdd()
{
//this.TextBox1.Text = "Hello Server";
return "Hello Server";
}
第五步 前臺調(diào)用后臺函數(shù) 如下:
<script language="javascript">
function GetValue_CallBack()
{
var c = Test_Ajax.WebForm1.ServerSideAdd();
document.getElementById("TextBox1").value = c.value ;
}
</script>
注意:引用后臺方法的時候得順序是 項(xiàng)目名稱.頁名稱.方法名稱。(不要項(xiàng)目名稱也可以反而我要了不行)
代碼如下:
頁面代碼:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml" >
<head runat="server">
<title>無標(biāo)題頁</title>
<script language="javascript">
function GetValue_CallBack()
{
//var c=_Default.ServerSideAdd(cl);
_Default.ServerSideAdd(cl);//cl為處理返回結(jié)果的函數(shù),如果需要給后臺傳遞參數(shù)寫為 _Default.ServerSideAdd("val",cl);
document.getElementById("TextBox1").value = "正在處理,請等待" ;
document.getElementById("div1").innerHTML = "正在處理,請等待" ;
//alert("兩個alert的區(qū)別\r\n程序會彈出后繼續(xù)執(zhí)行到完");
//alert(c);//這條語句是錯的,這時還沒有執(zhí)行完成,所以還沒有c變量
}
function cl(result)
{
//alert("兩個alert的區(qū)別\r\n程序停到這里等確認(rèn)后,才能執(zhí)行下面兩句");
document.getElementById("TextBox1").value = result.value ;
document.getElementById("div1").innerHTML = result.value ;
//alert(result.value);//此語句可以正常執(zhí)行。這時后臺已經(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>
用戶名: <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也可以寫成這樣的格式
***************************************
<script language="javascript">
function GetValue_CallBack()
{
//var c=_Default.ServerSideAdd(cl);
_Default.ServerSideAdd(
function cl(result)
{
//alert("兩個alert的區(qū)別\r\n程序停到這里等確認(rèn)后,才能執(zhí)行下面兩句");
document.getElementById("TextBox1").value = result.value ;
document.getElementById("div1").innerHTML = result.value ;
//alert(result.value);//此語句可以正常執(zhí)行。這時后臺已經(jīng)處理完畢
}
);//cl為處理返回結(jié)果的函數(shù)
document.getElementById("TextBox1").value = "正在處理,請等待" ;
document.getElementById("div1").innerHTML = "正在處理,請等待" ;
//alert("兩個alert的區(qū)別\r\n程序會彈出后繼續(xù)執(zhí)行到完");
//alert(c);//這條語句是錯的,這時還沒有執(zhí)行完成,所以還沒有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";
}
}