ASP.NET C#+Ajax+json无刷新分页参考

一、初级

先html代码

<div class="ui-table-one">
<table>
<thead>
<tr>
<td width="13"><input type="checkbox" name="checkbox" id="checkbox" /></td>
<td width="60">UID</td>
<td>帐号</td>
<td>状态　　</td>
<td>用户类型</td>
<td>登录次数</td>
<td>登录日期</td>
<td>IP地址</td>
<td class="align-right">操作</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="checkbox" id="checkbox" value="{id}" /></td>
<td>{id}</td>
<td>{username}</td>
<td>正常</td>
<td>{group}</td>
<td>{logon_times}</td>
<td>2015-06-08 23:20:19</td>
<td>211.149.207.141</td>
<td class="align-right">
<a href="#">编辑</a><span class="text-explode">|</span>
<a href="#">删除</a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><input type="checkbox" name="checkbox" id="checkbox" /></td>
<td colspan="8">
<button type="button" id="renew" class="ui-btn ui-btn-default">删除</button>
<select id="orderGroupID" name="orderGroupID" class="select form-control inline-block">
<option value="" selected="selected">更多批量操作</option>
<option value="7">普通会员</option>
<option value="6">VIP会员</option>
<option value="5">企业会员</option>
<option value="4">超级会员</option>
</select>
</td>
</tr>
</tfoot>
</table>
</div>

相关JS

<script type="text/javascript" src="../../Javascript/jquery.js"></script>
<script type="text/javascript">
$(function(){

var tbody = $(".ui-table-one tbody").html();
$(".ui-table-one tbody").html("");

$.ajax({
type: "post",
url: "list.aspx/fenye",
//data: "{'username':'" + $(_this).val() + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var json = JSON.parse(data.d);
var text = "";
$.each(json, function (i, rs) {
var lins = tbody.replace(/{id}/g, rs["id"]);
lins = lins.replace(/{username}/g, rs["username"]);
lins = lins.replace(/{group}/g, user_group(rs["group"]));
lins = lins.replace(/{logon_times}/g, rs["logon_times"]);
text += lins;
});
$(".ui-table-one tbody").html(text);
},
error: function (err) {
JStx_Popupdialogbox("温情提示", "数据异常请联系管理员!Err " + err, 0, 400, 150, "Close_Popupdialogbox", "", "Close_Popupdialogbox", "", 0);
}
});

function user_group(obj) {
switch (parseInt(obj)) {
case 1:
return "超级管理员";
break;
case 2:
return "系统管理员";
break;
case 3:
return "前台管理员";
break;
case 4:
return "超级会员";
break;
case 5:
return "企业会员";
break;
case 6:
return "VIP会员";
break;
case 7:
return "普通会员";
break;
case 8:
return "游客";
break;
}
}
});
</script>

后台代码C#

[WebMethod]
public static string fenye()
{
Web.Int.Paging.Styleone.Paging_BLL Paging_BLL = new Web.Int.Paging.Styleone.Paging_BLL();
Web.Int.Paging.Styleone.PagingModel PagingModel = new Web.Int.Paging.Styleone.PagingModel();

BLL.Admin.AdminBLL adminBLL = new BLL.Admin.AdminBLL();

DataSet ds = adminBLL.GetList("");
int Count = ds.Tables[0].Rows.Count;

int Moreni = 0; //默认循环i等于这个数
string FenyeHtml = null;

#region 【分页则执行】
int PageSize = 10; //默认一页显示多少条

PagingModel.Datavalue = ds;//数据源
PagingModel.PageSize = PageSize;//一页显示多少个
PagingModel.Totalrecord = Count;//总数据多少条
PagedDataSource pds = Paging_BLL.Bpwen_Fenye(PagingModel);//执行相关操作
Count = pds.Count;//改变数量
#region 【分页配置循环下一页改变默认循环i等于当前page*显示行数】
if (PagingModel.CurrentPageIndex != 0)
{
Moreni = PagingModel.CurrentPageIndex * PageSize;
Count = Moreni + Count;
}
#endregion
FenyeHtml = Paging_BLL.Bpwen_PagingbuttonA();//读取分页按键
#endregion

#region 【加载】
string Html = "[";
if (Count != 0)
{
#region 【数据循环】
int Fori = 0;
for (int i = Moreni; i < Count; i++)
{
Fori = Fori + 1;
Html += "{";
Html += "\"id\":\"" + ds.Tables[0].Rows[i]["Admin_ID"].ToString() + "\",";
Html += "\"group\":\"" + ds.Tables[0].Rows[i]["Admin_User_group"].ToString() + "\",";
Html += "\"logon_times\":\"" + ds.Tables[0].Rows[i]["Admin_Logon_times"].ToString() + "\",";
Html += "\"username\":\"" + ds.Tables[0].Rows[i]["Admin_username"].ToString() + "\"";
Html += "}";
if (i != Count-1)
{
Html += ",";
}
}
Html += "]";
#endregion
}
#endregion

return Html;
}

