jquery应用-AJAX推拽分页
/Files/guozili/SiteOSFile2.rar模仿视频网站首页ajax分页，结合neverModules-slider + jquery form插件实现拖动滑动块进行AJAX分页，此方法较灵活，另外可用2.0里面的CallBack机制实现同样的功能，预览和代码请见下：
(注释添加中.......)
预览：
代码：
default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default9.aspx.cs" Inherits="Default9" %>
<!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>无标题页</title>
<style type="text/css" media="all" title="Default">
.imageSlider1 { margin:0;padding:0; height:18px; width:400px; background-image:url("images/scrollbg.gif"); }
.imageBar1 { margin:0;padding:0; height:17px; width:10px; background-image:url("images/scrfloat.gif"); }
body { background-color:#f5f5f5;}
div {color:#000;font-size:12px;}
</style>
<script type="text/javascript" src="slider_extras.js" charset="gb2312"></script>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="form.js"></script>
</head>
<body>
<form id="form1" action="default10.aspx" method="post">
<input id="pageindex" name="pageindex" type="hidden" value="1" />
<div id="content">
</div>
<div style="height: 100px; margin: 10px; width: 600px">
<div style="float: left;">
<img src="images/pre.gif" onclick="sliderImage1.setValue(sliderImage1.getValue()-1)" /></div>
<div id="sliderDemo1" style="height: 40px; width: 400px; float: left;">
</div>
<div style="float: left;">
<img src="images/next.gif" onclick="sliderImage1.setValue(sliderImage1.getValue()+1)" /></div>
</div>
<script type="text/javascript">
//<
});
sliderImage1.onstart = function () {
};
sliderImage1.onchange = function () {
};
//滑动操作完成时 1.该pageindex隐藏域的值，2.jquery 进行提交数据
sliderImage1.onfinish = function () {
$("#pageindex").val(sliderImage1.getValue());
onSubmitPage();
};
sliderImage1.create();
sliderImage1.setValue(sliderImage1.min);
//juery form插件post pageindex隐藏域的值,default10.aspx根据post过来的页值返回repeater生产的html
function onSubmitPage()
{
var options = {
target: '#content', //id=content div 用来加载返回的数据
success: function SubmitSuccess(data){
$('#content').fadeIn('slow'); //加载成功后content显示出来
}
};
$('#content').html('loading
.');
$('#form1').ajaxSubmit(options); //ajax提交
}
//]]>
</script>
</form>
</body>
</html>
default10.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default10.aspx.cs" Inherits="Default10" %>
<asp:repeater id="Repeater1" runat="server">
<ItemTemplate>
<%# Eval("name") %>
<br />
</ItemTemplate>
</asp:repeater>
default10.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
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;
using System.Collections.Generic;
using System.IO;
using System.Globalization;
public partial class Default10 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
getRepeaterHtml(Convert.ToInt32(Request.Form["pageindex"]));
}
private void getRepeaterHtml(int page)
{
this.Repeater1.DataSource = getNameByPage(page);
this.Repeater1.DataBind();
}
private IList<note> getNameByPage(int page)
{
IList<note> notes = new List<note>();
for (int i = 10 * (page - 1) + 1; i <= 10 * page; i++)
{
note note1 = new note();
note1.Name = "第" + i.ToString() + "条记录";
notes.Add(note1);
}
return notes;
}
public class note
{
string _name;
public string Name
{
get { return this._name; }
set { this._name = value; }
}
}
}
net2.0 callback实现：
default8.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default8.aspx.cs" Inherits="Default8" %>
<!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>无标题页</title>
<style type="text/css" media="all" title="Default">
.imageSlider1 { margin:0;padding:0; height:18px; width:400px; background-image:url("images/scrollbg.gif"); }
.imageBar1 { margin:0;padding:0; height:17px; width:10px; background-image:url("images/scrfloat.gif"); }
body { background-color:#f5f5f5;}
div {color:#000;font-size:12px;}
</style>
<script type="text/javascript" src="slider_extras.js" charset="gb2312"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="content">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<%# Eval("name") %>
<br />
</ItemTemplate>
</asp:Repeater>
</div>
<div style="height: 100px; margin: 10px; width: 600px">
<div style="float: left;">
<img src="images/pre.gif" onclick="sliderImage1.setValue(sliderImage1.getValue()-1)" /></div>
<div id="sliderDemo1" style="height: 40px; width: 400px; float: left;">
</div>
<div style="float: left;">
<img src="images/next.gif" onclick="sliderImage1.setValue(sliderImage1.getValue()+1)" /></div>
</div>
<script type="text/javascript">
//<![CDATA[
var sliderImage1 = new neverModules.modules.slider({targetId: "sliderDemo1",
sliderCss: "imageSlider1",
barCss: "imageBar1",
min: 1,
max: 10,
hints: "move the slider"
});
sliderImage1.onstart = function () {
};
sliderImage1.onchange = function () {
};
sliderImage1.onfinish = function () {
CallServer(sliderImage1.getValue(), content) ;
};
sliderImage1.create();
sliderImage1.setValue(sliderImage1.min);
function CallServer(arg, context)
{
<%= ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context")%>;
context.innerHTML = "loading";
}
function ReceiveServerData(result, context)
{
context.innerHTML = result;
}
//]]>
</script>
</form>
</body>
</html>
default8.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
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;
using System.Collections.Generic;
using System.IO;
using System.Globalization;
public partial class Default8 : System.Web.UI.Page, ICallbackEventHandler
{
private int page;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
this.Repeater1.DataSource = getNameByPage(1);
this.Repeater1.DataBind();
}
}
private IList<note> getNameByPage(int page)
{
IList<note> notes = new List<note>();
for (int i = 10*(page-1) + 1; i <= 10 * page; i++)
{
note note1 = new note();
note1.Name = "第" + i.ToString() + "条记录";
notes.Add(note1);
}
return notes;
}
public class note
{
string _name;
public string Name
{
get { return this._name; }
set { this._name = value; }
}
}
private string getRepeaterHtml(int page)
{
this.Repeater1.DataSource = getNameByPage(page);
this.Repeater1.DataBind();
StringWriter writer1 = new StringWriter(CultureInfo.InvariantCulture);
HtmlTextWriter writer2 = new HtmlTextWriter(writer1);
this.Repeater1.RenderControl(writer2);
writer2.Flush();
writer2.Close();
return writer1.ToString();
}
#region ICallbackEventHandler 成员
public string GetCallbackResult()
{
return getRepeaterHtml(this.page);
}
public void RaiseCallbackEvent(string eventArgument)
{
this.page = Convert.ToInt32(eventArgument);
}
#endregion
}
/Files/guozili/tytgw.rar
(注释添加中.......)
预览：
代码：
default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default9.aspx.cs" Inherits="Default9" %>
<!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>无标题页</title> <style type="text/css" media="all" title="Default"> .imageSlider1 { margin:0;padding:0; height:18px; width:400px; background-image:url("images/scrollbg.gif"); }
.imageSlider1 .imageBar1 { margin:0;padding:0; height:17px; width:10px; background-image:url("images/scrfloat.gif"); } body { background-color:#f5f5f5;} div {color:#000;font-size:12px;} </style> <script type="text/javascript" src="slider_extras.js" charset="gb2312"></script> <script type="text/javascript" src="jquery-latest.js"></script> <script type="text/javascript" src="form.js"></script></head><body> <form id="form1" action="default10.aspx" method="post"> <input id="pageindex" name="pageindex" type="hidden" value="1" /> <div id="content"> </div> <div style="height: 100px; margin: 10px; width: 600px"> <div style="float: left;"> <img src="images/pre.gif" onclick="sliderImage1.setValue(sliderImage1.getValue()-1)" /></div> <div id="sliderDemo1" style="height: 40px; width: 400px; float: left;"> </div> <div style="float: left;"> <img src="images/next.gif" onclick="sliderImage1.setValue(sliderImage1.getValue()+1)" /></div> </div> <script type="text/javascript"> //<![CDATA[ //分页滑动条初始化 var sliderImage1 = new neverModules.modules.slider({targetId: "sliderDemo1", sliderCss: "imageSlider1", barCss: "imageBar1", min: 1, max: 10, hints: "move the slider" }); sliderImage1.onstart = function () { }; sliderImage1.onchange = function () { }; //滑动操作完成时 1.该pageindex隐藏域的值，2.jquery 进行提交数据 sliderImage1.onfinish = function () { $("#pageindex").val(sliderImage1.getValue()); onSubmitPage(); }; sliderImage1.create(); sliderImage1.setValue(sliderImage1.min); //juery form插件post pageindex隐藏域的值,default10.aspx根据post过来的页值返回repeater生产的html function onSubmitPage() { var options = { target: '#content', //id=content div 用来加载返回的数据 success: function SubmitSuccess(data){ $('#content').fadeIn('slow'); //加载成功后content显示出来 } }; $('#content').html('loading.'); $('#form1').ajaxSubmit(options); //ajax提交 } //]]> </script> </form></body></html>default10.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default10.aspx.cs" Inherits="Default10" %><asp:repeater id="Repeater1" runat="server"> <ItemTemplate> <%# Eval("name") %> <br /> </ItemTemplate> </asp:repeater>default10.aspx.cs
using System;using System.Data;using System.Configuration;using System.Collections;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;using System.Collections.Generic;using System.IO;using System.Globalization;public partial class Default10 : System.Web.UI.Page{ protected void Page_Load(object sender, EventArgs e) { getRepeaterHtml(Convert.ToInt32(Request.Form["pageindex"])); } private void getRepeaterHtml(int page) { this.Repeater1.DataSource = getNameByPage(page); this.Repeater1.DataBind(); } private IList<note> getNameByPage(int page) { IList<note> notes = new List<note>(); for (int i = 10 * (page - 1) + 1; i <= 10 * page; i++) { note note1 = new note(); note1.Name = "第" + i.ToString() + "条记录"; notes.Add(note1); } return notes; } public class note { string _name; public string Name { get { return this._name; } set { this._name = value; } } } }net2.0 callback实现：
default8.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default8.aspx.cs" Inherits="Default8" %><!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>无标题页</title> <style type="text/css" media="all" title="Default"> .imageSlider1 { margin:0;padding:0; height:18px; width:400px; background-image:url("images/scrollbg.gif"); } .imageBar1 { margin:0;padding:0; height:17px; width:10px; background-image:url("images/scrfloat.gif"); } body { background-color:#f5f5f5;} div {color:#000;font-size:12px;} </style> <script type="text/javascript" src="slider_extras.js" charset="gb2312"></script></head><body> <form id="form1" runat="server"> <div id="content"> <asp:Repeater ID="Repeater1" runat="server"> <ItemTemplate> <%# Eval("name") %> <br /> </ItemTemplate> </asp:Repeater> </div> <div style="height: 100px; margin: 10px; width: 600px"> <div style="float: left;"> <img src="images/pre.gif" onclick="sliderImage1.setValue(sliderImage1.getValue()-1)" /></div> <div id="sliderDemo1" style="height: 40px; width: 400px; float: left;"> </div> <div style="float: left;"> <img src="images/next.gif" onclick="sliderImage1.setValue(sliderImage1.getValue()+1)" /></div> </div> <script type="text/javascript"> //<![CDATA[ var sliderImage1 = new neverModules.modules.slider({targetId: "sliderDemo1", sliderCss: "imageSlider1", barCss: "imageBar1", min: 1, max: 10, hints: "move the slider" }); sliderImage1.onstart = function () { }; sliderImage1.onchange = function () { }; sliderImage1.onfinish = function () { CallServer(sliderImage1.getValue(), content) ; }; sliderImage1.create(); sliderImage1.setValue(sliderImage1.min); function CallServer(arg, context) { <%= ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context")%>; context.innerHTML = "loading"; } function ReceiveServerData(result, context) { context.innerHTML = result; } //]]> </script> </form></body></html>default8.aspx.cs
using System;using System.Data;using System.Configuration;using System.Collections;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;using System.Collections.Generic;using System.IO;using System.Globalization;public partial class Default8 : System.Web.UI.Page, ICallbackEventHandler{ private int page; protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { this.Repeater1.DataSource = getNameByPage(1); this.Repeater1.DataBind(); } } private IList<note> getNameByPage(int page) { IList<note> notes = new List<note>(); for (int i = 10*(page-1) + 1; i <= 10 * page; i++) { note note1 = new note(); note1.Name = "第" + i.ToString() + "条记录"; notes.Add(note1); } return notes; } public class note { string _name; public string Name { get { return this._name; } set { this._name = value; } } } private string getRepeaterHtml(int page) { this.Repeater1.DataSource = getNameByPage(page); this.Repeater1.DataBind(); StringWriter writer1 = new StringWriter(CultureInfo.InvariantCulture); HtmlTextWriter writer2 = new HtmlTextWriter(writer1); this.Repeater1.RenderControl(writer2); writer2.Flush(); writer2.Close(); return writer1.ToString(); } #region ICallbackEventHandler 成员 public string GetCallbackResult() { return getRepeaterHtml(this.page); } public void RaiseCallbackEvent(string eventArgument) { this.page = Convert.ToInt32(eventArgument); } #endregion}
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义