本文介绍了一个关于Ajax.net和GridView交互的例子，通过前后端配合实现数据的动态加载与更新。重点探讨了回调函数嵌套的问题及解决方案。
在作的过程中碰见了这样的问题，就是回调函数不能嵌套使用，那么解决的办法呢有2种（我个人的所发现的，可能还有其他更好的方法）。
下面就把这个小东东写出来。
一，先把第一个简单的容易看懂的写出来
1
using System;
2using System.Data;
3using System.Configuration;
4using System.Collections;
5using System.Web;
6using System.Web.Security;
7using System.Web.UI;
8using System.Web.UI.WebControls;
9using System.Web.UI.WebControls.WebParts;
10using System.Web.UI.HtmlControls;
11using System.Data.SqlClient;
12
13namespace LoadGridView
14
{
15
public partial class Default6 : System.Web.UI.Page
16
{
17 protected void Page_Load(object sender, EventArgs e)
18 {
19 AjaxPro.Utility.RegisterTypeForAjax(typeof(Default6));
20 AjaxPro.Utility.RegisterTypeForAjax(typeof(tt.Demo));
21
}
22 [AjaxPro.AjaxMethod]
23 public string AddAjaxTable(string name)
24 {
25 System.Threading.Thread.Sleep(1000);
26 string strcon = "server=.;database=AjaxTable;uid=sa;pwd=lanjie";
27 SqlConnection con = new SqlConnection(strcon);
28 con.Open();
29 SqlCommand com = new SqlCommand();
30 com.CommandText = "insert into Ajaxtt values('" + name + "')";
31 com.Connection = con;
32 int result=com.ExecuteNonQuery();
33 con.Close();
34 com.Dispose();
35 return result.ToString();
36 }
37 [AjaxPro.AjaxMethod]
38 public string GetAjaxTable(int a )
39 {
40 System.Threading.Thread.Sleep(1000);
41 string strcon = "server=.;database=AjaxTable;uid=sa;pwd=lanjie";
42 SqlConnection con = new SqlConnection(strcon);
43 con.Open();
44 SqlCommand com = new SqlCommand();
45 com.CommandText = "select * from Ajaxtt";
46 com.Connection = con;
47 SqlDataAdapter dra = new SqlDataAdapter();
48 dra.SelectCommand = com;
49 DataSet ds = new DataSet();
50 dra.Fill(ds, "Ajaxtt");
51 con.Close();
52 com.Dispose();
53 GridView GV = new GridView();
54 GV.DataSource = ds;
55 GV.DataBind();
56 System.Text.StringBuilder strb = new System.Text.StringBuilder();
57 System.IO.StringWriter sw = new System.IO.StringWriter(strb);
58 System.Web.UI.HtmlTextWriter htw = new System.Web.UI.HtmlTextWriter(sw);
59 GV.RenderControl(htw);
60 string s = strb.ToString();
61 return s;
62 }
63 }
64
65
}
66
这是在后台页面的代码，很容易，那么在前台页面的js文件也很简单using System;2
using System.Data;3
using System.Configuration;4
using System.Collections;5
using System.Web;6
using System.Web.Security;7
using System.Web.UI;8
using System.Web.UI.WebControls;9
using System.Web.UI.WebControls.WebParts;10
using System.Web.UI.HtmlControls;11
using System.Data.SqlClient;12
13
namespace LoadGridView14
{15
public partial class Default6 : System.Web.UI.Page16
{17
protected void Page_Load(object sender, EventArgs e)18
{19
AjaxPro.Utility.RegisterTypeForAjax(typeof(Default6));20
AjaxPro.Utility.RegisterTypeForAjax(typeof(tt.Demo));21
}22
[AjaxPro.AjaxMethod]23
public string AddAjaxTable(string name)24
{25
System.Threading.Thread.Sleep(1000);26
string strcon = "server=.;database=AjaxTable;uid=sa;pwd=lanjie";27
SqlConnection con = new SqlConnection(strcon);28
con.Open();29
SqlCommand com = new SqlCommand();30
com.CommandText = "insert into Ajaxtt values('" + name + "')";31
com.Connection = con;32
int result=com.ExecuteNonQuery();33
con.Close();34
com.Dispose();35
return result.ToString();36
}37
[AjaxPro.AjaxMethod]38
public string GetAjaxTable(int a )39
{40
System.Threading.Thread.Sleep(1000);41
string strcon = "server=.;database=AjaxTable;uid=sa;pwd=lanjie";42
SqlConnection con = new SqlConnection(strcon);43
con.Open();44
SqlCommand com = new SqlCommand();45
com.CommandText = "select * from Ajaxtt";46
com.Connection = con;47
SqlDataAdapter dra = new SqlDataAdapter();48
dra.SelectCommand = com;49
DataSet ds = new DataSet();50
dra.Fill(ds, "Ajaxtt");51
con.Close();52
com.Dispose();53
GridView GV = new GridView(); 54
GV.DataSource = ds;55
GV.DataBind();56
System.Text.StringBuilder strb = new System.Text.StringBuilder();57
System.IO.StringWriter sw = new System.IO.StringWriter(strb);58
System.Web.UI.HtmlTextWriter htw = new System.Web.UI.HtmlTextWriter(sw);59
GV.RenderControl(htw);60
string s = strb.ToString();61
return s;62
}63
}64
65
}66
1<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default6.aspx.cs" Inherits="LoadGridView.Default6" %>
2
3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5<html xmlns="http://www.w3.org/1999/xhtml" >
6<head runat="server">
7 <title>邦定GridView</title>
8 <script language=javascript>
9 function AddAjax()
10 {
11 var name=document.getElementById("nametext").value;
12 LoadGridView.Default6.AddAjaxTable(name);
13 LoadGV();
14
15 }
16 function LoadGV()
17 {
18 document.getElementById("Gv").innerHTML= LoadGridView.Default6.GetAjaxTable(1).value;
19 }
20 </script>
21</head>
22<body onload="LoadGV();">
23<div id="loading" style="display:none;" ><img src=9.gif /><div id="ss" ></div></div>
24 <form id="form1" runat="server">
25 <input type="text" id="nametext"/>
26 <input type="button" value="AjaxButton" onclick="AddAjax();" />
27 <div id="Gv">
28
29 </div>
30 </form>
31</body>
32</html>
33
这样就很容易的实现了Ajax和GridView的功能了，但是大家看看是不是和以前我们写的代码有点不一样呢？就是在js里面我们没有用回调的函数，<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default6.aspx.cs" Inherits="LoadGridView.Default6" %>2
3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">4
5
<html xmlns="http://www.w3.org/1999/xhtml" >6
<head runat="server">7
<title>邦定GridView</title>8
<script language=javascript>9
function AddAjax()10
{11
var name=document.getElementById("nametext").value;12
LoadGridView.Default6.AddAjaxTable(name);13
LoadGV(); 14
15
}16
function LoadGV()17
{18
document.getElementById("Gv").innerHTML= LoadGridView.Default6.GetAjaxTable(1).value; 19
}20
</script>21
</head>22
<body onload="LoadGV();">23
<div id="loading" style="display:none;" ><img src=9.gif /><div id="ss" ></div></div>24
<form id="form1" runat="server">25
<input type="text" id="nametext"/>26
<input type="button" value="AjaxButton" onclick="AddAjax();" />27
<div id="Gv">28
29
</div>30
</form>31
</body>32
</html>33
那么如果要使用回调函数会出现什么问题呢？先面就把不太正确的做法写出来，不是说不正确，而是离我们的想要的效果还有一段距离，.cs文件是一样的，唯独js的函数不一样了，我只把js的函数列出来
1 function AddAjax()
2 {
3 var name=document.getElementById("nametext").value;
4 LoadGridView.Default6.AddAjaxTable(name,CallBack);
5
6 }
7 function LoadGV()
8 {
9 LoadData();
10 tt.Demo.GetAjaxTable(1,CallServerBack);
11 }
12 function CallServerBack(res)
13 {
14 closeloading();
15 var cc=document.getElementById("Gv");
16 cc.innerHTML=res.value;
17 }
18 function CallBack(ss)
19 {
20 closeloading();
21 if(ss.value!=0)
22 {
23 LoadGV();
24 }
25 }
大家仔细看，在CalBack回调函数里面我们调用了LoadGv函数，而LoadGV函数确又调用CallServerBack这个回调函数，那么就是回调函数嵌套了， function AddAjax()2
{3
var name=document.getElementById("nametext").value;4
LoadGridView.Default6.AddAjaxTable(name,CallBack); 5
6
}7
function LoadGV()8
{9
LoadData(); 10
tt.Demo.GetAjaxTable(1,CallServerBack); 11
}12
function CallServerBack(res)13
{14
closeloading();15
var cc=document.getElementById("Gv");16
cc.innerHTML=res.value;17
}18
function CallBack(ss)19
{20
closeloading();21
if(ss.value!=0)22
{23
LoadGV(); 24
} 25
}这样的话，虽然运行没问题，但是效果和第一个的就不一样，在插入后，页面不会把新插入的数据即时的显示出来，那么怎么办呢？
就是在CallBack函数里面改写一下程序，把LoadGV()改为window.setTimeout(LoadGV,100);这样一来就实现了相同的效果，同时呢又回到了我们熟悉的回调函数了。
另一种解决方法是把LoadGV所要执行的服务器的回调函数写道另一个.cs文件里面那么上面的js的文件就用改写了，只是要把方法掉对了。
有什么不妥当的地方，还请各位高手指点。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
