您的位置:首页 > 其它

vici mvc 开发事例——调用ajax实现分页

2011-04-26 00:20 387 查看
在这篇博文中,我们会用到jquery 分页插件pagination,vici 自带了调用ajax的方法,我们抛弃以前用控件的习惯,来自己写一个分页后台。

首先我来讲一下这个分页插件:

$("#Pagination").pagination(num_entries, {
num_edge_entries: 2,
num_display_entries: 8,
callback: pageselectCallback,
items_per_page: 1 // Show only one item per page
});


参数:

参数名描述参数值
maxentries总条目数必选参数,整数
items_per_page每页显示的条目数可选参数,默认是10
num_display_entries连续分页主体部分显示的分页条目数可选参数,默认是10
current_page当前选中的页面可选参数,默认是0,表示第1页
num_edge_entries两侧显示的首尾分页的条目数可选参数,默认是0
link_to分页的链接字符串,可选参数,默认是"#"
prev_text“前一页”分页按钮上显示的文字字符串参数,可选,默认是"Prev"
next_text“下一页”分页按钮上显示的文字字符串参数,可选,默认是"Next"
ellipse_text省略的页数用什么文字表示可选字符串参数,默认是"…"
prev_show_always是否显示“前一页”分页按钮布尔型,可选参数,默认为true,即显示“前一页”按钮
next_show_always是否显示“下一页”分页按钮布尔型,可选参数,默认为true,即显示“下一页”按钮
callback回调函数默认无执行效果
下面我建一个htm,在VICI就是模版文件

例如:recommend.htm

<!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>
</head>
<body>
<div id="Pagination"></div>
<br style="clear:both;" mce_style="clear:both;" />
<div id="Searchresult">
This content will be replaced when pagination inits.
</div>

<!-- Container element for all the Elements that are to be paginated -->
<div id="hiddenresult" style="display:none;" mce_style="display:none;">

</div>
<mce:script type="text/javascript" src="../js/jquery.pagination.js" mce_src="js/jquery.pagination.js"></mce:script>
<mce:script type="text/javascript"><!--
function pageselectCallback(page_index, jq) {
Include(page_index,handleInfoResponse);
return false;
}
function handleInfoResponse(info)
{
var str="<ul>"
$('#Searchresult').append("<h1>"+info.LastUpdate+"</h1>");
for(var i in info.infoList)
{
str+="<li>"+info.infoList[i]['_title']+"</li>";
}
$('#Searchresult').empty().append(str);
}
function initPagination(num_entries) {
$("#Pagination").pagination(num_entries, {
num_edge_entries: 2,
num_display_entries: 8,
callback: pageselectCallback,
items_per_page: 1 // Show only one item per page
});
}
$(document).ready(function () {
initPagination({{page_num}});
});
// --></mce:script>
</body>
</html>


对应的我们要在Controller中建立一个同名的控制器

例如:recommend.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Vici.Mvc;
namespace Demo.ViciMvc
{
public class recommend:BaseController
{
[BeforeAction]
public void RegisteCss()
{
View.RegisterCSSInclude("CSS", "~/Content/css/pagination.css");

}
public void Run()
{
int page_num = DataService.PageCount();
ViewData["page_num"] = page_num;
}
[Ajax("Include")]
public static object include(int page_index)
{
string viewName = WebAppContext.AjaxContext.ViewName;
return new
{
LastUpdate = DateTime.Now,
infoList = DataService.SelectSpotsMesg(page_index)
};
}
}
}


mvc的优点就是代码的一致性和重用性高,我为了简化代码量编写了,数据库交互类,这里边叫DBhelper,和数据层调用类DataServer,在控制器类中我们要调用DataServer类中一些方法,如下:

/// <summary>
/// 初始化Spots表
/// </summary>
/// <param name="row"></param>
/// <returns></returns>
public static Spots InitSpots(DataRow row)
{
Spots spots = new Spots();
if (!Convert.IsDBNull(row["id"])) { spots._id = Convert.ToInt32(row["id"]); }
if (!Convert.IsDBNull(row["title"])) { spots._title = Convert.ToString(row["title"]); }
if (!Convert.IsDBNull(row["des"])) { spots._des = Convert.ToString(row["des"]); }
if (!Convert.IsDBNull(row["pic"])) { spots._pic = Convert.ToString(row["pic"]); }
return spots;
}
/// <summary>
/// 得到分页总数,利用.net自带的PagedDataSource类
/// private static PagedDataSource page = new PagedDataSource();
/// </summary>
/// <returns></returns>
public static int PageCount()
{
string str = "select * from Spots";
page.DataSource = DBHelper.GetMesg(str).Tables[0].DefaultView;
page.AllowPaging = true;
page.PageSize = 2;
return page.PageCount;
}
/// <summary>
/// 分页数据库调用
/// </summary>
/// <param name="page_index"></param>
/// <returns></returns>
public static List<Spots> SelectSpotsMesg(int page_index)
{
int num = page_index * 2;
string str = "select top 2 * from Spots where id not in(select top "+num+" id from Spots )";
DataSet ds = DBHelper.GetMesg(str);
List<Spots> lMesg = new List<Spots>();
if (ds.Tables[0].Rows.Count > 0)
{
foreach (DataRow row in ds.Tables[0].Rows)
{
lMesg.Add(InitSpots (row));
}
}
return lMesg;
}


其中又要调用DBhelper(这个类中我只写俩个方法,一个用来提取信息,返回值是DataSet,就是下面看到的这个,一个用来进行增删改查,返回值是布尔值,这俩个方法在任何项目中均可重复使用)类中的方法,如下:

/// <summary>
/// 从数据库提取信息
/// </summary>
/// <param name="str">sql语句 </param>
/// <returns></returns>
public static DataSet GetMesg(string str)
{
using (SqlConnection conn = new SqlConnection(strConn))
{
SqlCommand comm = new SqlCommand(str, conn);
conn.Open();
SqlDataAdapter sqlDa = new SqlDataAdapter(comm );
DataSet ds = new DataSet();
sqlDa.Fill(ds);
return ds;
}
}


这样方法和代码就都贴全了。

我当年写的时候都是在用控件,可是微软的控件都是服务器型的,我们如果都默认使用,岂不是很吃内存,再者,当年写程序,前后台一个人,光痛苦不说,还费力不讨好,整出来的东西不人不鬼,自己都觉得很囧。实现前后台分开写,由不同的人去完成,大家擅长做什么就做什么,是最好的方法。所以我找到了VICI,并且尽自己的力量翻译这些教材,对我个人,对大家都是一种帮助。

下面再来说说分页的思想,分页控件pagination已经给我们提供了样式,我们只需要关心的是当我们点击某一页数的时候他们要根据具体的页数去和数据库交互,这么交互了?写sql 语句可以,我在例子中也是这么写的。我一开始尝试用PagedDataSource来实现,后来失败了,如果各位有更好的方法,希望联系我,向各位学习了。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: