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(这个页面的类名字));
}
第四步标记要在前台用ajax调用的后台函数如下:
[AjaxPro.AjaxMethod()]加这个标记
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>
注意:引用后台方法的时候得顺序是 项目名称.页名称.方法名称。(不要项目名称也可以反而我要了不行)
代码如下:
页面代码:
<%@ 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>无标题页</title>
<script language="javascript">
function GetValue_CallBack()
{
//var c=_Default.ServerSideAdd(cl);
_Default.ServerSideAdd(cl);//cl为处理返回结果的函数,如果需要给后台传递参数写为 _Default.ServerSideAdd("val",cl);
document.getElementById("TextBox1").value = "正在处理,请等待" ;
document.getElementById("div1").innerHTML = "正在处理,请等待" ;
//alert("两个alert的区别\r\n程序会弹出后继续执行到完");
//alert(c);//这条语句是错的,这时还没有执行完成,所以还没有c变量
}
function cl(result)
{
//alert("两个alert的区别\r\n程序停到这里等确认后,才能执行下面两句");
document.getElementById("TextBox1").value = result.value ;
document.getElementById("div1").innerHTML = result.value ;
//alert(result.value);//此语句可以正常执行。这时后台已经处理完毕
}
</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的区别\r\n程序停到这里等确认后,才能执行下面两句");
document.getElementById("TextBox1").value = result.value ;
document.getElementById("div1").innerHTML = result.value ;
//alert(result.value);//此语句可以正常执行。这时后台已经处理完毕
}
);//cl为处理返回结果的函数
document.getElementById("TextBox1").value = "正在处理,请等待" ;
document.getElementById("div1").innerHTML = "正在处理,请等待" ;
//alert("两个alert的区别\r\n程序会弹出后继续执行到完");
//alert(c);//这条语句是错的,这时还没有执行完成,所以还没有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";
}
}