这篇少相关我自己写的引用方法，只是一个参考学习。

二、延伸

HTML前端

<div class="ui-table-one">
<table>
<thead>
<tr>
<td width="13"><input type="checkbox" name="checkbox" id="checkbox" class="select-all" /></td>
<td width="60">UID</td>
<td>帐号</td>
<td>状态　　</td>
<td>用户类型</td>
<td>登录次数</td>
<td>登录日期</td>
<td>IP地址</td>
<td class="align-right">操作</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="checkbox" id="checkbox1" value="{ID}" /></td>
<td>{ID}</td>
<td>{username}</td>
<td>{State}</td>
<td>{User_group}</td>
<td>{Logon_times}</td>
<td>注册：{Date}<br />访问：{InterviewDate}</td>
<td>注册：{IP}<br />访问：{InterviewIP}</td>
<td class="align-right">
<a href="javascript:void(0);" class="a_lan_hong" onclick="update({ID})" title="编辑">编辑</a><span class="text-explode">|</span>
<a href="javascript:void(0);" class="a_lan_hong delete" title="删除">删除</a><span class="text-explode">|</span>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><input type="checkbox" name="checkbox" id="checkbox2" class="select-all" /></td>
<td colspan="8">
<button type="button" id="delete" class="ui-btn ui-btn-default">删除</button>
<select id="Select1" name="orderGroupID" class="select form-control inline-block">
<option value="" selected="selected">更多批量操作</option>
<option value="7">普通会员</option>
<option value="6">VIP会员</option>
<option value="5">企业会员</option>
<option value="4">超级会员</option>
</select>
<asp:Label ID="Information" runat="server" Text="" CssClass="ui-paging-two ui-float-right"></asp:Label>
</td>
</tr>
</tfoot>
</table>
</div>

JS脚本

$(function () {
var tbody = $(".ui-table-one tbody").html();
$(".ui-table-one tbody").html("");

$.ajax({
url: "eval.ashx",
dataType: "jsonp",
jsonp: "jsonpcallback",
jsonpCallback: "GetUserList",
success: function (data) {
var json = data.GetUserListfor;
var text = "";
for (var i = 0; i < json.length; i++) {
var lins = tbody;
for (var filed in json[i]) {
var rs = json[i][filed];
lins = lins.replace(new RegExp("{" + filed + "}", "g"), rs);
}
text += lins;
}
$(".ui-table-one tbody").html(text);
},
error: function (err) {

}
});
});


C#后端

