ASP.NET、jQuery使用Ajax
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Web.Ajax.Home.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" language="javascript" src="http://www.cnblogs.com/scripts/jquery.pack.js"></script>
<style type="text/css">
body{margin:0;padding:8px;font-size:14px; font-family:arial,"宋体";}
.dt {color:#ccc;}
.pager{text-align:center;height:30px;margin:0 auto;padding-top:8px;}
.pager a{ background:#fff;border:1px solid #96b9d9;color:#316595;height:20px;float:left;line-height:20px;padding:0 7px;margin:0 0 0 6px;display:inline;text-decoration:none;}
.pager a:hover{ background:#296cb3;border:1px solid #306494;color:#fff;text-decoration:none;}
.pager a.focus{ background:#296cb3;border:1px solid #306494;color:#fff;font-weight:bold;}
.pager span.all{ display:block;line-height:23px;float:left;display:inline;padding-left:5px;}
.loading {width:100px;display:none;padding:5px 5px 5px 8px;border:1px solid #fadda9;background-color:#fdf4e1;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="content"></div>
<div id="loading" class="loading">Loading
</div>
<script type="text/javascript" language="javascript">
<!--
// 跳转页面
function GotoPage(index) {
$.ajax({
type: "get",
url: "default.aspx",
data: "t=a&page=" + index + "&r=" + Math.random(),
success: function(msg) {
$("#content").show().html(msg);
}
})
}
// 第一次加载时默认加载第一页
GotoPage(1);
// 发生ajax请求时在右上角显示Loading
$("#loading").ajaxStart(function() {
$(this).show();
$(this).css("position", "absolute");
$(this).css("top", document.documentElement.scrollTop + 8);
$(this).css("left", window.document.documentElement.clientWidth - 130);
});
// 结束ajax请求时隐藏Loading
$("#loading").ajaxStop(function() {
$(this).hide();
});
// 滚动时保持在右上角
window.onscroll = function(){
$("#loading").css("top", document.documentElement.scrollTop + 8);
}
// 缩放窗口时保持在右上角
window.onresize = function() {
$("#loading").css("left", window.document.documentElement.clientWidth - 160);
}
//-->
</script>
<div>其它内容</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Data;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
namespace Web.Ajax.Home
{
public partial class Default : System.Web.UI.Page
{
protected DataTable Data;
protected int page = 1;
protected int size = 20;
protected int count = 123;
protected int item = 5;
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
if (Request["t"] != null)
{
// System.Threading.Thread.Sleep(3000);
string strPage = Request["page"] == null ? "1" : Request["page"];
int.TryParse(strPage, out page);
if (page < 1) page = 1;
if (page > count) page = count;
StringBuilder sb = new StringBuilder();
sb.Append("<ul>");
Random rnd = new Random();
size = rnd.Next(10, 30);
for (int i = 1; i <= size; i++)
{
int id = (page - 1) * size + i;
sb.Append(string.Format("\r\n<li>{0}.{1} <span class='dt'>( {2} )</span></li>",
id, string.Format("测试标题测试标题 Test Title Test Title {0}", id), DateTime.Now.AddSeconds(-i * 97531)));
}
sb.Append("</ul>");
sb.Append(GetPager());
Response.Clear();
Response.ClearContent();
Response.Write(sb.ToString());
Response.End();
}
}
protected string GetPager()
{
StringBuilder sb = new StringBuilder();
sb.Append("\r\n<div class=\"pager\">");
sb.Append("\r\n<a href=\"javascript:GotoPage(1)\" title=\"First\"><nobr> First </nobr></a> ");
sb.Append(string.Format("\r\n<a href=\"javascript:GotoPage({0})\" title=\"Previous\"><nobr> Previous </nobr></a> ", page - 1));
int start = (page - 1) / item * item + 1;
int end = ((page - 1) / item + 1) * item;
if (start < 1) start = 1;
if (end > count) end = count;
if (start > item)
sb.Append(string.Format("\r\n<a href=\"javascript:GotoPage({0})\" title=\"Page {0}\"></a>", start - 1));
for (int i = start; i <= end; i++)
{
if (i == page)
sb.Append(string.Format("\r\n<a class=\"focus\" title=\"Page {0}\">{0}</a>", i));
else
sb.Append(string.Format("\r\n<a href=\"javascript:GotoPage({0})\" title=\"Page {0}\">{0}</a>", i));
}
if (end < count)
sb.Append(string.Format("\r\n<a href=\"javascript:GotoPage({0})\" title=\"Page {0}\"></a>", end + 1));
sb.Append(string.Format("\r\n<a href=\"javascript:GotoPage({0})\" title=\"Next\"><nobr> Next </nobr></a> ", page + 1));
sb.Append(string.Format("\r\n<a href=\"javascript:GotoPage({0})\" title=\"Last\"><nobr> Last </nobr></a> ", count));
sb.Append(string.Format("\r\n<span class=\"all\">(共{0}页 共{1}条)</span>", count, count * size));
sb.Append("\r\n</div>");
return sb.ToString();
}
}
}
<!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" language="javascript" src="http://www.cnblogs.com/scripts/jquery.pack.js"></script>
<style type="text/css">
body{margin:0;padding:8px;font-size:14px; font-family:arial,"宋体";}
.dt {color:#ccc;}
.pager{text-align:center;height:30px;margin:0 auto;padding-top:8px;}
.pager a{ background:#fff;border:1px solid #96b9d9;color:#316595;height:20px;float:left;line-height:20px;padding:0 7px;margin:0 0 0 6px;display:inline;text-decoration:none;}
.pager a:hover{ background:#296cb3;border:1px solid #306494;color:#fff;text-decoration:none;}
.pager a.focus{ background:#296cb3;border:1px solid #306494;color:#fff;font-weight:bold;}
.pager span.all{ display:block;line-height:23px;float:left;display:inline;padding-left:5px;}
.loading {width:100px;display:none;padding:5px 5px 5px 8px;border:1px solid #fadda9;background-color:#fdf4e1;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="content"></div>
<div id="loading" class="loading">Loading
</div><script type="text/javascript" language="javascript">
<!--
// 跳转页面
function GotoPage(index) {
$.ajax({
type: "get",
url: "default.aspx",
data: "t=a&page=" + index + "&r=" + Math.random(),
success: function(msg) {
$("#content").show().html(msg);
}
})
}
// 第一次加载时默认加载第一页
GotoPage(1);
// 发生ajax请求时在右上角显示Loading
$("#loading").ajaxStart(function() {
$(this).show();
$(this).css("position", "absolute");
$(this).css("top", document.documentElement.scrollTop + 8);
$(this).css("left", window.document.documentElement.clientWidth - 130);
});
// 结束ajax请求时隐藏Loading
$("#loading").ajaxStop(function() {
$(this).hide();
});
// 滚动时保持在右上角
window.onscroll = function(){
$("#loading").css("top", document.documentElement.scrollTop + 8);
}
// 缩放窗口时保持在右上角
window.onresize = function() {
$("#loading").css("left", window.document.documentElement.clientWidth - 160);
}
//-->
</script>
<div>其它内容</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Data;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
namespace Web.Ajax.Home
{
public partial class Default : System.Web.UI.Page
{
protected DataTable Data;
protected int page = 1;
protected int size = 20;
protected int count = 123;
protected int item = 5;
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
if (Request["t"] != null)
{
// System.Threading.Thread.Sleep(3000);
string strPage = Request["page"] == null ? "1" : Request["page"];
int.TryParse(strPage, out page);
if (page < 1) page = 1;
if (page > count) page = count;
StringBuilder sb = new StringBuilder();
sb.Append("<ul>");
Random rnd = new Random();
size = rnd.Next(10, 30);
for (int i = 1; i <= size; i++)
{
int id = (page - 1) * size + i;
sb.Append(string.Format("\r\n<li>{0}.{1} <span class='dt'>( {2} )</span></li>",
id, string.Format("测试标题测试标题 Test Title Test Title {0}", id), DateTime.Now.AddSeconds(-i * 97531)));
}
sb.Append("</ul>");
sb.Append(GetPager());
Response.Clear();
Response.ClearContent();
Response.Write(sb.ToString());
Response.End();
}
}
protected string GetPager()
{
StringBuilder sb = new StringBuilder();
sb.Append("\r\n<div class=\"pager\">");
sb.Append("\r\n<a href=\"javascript:GotoPage(1)\" title=\"First\"><nobr> First </nobr></a> ");
sb.Append(string.Format("\r\n<a href=\"javascript:GotoPage({0})\" title=\"Previous\"><nobr> Previous </nobr></a> ", page - 1));
int start = (page - 1) / item * item + 1;
int end = ((page - 1) / item + 1) * item;
if (start < 1) start = 1;
if (end > count) end = count;
if (start > item)
sb.Append(string.Format("\r\n<a href=\"javascript:GotoPage({0})\" title=\"Page {0}\">
</a>", start - 1));for (int i = start; i <= end; i++)
{
if (i == page)
sb.Append(string.Format("\r\n<a class=\"focus\" title=\"Page {0}\">{0}</a>", i));
else
sb.Append(string.Format("\r\n<a href=\"javascript:GotoPage({0})\" title=\"Page {0}\">{0}</a>", i));
}
if (end < count)
sb.Append(string.Format("\r\n<a href=\"javascript:GotoPage({0})\" title=\"Page {0}\">
</a>", end + 1));sb.Append(string.Format("\r\n<a href=\"javascript:GotoPage({0})\" title=\"Next\"><nobr> Next </nobr></a> ", page + 1));
sb.Append(string.Format("\r\n<a href=\"javascript:GotoPage({0})\" title=\"Last\"><nobr> Last </nobr></a> ", count));
sb.Append(string.Format("\r\n<span class=\"all\">(共{0}页 共{1}条)</span>", count, count * size));
sb.Append("\r\n</div>");
return sb.ToString();
}
}
}
