社区网站功能实现系列(三)：社区页面无刷新回发的一种实现方式

页面无刷新回发实现有很多种方式，可以用XMLHttpRequest，一些js框架的ajax实现(如jQuery的 ajax)，ajaxPro，MS的UpdatePanel，web服务等。下面我来介绍另一种方式：页面回发。

1. ICallbackEventHandler接口
该接口用于指示控件可以作为服务器的回调事件的目标。ICallbackEventHandler 接口的控件为目标时，将把事件变量作为参数传递来调用 RaiseCallbackEvent 方法以处理该事件，并且 GetCallbackResult 方法返回回调的结果。继承这个接口需要实现两个方法： RaiseCallbackEvent, GetCallbackResult .

public void RaiseCallbackEvent(string eventArgument)

{}

这个方法用于处理客户端提交的请求。它接收一个string类型的参数，这个参数由客户端传入。如果你需要传入多个参数，你可以将这些参数组合起来，然后到这个方法里面再分解。

public string GetCallbackResult()

{}

该方法用于返回服务器端处理后的数据。如果你要返回的数据类型不仅仅是string类型，你可以自己构造一个类，返回的时候通过序列化这个类达到返回复杂类型的效果。客户端获取的时候用eval("(string)")来反序列化即可。

2. 方法GetCallbackEventReference()。用于向服务器端发送回调后请求的函数。

public string GetCallbackEventReference(Control control, string argument, string clientCallback, string context, string clientErrorCallback, bool useAsync){}

看参数列表的名字就知道大概什么意思了，不赘述。

先参考代码：

前台页面：

function ReceiveCallback(result)
{
var resultArrays = eval("(" + result + ")");

alert(resultArrays.RepeaterJson);
}

function ChangeGameTab(order)
{
CallServer(order, null);
}

</script>
</head>
<body>
<form id="form1" runat="server">
<div class="">
<div class="">
<h3>网页游戏列表</h3>
<a class="z1 tj00" id="tj00" href="javascript:ChangeGameTab('1');">最新游戏</a>
<a id="tj01" class="" href="javascript:ChangeGameTab('2');">策略战争</a>
<a id="tj02" class="" href="javascript:ChangeGameTab('3');">角色扮演</a>
<a id="tj03" class="" href="javascript:ChangeGameTab('4');">棋牌类</a>
<a id="tj04" class="" href="javascript:ChangeGameTab('5');">战略养成类</a>
</div>
<ul id="t1">
<uc1:GameList runat="server" id="GameList1" CategoryID="1"></uc1:GameList>
</ul>
<ul style="display: none;" id="t2"></ul>
<ul style="display: none;" id="t3"></ul>
<ul style="display: none;" id="t4"></ul>
<ul style="display: none;" id="t5"></ul>
<div></div>
</div>
</form>
</body>
</html>

后台代码：

namespace Game
{
public partial class _Default : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
this.RegistCallbackScript(this.Page);
}

if (Page.IsPostBack && !Page.IsCallback)
{
this.RegistCallbackScript(this.Page);
}
}

#region ICallbackEventHandler 成员

public string GetCallbackResult()
{
Game.Entities.GameRepeaterJson gameJson = new Game.Entities.GameRepeaterJson();
gameJson.RepeaterJson = this.RewriteControl(this.GameList1);
return SNET.Common.DataAccessHelper.JSONHelper.ObjectToString(gameJson);
}

public void RaiseCallbackEvent(string eventArgument)
{
switch (eventArgument)
{
case "1":
this.GameList1.CategoryID = "1";
this.GameList1.RPTBind();
break;
case "2":
this.GameList1.CategoryID = "3";
this.GameList1.RPTBind();
break;
case "3":
this.GameList1.CategoryID = "4";
this.GameList1.RPTBind();
break;
case "4":
this.GameList1.CategoryID = "6";
this.GameList1.RPTBind();
break;
case "5":
this.GameList1.CategoryID = "8";
this.GameList1.RPTBind();
break;
default:
this.GameList1.CategoryID = "1";
this.GameList1.RPTBind();
break;
}
}

#endregion

/// <summary>
/// 注册无刷新回调事件
/// </summary>
/// <param name="page">The page.</param>
protected void RegistCallbackScript(System.Web.UI.Page page)
{
string callbackReference = page.ClientScript.GetCallbackEventReference(this, "arg", "ReceiveCallback", "context",null, false);
string callbackScript = string.Format("function CallServer(arg,context){{ {0} }}", callbackReference);
page.ClientScript.RegisterClientScriptBlock(this.GetType(), "CallServer", callbackScript, true);
}

/// <summary>
/// 获取指定控件重画的内容
/// </summary>
/// <param name="control">The control.</param>
/// <returns></returns>
protected string RewriteControl(Control control)
{
StringWriter stringWriter = new StringWriter(System.Globalization.CultureInfo.InvariantCulture);
HtmlTextWriter htmlTextWriter = new HtmlTextWriter(stringWriter);
control.RenderControl(htmlTextWriter);
htmlTextWriter.Flush();
htmlTextWriter.Close();
return stringWriter.ToString();
}
}
}

Game.Entities.GameRepeaterJson 是我自定义的一个类，为了说明可以返回复杂类型。

这样就实现了客户端向服务器端请求数据，而页面无刷新了。

代码关键是RegistCallbackScript 这个方法，它向页面注册了一个function，同时也说明了它的回调函数是ReceiveCallback，继而你只要在页面上的ReceiveCallback这个方法里写页面处理代码即可。

是不是很简单？:)