MVC+EasyUI+三层新闻网站建立 分页查询数据功能(七)

MVC新闻网站建立,完成分页查询数据功能。

1、在Model里面建立NewInfo(里面存放的是新闻信息的实体信息)

然后在DAL层中建立NewInfoDal (里面存放对新闻信息的操作)

写入分页查询的代码

/// <summary>
 /// 分页查询
 /// </summary>
 /// <param name="start">分页开始条数</param>
 /// <param name="end">分页结束条数</param>
 /// <returns>返回查询到的list集合</returns>
 public List<NewInfo> GetPageEntityList(int start,int end)
 {
 string sql = "select * from(select row_number()over(order by id)as num,*from T_News)as t where t.num>=@start and t.num<=@end";
 SqlParameter[] pms = {
   new SqlParameter("@start",SqlDbType.Int),
   new SqlParameter("@end",SqlDbType.Int),
   };
 pms[0].Value = start;
 pms[1].Value = end;
 DataTable dt = SqlHelper.ExcuteDataTable(sql,CommandType.Text,pms);
 List<NewInfo> newList = null;
 if (dt.Rows.Count>0)
 {
 newList = new List<NewInfo>();
 NewInfo newinfo = null;
 foreach (DataRow item in dt.Rows)
 {
  newinfo = new NewInfo();
  LoadEntity(item,newinfo);
  newList.Add(newinfo);
 }
 }
 return newList;
 }
 /// <summary>
 /// 查询出页面条数
 /// </summary>
 /// <returns></returns>
 public int GetRecordCount()
 {
 string sql = "select count(*) from T_News";
 int count = Convert.ToInt32(SqlHelper.ExecuteScalar(sql,CommandType.Text));
 return count;
 }

在BLL层中建立NewInfoServices(里面存放对新闻信息的逻辑处理)

 DAL.NewInfoDal NewInfoDal = new DAL.NewInfoDal();
 /// <summary>
 /// 分页查询数据
 /// </summary>
 /// <param name="pageIndex">当前页码值</param>
 /// <param name="pageSize">一个多少条数据</param>
 /// <returns></returns>
 public List<NewInfo> GetPageEntityList(int pageIndex, int pageSize)
 {
 int start = (pageIndex - 1) * pageSize + 1;
 int end = pageSize * pageIndex;
 return NewInfoDal.GetPageEntityList(start,end);
 }
 /// <summary>
 /// 查询出页面的记录数
 /// </summary>
 /// <returns></returns>
 public int GetRecordCount()
 {
 return NewInfoDal.GetRecordCount();
 }

我们把新闻管理的url指定为/NewInfo/Index

那么就要新建NewInfo控制器  Index视图就是新闻管理页面的主页了。

新闻管理主页的布局很简单就是一个表格,所以就先在body里面写了一表格

<body>
 <div>
 <table id="tt"></table>
 </div>
</body/>

这里用到的是easyui的框架,所以先引用文件。

然后就是通过写js代码来显示出表格的行和列

 <script type="text/javascript">
 $(function () {
 //初始化表格
 initTable();
});

 //初始化表格
 function initTable() {
 $("#tt").datagrid({
 //指向一个地址,当表格加载完成后自动请求该地址
 //自动向后台发送 rows 当前页多少条数据 page:当前页
 //要求返回的数据json对象 {total:200,rows:[{},{}]}
 url: '/NewInfo/ShowNewsList',
 title: "新闻管理",
 fitColumns: true,
 height: $(window).height()-10,
 idField: 'Id', //后台返回数据中的主键列。一定注意大小写。
 loadMsg: "正在加载新闻信息........",
 pagination: true, //启用分页
 singleSelect: true, //只允许选中一行
 pageSize: 10, //一页默认多少条
 pageNumber: 1, //默认页
 rownumbers: true,//行号
 pageList: [10, 20, 30], //允许一页多少条数据
 queryParams: {}, //异步请求可以额外传递的数据
 columns: [[
 { field: 'ck', checkbox: true, align: 'left', width: 50 }, // 设置cheakbox
 { field: 'Title', title: '标题', width: 120 },
 { field: 'SubDateTime', title: '发布时间', width: 80, formatter: ChangeDateFormat, },
 { field: 'Author', title: '作者', width: 80 },

  {
  field: 'operate', title: '操作', align: 'center', width: $(this).width() * 0.1,
  formatter: function (value, row, index) {
  var str = "";
  str += '<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" name="detail" id="detail" class="easyui-linkbutton" onclick="showDetail('+row.Id+')"></a>';
  str += '      ',
  str += '<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" name="update" id="update" class="easyui-linkbutton" onclick="updateNewInfo(' + row.Id + ')" ></a>';
  str += '      ',
  str += '<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" name="delete" id="delete" class="easyui-linkbutton" onclick="deleteNewInfo(' + row.Id + ')" ></a>';
  return str;
  }
  }

 ]],

 onLoadSuccess: function (data) {
  $("a[name='detail']").linkbutton({ text: '详情', plain: true, iconCls: 'icon-more' });
  $("a[name='update']").linkbutton({ text: '编辑', plain: true, iconCls: 'icon-edit' });
  $("a[name='delete']").linkbutton({ text: '删除', plain: true, iconCls: 'icon-cancel' });
  ////点击详情按钮
  //clickDetail();
 },

 toolbar: [{
  id: 'btnAdd',
  text: '添加',
  iconCls: 'icon-add',
  handler: function () {
  addBtnClick(); //添加新闻
  }
 }],
 });
 }