public class eval : IHttpHandler
{
<span style="white-space:pre"> </span>#region 【ProcessRequest】
public void ProcessRequest(HttpContext Current)
{
Current.Response.ContentType = "text/plain";
HttpContext.Current.Response.Write(form_submit());
HttpContext.Current.Response.End();
}
#endregion

#region 【表单提交】
public string form_submit()
{
#region 【读取jsonpCallback接口】
string jsonpCallback = HttpContext.Current.Request.QueryString["jsonpCallback"];
if ((jsonpCallback == null) || (jsonpCallback == String.Empty))
{
return "数据异常:jsonpCallback没有设置，请检查。";
}
else
{
return reflex_eval(jsonpCallback);
}
#endregion
}
#endregion

#region 【反射执行<span style="font-family: Arial, Helvetica, sans-serif;">实例</span><span style="font-family: Arial, Helvetica, sans-serif;">】</span>
public string reflex_eval(string eval)
{
//通过反射来执行类的实例方法
eval objs = new eval();
Type typy = objs.GetType();
//因为此句我分析好久
MethodInfo mi = null;
try
{
mi = typy.GetMethod(eval, BindingFlags.NonPublic | BindingFlags.Instance, null, new Type[] { }, null);
}
catch (Exception e)
{
return "数据异常:jsonpCallback=" + eval + "，没有【" + eval + "】该接口，请检查。";
}

//通过反射执行ReturnAutoID方法，返回AutoID值
try
{
return mi.Invoke(objs, null).ToString();
}
catch (Exception e)
{
return "";
}
}
#endregion

#region 【必须加载】
public bool IsReusable
{
get
{
return false;
}
}
#endregion

#region 【接口-获取用户列表】
private string GetUserList()
{
if (HttpContext.Current.Request.HttpMethod.ToUpper() == "POST")
{
return "GetUserList(" + UserList() + ")";
}
else
{
return "";
}
}
#endregion

#region 【获取用户列表】
/// <summary>
/// 获取用户列表
/// </summary>
/// <returns></returns>
public string UserList()
{

DataSet ds = AdminBLL.GetList("");
int Count = ds.Tables[0].Rows.Count;//数据总数

if (Count != 0)
{
#region 【列表打印】
List<List_Model> Model = new List<List_Model>();
for (int i = 0; i < Count; i++)
{
Model.Add(new List_Model()
{
ID = Convert.ToInt32(ds.Tables[0].Rows[i]["Admin_ID"]),
username = ds.Tables[0].Rows[i]["Admin_username"].ToString(),
password = HRMS.Bpwen.MD5.Decrypt(ds.Tables[0].Rows[i]["Admin_password"].ToString()),
User_group = User_group(Convert.ToInt32(ds.Tables[0].Rows[i]["Admin_User_group"])),
State = User_State(Convert.ToInt32(ds.Tables[0].Rows[i]["Admin_State"])),
Logon_times = Convert.ToInt32(ds.Tables[0].Rows[i]["Admin_Logon_times"]),
AddID = Convert.ToInt32(ds.Tables[0].Rows[i]["Admin_AddID"]),
IP = ds.Tables[0].Rows[i]["Admin_IP"].ToString(),
InterviewIP = User_Fwdate(Convert.ToInt32(ds.Tables[0].Rows[i]["Admin_ID"]), 1),
Date = User_date(Convert.ToDateTime(ds.Tables[0].Rows[i]["Admin_Date"])),
InterviewDate = User_Fwdate(Convert.ToInt32(ds.Tables[0].Rows[i]["Admin_ID"]), 0)
});
}
#endregion

#region 【列表参数】
List<List_of_parameters> Properties = new List<List_of_parameters>(){
new List_of_parameters(){
Total_Records=Count
}
};
#endregion

#region 【封装接口】
Interface_Name json = new Interface_Name();
json.GetUserListfor = Model;
json.GetUserListParameter = Properties;
#endregion

#region 【json输出】
return new JavaScriptSerializer().Serialize(json);
#endregion
}
else
{
return "";
}
}
#endregion

#region 【JSON接口名称】
/// <summary>
/// JSON接口名称
/// </summary>
public class Interface_Name
{
/// <summary>
/// 获取用户列表,接口名称封装
/// </summary>
public List<List_Model> GetUserListfor { get; set; }
/// <summary>
/// 获取用户列表参数,接口名称封装
/// </summary>
public List<List_of_parameters> GetUserListParameter { get; set; }
}
#endregion

#region 【列表参数】
/// <summary>
/// 列表参数
/// </summary>
public class List_of_parameters
{
/// <summary>
/// 列表总记录条数
/// </summary>
/// <returns></returns>
public int Total_Records { get; set; }
}
#endregion

#region 【列表存储Model】
public class List_Model
{
public int ID { get; set; }
public string username { get; set; }
public string password { get; set; }
public string User_group { get; set; }
public string State { get; set; }
public int Logon_times { get; set; }
public int AddID { get; set; }
public string IP { get; set; }
public string InterviewIP { get; set; }
public string Date { get; set; }
public string InterviewDate { get; set; }
}
#endregion
｝