这篇文章将通过Repeater的Ajax分页示例,讲解Ajax的另一个框架 XCallback。当然不管你是哪个 Ajax框架的粉丝,这种分页都很实用,你可以使适用与你喜欢的框架, 毕竟大家都喜欢repeater的灵活 快速,但是却没有提供内置分页,现在你只要在页面里添加一条语句就可以实现ajax效果的分页,文章叙 述中还会把XCallback与JQ在Ajax使用上做个比较,如果我说得不好,欢迎JQ的粉丝指正。 大家先看看前 后台页面,以及在线示例,如果觉得的有帮助,那就接着往下看,示例源码什么的都有 。
以下是前台页面 需要编写的js代码只有以下几条语句,getPage包含了调用前和数据从服务器返回的 方法[注:ajax.reg('要传得数据','服务器端方法')], 如果后台页面只有一个可调用的方法,服务器方 法名可省略,事实上你可以在ajax.reg()的上面写多条语句,这些语句将在回调前发生,你同样可以在 return的下面写多条语句,这些语句将在服务器返回数据后执行,这样的函数结构有很多优点,可以使回 调前和回调后的数据状态保持一致,保持上下文的连贯性,可以更好的共享变量,JQ在ajax使用上也是因 简洁而深入人心, 我相信这段XCallback代码和JQ有一比, 甚至更简洁, 没有多余的东西,完全把你的注 意力集中在业务上,而不是具体的技术细节上。
<%@ 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></title>
<script type="text/javascript">
onload = function() {
getPage(0);
}
function getPage(pindex) {
ajax.reg(pindex, "");
return;
$1("page").innerHTML = ajax.x;
}
</script>
<style type="text/css">
.a{ height:20px; line-height:20px; border-bottom:1px solid #d8dfea; clear:both;}
.b{ float:left; width:30px;}
.c{ float:left; width:500px;}
</style>
<link href="page.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="page">
<asp:Repeater ID="Rep" runat="server">
<ItemTemplate>
<div class=a>
<div class=b>
<%# DataBinder.Eval(Container.DataItem,"id")%>
</div>
<div class=c><%# DataBinder.Eval(Container.DataItem,"title") %>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>