vici mvc 开发事例——调用ajax实现分页
2011-04-26 00:20
387 查看
在这篇博文中,我们会用到jquery 分页插件pagination,vici 自带了调用ajax的方法,我们抛弃以前用控件的习惯,来自己写一个分页后台。
首先我来讲一下这个分页插件:
参数:
下面我建一个htm,在VICI就是模版文件
例如:recommend.htm
对应的我们要在Controller中建立一个同名的控制器
例如:recommend.cs
mvc的优点就是代码的一致性和重用性高,我为了简化代码量编写了,数据库交互类,这里边叫DBhelper,和数据层调用类DataServer,在控制器类中我们要调用DataServer类中一些方法,如下:
其中又要调用DBhelper(这个类中我只写俩个方法,一个用来提取信息,返回值是DataSet,就是下面看到的这个,一个用来进行增删改查,返回值是布尔值,这俩个方法在任何项目中均可重复使用)类中的方法,如下:
这样方法和代码就都贴全了。
我当年写的时候都是在用控件,可是微软的控件都是服务器型的,我们如果都默认使用,岂不是很吃内存,再者,当年写程序,前后台一个人,光痛苦不说,还费力不讨好,整出来的东西不人不鬼,自己都觉得很囧。实现前后台分开写,由不同的人去完成,大家擅长做什么就做什么,是最好的方法。所以我找到了VICI,并且尽自己的力量翻译这些教材,对我个人,对大家都是一种帮助。
下面再来说说分页的思想,分页控件pagination已经给我们提供了样式,我们只需要关心的是当我们点击某一页数的时候他们要根据具体的页数去和数据库交互,这么交互了?写sql 语句可以,我在例子中也是这么写的。我一开始尝试用PagedDataSource来实现,后来失败了,如果各位有更好的方法,希望联系我,向各位学习了。
首先我来讲一下这个分页插件:
$("#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 | 回调函数 | 默认无执行效果 |
例如: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来实现,后来失败了,如果各位有更好的方法,希望联系我,向各位学习了。
相关文章推荐
- vici mvc开发第五篇——调用ajax
- IntelliJ IDEA中ajax开发实现分页查询示例
- IntelliJ IDEA中ajax开发实现分页查询
- 前端用的模块化开发requireJs分页功能(数据是ajax调用所得)
- javascript 实现ajax调用下的动态分页脚本
- asp.net+Ajax 文本文件静态分页实现代码
- 用Extjs实现分页自动加载数据的Ajax实现
- AJAX实现无刷新分页(三层\存储过程\WebService\AJAX\Jquery) .
- ajax+js+dom+php+mysal实现仿百度、Google的超强分页
- iOS开发——高级技术&调用地图功能的实现
- ajax两个网页实现完美的 分页功能
- jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
- jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
- JQuery+Ajax实现数据查询、排序和分页功能
- 基于Metronic的Bootstrap开发框架经验总结(16)-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
- Android 开发 调用图库选择图片实现和参数详解
- Bootstrap Paginator分页插件+ajax 实现动态无刷新分页
- iOS开发:调用系统自带相机以及获取相册照片的功能实现
- ajax 笔记--不用刷新实现数据的分页显示 2 (下)