asp.net+Jquery+UserControl实现无刷新分页系列（一）----直接生成静态页
在你阅读这篇文章，你首先看看这里 ：
技巧：使用User Control做HTML生成 感谢老大的无私奉献.
下载源代码下载源代码
下面我来演示下我在项目中对它的应用: 新建一个分页控件(这里直接用下以前的项目中用到的):
=====Mypager.ascx=====
====页码控件==========
==需要提供的参数：=======
==总记录：TotalCount=====
==页大小:PageSize=======
==当前页:PageIndex====== <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MyPager.ascx.cs" Inherits="Car.Web.UserControl.MyPager" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MyPager.ascx.cs" Inherits="Car.Web.UserControl.MyPager" %>
<div class="pageClass">
<span>
共<b><%=this.TotalCount %>条记录,<%=this.TotalCount/this.PageSize+(this.TotalCount %this.PageSize ==0?0:1)%></b>页,当前第
<b>
<%=this.PageIndex %></b>页
</span>
<ul>
<%
int PageCount = ((this.TotalCount / this.PageSize) + (this.TotalCount % this.PageSize == 0 ? 0 : 1));
if ((this.PageIndex - 1) / 10 > 0)
{
PageIndexPre = Convert.ToInt32((this.PageIndex - 1) / 10) * 10;
%>
<li><a href="#" id="a1" cssclass="pagebtn" onclick="return changePages(<%=this.PageIndex-10%>)">
<<</a></li>
<%
}
else
{
%>
<li><a class="pagebtn" disabled="true"><<</a></li>
<%}%>
<li>
<%if (this.PageIndex <= 1)
{ %>
<a class="pagebtn" disabled="true"><</a>
<%}
else
{ %>
<a href="#" id="aPagePre" cssclass="pagebtn" onclick="return changePages(<%=this.PageIndex-1%>)">
<</a>
<%} %>
</li>
<%for (int j = PageIndexPre; j < (this.PageIndexPre+10 -PageCount >0 ? PageCount : PageIndexPre+10); j++)
{
%>
<li>
<%if (j == this.PageIndex - 1)
{%>
<a cssclass="pagebtn" disabled="true">
<%=j + 1%></a>
<%}
else
{%>
<a href="#" id="aPageIndex" cssclass="pagebtn" onclick="return changePages(<%=j+1 %>)">
<%=j + 1%></a>
<%}
}%>
</li>
<li>
<%
if (this.PageIndex == this.TotalCount / this.PageSize + (this.TotalCount % this.PageSize == 0 ? 0 : 1))
{ %>
<a cssclass="pagebtn" disabled="true">></a>
<%}
else
{%>
<a href="#" cssclass="pagebtn" id="aPageNext" onclick="return changePages(<%=this.PageIndex+1%>)">
></a>
<%}%>
</li>
<%
if ((PageCount - this.PageIndex > 9))
{
PageIndexPre = Convert.ToInt32(this.PageIndex / 10) * 10;
%>
<li><a href="#" id="a2" cssclass="pagebtn" onclick="return changePages(<%=this.PageIndex+10%>)">
>></a></li>
<%
}
else
{
%>
<li><a class="pagebtn" disabled="true">>></a></li>
<%}
%>
</ul>
</div>
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
namespace Car.Web.UserControl
{
public partial class MyPager : System.Web.UI.UserControl
{
/// <summary>
/// 分页的控件
/// </summary>
/// <summary>
/// 总大小
/// </summary>
private int _totalCount;
public int TotalCount
{
get { return _totalCount; }
set { _totalCount = value; }
}
/// <summary>
/// 当前页数
/// </summary>
private int _pageindex;
public int PageIndex
{
get { return _pageindex; }
set { _pageindex = value; }
}
/// <summary>
/// 每页大小
/// </summary>
private int _pagesize;
public int PageSize
{
get { return _pagesize; }
set { _pagesize = value; }
}
}
}
//下面我们来产品展示的页面，也是我们讨论的重点
====ProductSort.ascx======= <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ProductSort.ascx.cs" Inherits="Car.Web.UserControl.ProductSort" %><%@ Register TagName="Pager" TagPrefix="Myasp" Src="../UserControl/MyPager.ascx" %>==引用页码控件
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ProductSort.ascx.cs" Inherits="Car.Web.UserControl.ProductSort" %>
<%@ Register TagName="Pager" TagPrefix="Myasp" Src="../UserControl/MyPager.ascx" %>
<script type="text/javascript">
function Show(Action,Sort)
{
action=Action;
sortID=Sort;
GetTitle(action,sortID);
changePages(1);
}
//页面事件
function changePages(pageIndex) {
// alert(pageIndex+""+action+""+sortID);
$.get("UserControl/ProductSort.ucr?random=" + Math.random() + "&", {action:action,sortID:sortID,PageIndex: pageIndex},
function(result)
{
$('#divMainContent').html(result);
});
return false; // IE only
}
</script>
<asp:Panel ID="Phave" Visible="false" runat="server">
<asp:DataList ID="rp_data" runat="server" RepeatColumns="4" DataKeyField="id">
<ItemTemplate>
<div Class="ProductShow1" >
<div class="ProductPic">
<a href='Product.aspx?pid=<%# Eval("id") %>'>
<img id="Img" alt="" style="height:140px; width:160px; border:0px;" src='<%#"UploadPic/Product/"+Eval("smallpic")%>' />
</a>
</div>
<div class="ProdcutDetail" onmouseout='this.className="ProductDetail"' onmouseover='this.className="ProductDetail_over"'>
<div class="ProductTitle"><%# Car.Common.StringHelper.CutContent(Eval("name").ToString(), 10)%></div>
<div class="Product_price">
<span> 市场价:<%# Eval("price") %>元</span>
<span><img src="images/but_bbogi.gif" alt="查看详细" style="cursor:hand; vertical-align:middle;" onclick="javascript:window.location='Product.aspx?pid=<%#Eval("id") %>';" id="IMG1"/></span>
</div>
<div class="Product_freeprice">
<span> 会员价:<%# Eval("freeprice") %>元</span>
<span> <img src="images/but_bbogi2.gif" alt="放入购物车"style="cursor:hand; vertical-align:middle;" onclick="javascript:window.location.replace('BuyThing.aspx?pid=<%#Eval("id") %>');"/></span>
</div>
</div>
</div>
</ItemTemplate>
</asp:DataList>
<div>
<Myasp:Pager id="Mypager" runat="server" />
</div>
</asp:Panel>
<asp:Panel ID="PNot" runat="server">
<div style=" text-align:center; padding:20px; margin-top:20px;">
<p><img src="images/bg_searchnone.gif" style="height:294px; height:90px;" alt="没有符合的商品" /></p>
</div>
</asp:Panel>
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using Car.Common;
namespace Car.Web.UserControl
{
public partial class ProductSort : System.Web.UI.UserControl
{
Car.BLL.Product product =new Car.BLL.Product();
/// <summary>
/// 动作
/// </summary>
private string _action;
[UserControlRenderingProperty(Key = "action", Source = UserControlRenderingPropertySource.QueryString)]
public string Action{ get { return _action; } set { _action = value; } }
/// <summary>
/// 当前页
/// </summary>
private int _sortID;
[UserControlRenderingProperty(Key = "sortID", Source = UserControlRenderingPropertySource.QueryString)]
public int SortID { get { return _sortID; } set { _sortID = value; } }
/// <summary>
/// 当前页
/// </summary>
private int _pageIndex;
[UserControlRenderingProperty(Key = "PageIndex", Source = UserControlRenderingPropertySource.QueryString)]
public int PageIndex { get { return _pageIndex; } set { _pageIndex = value; } }
/// <summary>
/// 每页条数
/// </summary>
private int pagesize;
[UserControlRenderingProperty(Key = "PageSize", Source = UserControlRenderingPropertySource.QueryString)]
public int PageSize { get { return pagesize; } set { pagesize = value; } }
/// <summary>
/// 总大小
/// </summary>
public int Count;
private int _totalCount;
public int TotalCount { get { return _totalCount; } set { _totalCount = value; } }
/// <summary>
/// 总大小
/// </summary>
public int Pagers;
private int _pagerstotal;
public int TotalPager { get { return _pagerstotal; } set { _pagerstotal = value; } }
/// <summary>
/// 输出结果
/// </summary>
/// <param name="e"></param>
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
this.PageSize = (this.PageSize == 0 ? 12 : this.PageSize);
this.PageIndex = (this.PageIndex == 0 ? 1 : this.PageIndex);
//this.Action = string.IsNullOrEmpty(this.Action) ? "small" : this.Action;
DataTable dt = GetDataTale(this.Action, this.SortID, this.PageSize, this.PageIndex, out Count, out Pagers);
if (dt.Rows.Count <= 0)
{
Phave.Visible = false;
PNot.Visible = true;
}
else
{
Phave.Visible = true;
PNot.Visible = false;
this.rp_data.DataSource = dt;
this.TotalCount = Count;
this.TotalPager = Pagers;
this.rp_data.DataBind();
RenderControl();
}
}
/// <summary>
/// 渲染页面控件
/// </summary>
private void RenderControl()
{
//分页控件
this.Mypager.TotalCount = this.TotalCount;
this.Mypager.PageIndex = this.PageIndex;
this.Mypager.PageSize = this.PageSize;
}
/// <summary>
/// 获取分页内容
/// </summary>
/// <param name="pagesize"></param>
/// <param name="pageindex"></param>
/// <param name="type"></param>
/// <param name="total"></param>
/// <returns></returns>
public DataTable GetDataTale(string action,int sortID,int pagesize, int pageindex, out int total,out int pagerTotal)
{
DataTable dt = new DataTable();
string bigwhere = "and it.fatherID="+sortID+"or it.id="+sortID;
switch (action)
{
case "Big":
{
dt = product.GetTypeList(bigwhere, out total, out pagerTotal).Tables[0];
DataTable dtt = dt.Clone();
for (int i = pagesize * (pageindex - 1);
i < pagesize * pageindex && i < dt.Rows.Count; i++)
{
dtt.ImportRow(dt.Rows[i]);
}
dt = dtt;
break;
}
case "small":
{
dt=product.GetList(pagesize,PageIndex,"prosort="+sortID,out total,out pagerTotal).Tables[0];
break;
}
case "Brand":
{
dt = product.GetList(pagesize, PageIndex, "brandsort=" + sortID, out total, out pagerTotal).Tables[0];
break;
}
case "CarType":
{
dt = product.GetList(pagesize, PageIndex, "type=" + sortID, out total, out pagerTotal).Tables[0];
break;
}
default:
{
dt = product.GetList(pagesize, PageIndex, "", out total, out pagerTotal).Tables[0];
break;
}
}
return dt;
}
}
}
下面就来看看无刷新控件的用法: ===ProductSort.aspx===
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProductSort.aspx.cs" Inherits="Car.Web.ProductSort" %>//这里引用我们的无刷新分页控件
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProductSort.aspx.cs" Inherits="Car.Web.ProductSort" %>
<%@ Register TagName="ProductSort" TagPrefix="Myasp" Src="~/UserControl/ProductSort.ascx" %>
<!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 >
<title><%=pTitle %></title>
<link href="css/Main.css" rel="Stylesheet" type="text/css" />
<link href="css/Product.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" >
function QueryString(fieldName)
{
var urlString = document.location.search;
if(urlString != null)
{
var typeQu = fieldName+"=";
var urlEnd = urlString.indexOf(typeQu);
if(urlEnd != -1)
{
var paramsUrl = urlString.substring(urlEnd+typeQu.length);
var isEnd = paramsUrl.indexOf('&');
if(isEnd != -1)
{
return paramsUrl.substring(0, isEnd);
}
else
{
return paramsUrl;
}
}
else
{
return null;
}
}
else
{
return null;
}
}
var action="normal";//动作
var sortID=0;//分类ID
$(function(){
if(QueryString("action")!=null)
{
action=QueryString("action");
}
if(QueryString("sortID")!=null)
{
sortID=QueryString("sortID");
}
});
</script>
</head>
<%@ Register TagName="ProductSort" TagPrefix="Myasp" Src="~/UserControl/ProductSort.ascx" %> <div id="divMainContent">
<Myasp:ProductSort id="MyProductSort" runat="server"></Myasp:ProductSort>
</div>