要完成数据的显示则还需要查询数据库。

根据  url: '/NewInfo/ShowNewsList',  所以需要在NewInfo控制器下建立ShowNewsList方法

 /// <summary>
 /// 分页展示数据
 /// </summary>
 /// <returns></returns>
 public JsonResult ShowNewsList()
 {
 //要求返回的数据json对象 {total:200,rows:[{},{}]}
 int pageSize = int.Parse(Request["rows"]??"10");
 int pageIndex = int.Parse(Request["page"]??"1");
 List<NewInfo> newInfoList= NewInfoBll.GetPageEntityList(pageIndex, pageSize);
 //查询所有数据
 var allNews = NewInfoBll.GetRecordCount();
 //把totle和rows:[{},{}]一起返回
 //先建立一个匿名类
 var dataJson = new { total = allNews, rows = newInfoList };
 var json = Json(dataJson, JsonRequestBehavior.AllowGet);
 return json;
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2017-07-12

ASP.NET MVC5 实现分页查询的示例代码

对于大量数据的查询和展示使用分页是一种不错的选择,这篇文章简要介绍下自己实现分页查询的思路. 分页需要三个变量:数据总量.每页显示的数据条数.当前页码. //数据总量 int dataCount; //每页显示的数据条数 int pageDataCount; int pageNumber; 根据数据总量和每页显示的数据条数计算出总页数,根据当前页码和每页显示的数据条数计算出从数据库中读取数据的起始行号和结束行号. //总页数 int pageCount = (int)Math.Ceiling(d

MVC+EasyUI+三层新闻网站建立 后台登录界面的搭建(二)

新闻网站建立,后台登录界面的搭建 首先我们在Controllers里面新添加一个控制器就叫LoginController,右键点击Controllers添加控制器就可以了(注意后面一定是Controller结尾,这是一种约定) 其次:右键点击index建立Index视图.(不选择使用母版页) 现在我们就可以在Index视图中设计我们的登录页面了. 这里需要我们引入几个Css样式和JS文件 简单的进行登录界面的布局 <html> <head> <meta name="

asp.net中gridview的查询、分页、编辑更新、删除的实例代码

1.A,运行效果图 1.B,源代码/App_Data/sql-basic.sql 复制代码 代码如下: use mastergoif exists(select * from sysdatabases where name='db1')begin    drop database db1endgocreate database db1gouse db1go-- ================================-- ylb:1,类别表-- =====================

一步步打造简单的MVC电商网站BooksStore(1)

一步步打造一个简单的 MVC 电商网站 - BooksStore(一) 本系列的 GitHub地址:https://github.com/liqingwen2015/Wen.BooksStore <一步步打造一个简单的 MVC 电商网站 - BooksStore(一)> <一步步打造一个简单的 MVC 电商网站 - BooksStore(二)> <一步步打造一个简单的 MVC 电商网站 - BooksStore(三)> <一步步打造一个简单的 MVC 电商网站 -

.net搜索查询并实现分页实例

前台: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="分页.aspx.cs" Inherits="分页练习.分页" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

MVC+EasyUI+三层新闻网站建立 实现登录功能(四)

MVC新闻网站建立,实现登录功能 首先在数据库中建立一张UserInfo表. 注:以下讲的这些可以用动软代码生成器直接生成,但是对于新手来说还是动手敲一下的好,了解以下实现的过程. 然后在Model中建立UserInfo的实体层. public class UserInfo { public int Id { get; set; } public string UserName { get; set; } public string UserPwd { get; set; } public st

一步步打造简单的MVC电商网站BooksStore(2)

一步步打造一个简单的 MVC 电商网站 - BooksStore(二) 本系列的 GitHub地址:https://github.com/liqingwen2015/Wen.BooksStore <一步步打造一个简单的 MVC 电商网站 - BooksStore(一)> <一步步打造一个简单的 MVC 电商网站 - BooksStore(二)> <一步步打造一个简单的 MVC 电商网站 - BooksStore(三)> <一步步打造一个简单的 MVC 电商网站 -

MVC+EasyUI+三层新闻网站建立 主页布局的方法(五)

MVC新闻网站建立,实现主页布局. 首先建立Home控制器,然后再建立Index视图. 和前面登录页面一样也需要引入几个文件. 接着就是找到你下载的easyui文件夹里面的demo里面的layout里面的full 浏览器运行后右键查看代码把里面的body里面的代码复制到Index视图的body里面去.没找到的可以直接复制下面的代码. <body class="easyui-layout"> <div data-options="region:'north',

MVC+EasyUI+三层新闻网站建立 建站准备工作(一)

这一次的项目是建立一个小型的新闻发布网站,所以就不需要用一些高大上的框架.三层+MVC+easyUI就足够了. 首先:搭建起项目框架 其次:到easyui官网去下载easyUI 我这里用的是我在很久的项目中用过的版本jquery-easyui-1.5.2 下载链接:http://www.jeasyui.com/download/list.php 最后就是把easyui引入到项目中去. 现在Content文件夹下建立一个叫EasyUi的文件夹,把需要用到的文件复制到其中,具体如下图所示: 以上就是

MVC+EasyUI+三层新闻网站建立 验证码生成(三)

我们在项目中的NewWeb.Common类库里面建立一个类用来存放生成验证码的代码. 这里我类的名字叫 ValidateCode 生成验证码(ValidateCode)类的代码: using System; using System.Collections.Generic; using System.Drawing; using System.Drawing.Drawing2D; using System.Drawing.Imaging; using System.IO; using Syste

MVC+EasyUI+三层新闻网站建立 tabs标签制作方法(六)

MVC新闻网站建立,完成tabs标签的制作. 首先对 Center 进行一个简单的布局 <!--------------中间布局开始----------------> <div data-options="region:'center',title:'Center'" > <div class="easyui-tabs" style="width:700px;height:250px" fit="true&

MVC+EasyUI+三层新闻网站建立 详情页面制作方法(八)

MVC新闻网站建立,完成详情页面的制作. 详情就是点击详情后弹出一个div,所以需要现在boby里面先建立一个div <div id="detailDiv"> <table> <tr> <td>标题:</td> <td><input class="easyui-textbox" style="width:250px;height:32px" id="title

MVC+EasyUI+三层架构简单权限管理系统

闲来无事把以前做的一个项目整理了一下,今天拿出来跟大家分享,交流和探讨.希望大家多多指正. 一.项目架构图 其中Entity为模型实体层类库:DAL为数据访问层类库,主要负责数据库操作:BLL为业务逻辑类库,Common为公共帮助类库,WebUI为用户层. 非Web层的所有实体类模板都已在项目中创建好,直接用动软生成就可以了. 二.数据库相关表 数据库文件放在web层的DB目录中 三.功能界面 *整个项目的样式都采用的是easyui自带的bootstrap样式.项目中涉及到的相关js验证规则,都

Spring MVC中使用Google kaptcha验证码的方法详解

前言 众所周知验证码是抵抗批量操作和恶意登录最有效的方式之一,我们在每天或许都会遇到,验证码从产生到现在已经衍生出了很多分支.方式.google kaptcha 是一个非常实用的验证码生成类库. 通过灵活的配置生成各种样式的验证码,并将生成的验证码字符串放到 HttpSession 中,方便获取进行比较. 本文描述在 spring mvc 下快速的将 google kaptcha 集成到项目中(单独使用的话在 web.xml 中配置 KaptchaServlet).下面话不多说了,来一起看看详细