MVC + EasyUI + layer-3 news website data query by PAGE (7), mvceasyui
Create an MVC news website to query data by page.
1. Create NewInfo in the Model (which stores the entity information of news information)
Then, create NewInfoDal In the DAL layer (which stores operations on news information)
Code for writing paging Query
/// <Summary> /// query by PAGE /// </summary> /// <param name = "start"> Number of start entries by page </param> /// <param name = "end"> Number of end pages </param> // <returns> returns the queried list set </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> /// query the number of page entries /// </summary> /// <returns> </returns> public int GetRecordCount () {string SQL = "select count (*) from T_News"; int count = Convert. toInt32 (SqlHelper. executeScalar (SQL, CommandType. text); return count ;}
Create NewInfoServices In The BLL layer (which stores the logic processing of news information)
DAL. newInfoDal = new DAL. newInfoDal (); /// <summary> /// query data by PAGE /// </summary> /// <param name = "pageIndex"> current page number </param> /// <param name = "pageSize"> how many pieces of data </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> /// query the number of records on the page /// </summary> /// <returns> </returns> public int GetRecordCount () {return NewInfoDal. getRecordCount ();}
We specify the news management url as/NewInfo/Index.
The Index view of the NewInfo controller is the homepage of the news management page.
The layout of the news Management Homepage is simply a table, so a table is first written in the body.
<body> <div> <table id="tt"></table> </div></body/>
The easyui framework is used here, so the file is referenced first.
Then, the row and column of the table are displayed by writing js Code.
<Script type = "text/javascript" >$ (function () {// initialize the table initTable () ;}); // initialize the table function initTable () {$ ("# tt "). datagrid ({// point to an address. When the table is loaded, the address is automatically requested. // The number of data pages on the current page of rows is automatically sent to the background: json object {total: 200, rows: [{},{}]} url: '/NewInfo/shownewslist', title: "news management ", fitColumns: true, height: $ (window ). height ()-10, idField: 'id', // The primary key column in the background returned data. Note the case sensitivity. LoadMsg: "loading news ........ ", pagination: true, // enable pagination singleSelect: true, // only one pageSize row is allowed: 10, // The default number of pagenumbers on a page: 1, // The number of rows page rownumbers: true, // The row number pageList: [10, 20, 30], // The number of data records allowed for one page queryParams :{}, // The columns of data that can be passed in asynchronous requests: [[{field: 'ck ', checkbox: true, align: 'left', width: 50}, // set cheakbox {field: 'title', Title: 'title', width: 120}, {field: 'subdatetime', title: 'publication time', width: 80, formatter: ChangeDateFormat,}, {field: 'author ', title: 'author ', width: 80}, {field: 'operate', title: 'operation', align: 'center', width: $ (this ). width () * 0.1, formatter: function (value, row, index) {var str = ""; str + = '<a href = "#" rel = "external nofollow" name = "detail" id = "detail" class = "easyui-linkbutton" onclick = "showDetail ('+ row. id + ') "> </a>'; str + = '', str + = '<a href = "#" rel = "external nofollow" name = "update" id = "update" class = "easyui-linkbutton" onclick = "updateNewInfo ('+ row. id + ') "> </a>'; str + = '', str + = '<a href = "#" 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: 'details', plain: true, iconCls: 'icon-more'}); $ ("a [name = 'update']"). linkbutton ({text: 'edit', plain: true, iconCls: 'icon-edit'}); $ ("a [name = 'delete']"). linkbutton ({text: 'delete', plain: true, iconCls: 'icon-cancel'}); // click the details button // clickDetail () ;}, toolbar: [{id: 'btnadd', text: 'add', iconCls: 'icon-add', handler: function () {addBtnClick (); // Add news}],});}
To display the data, you also need to query the database.
According to the url: '/NewInfo/shownewslist', you need to create the ShowNewsList method under the NewInfo controller.
/// <Summary> /// display data by PAGE /// </summary> /// <returns> </returns> public JsonResult ShowNewsList () {// json object {total: 200, rows: [{},{}]} int pageSize = int. parse (Request ["rows"]? "10"); int pageIndex = int. Parse (Request ["page"]? "1"); List <NewInfo> newInfoList = NewInfoBll. getPageEntityList (pageIndex, pageSize); // query all data var allNews = NewInfoBll. getRecordCount (); // returns totle and rows: [{},{}] together. // first create an anonymous class var dataJson = new {total = allNews, rows = newInfoList}; var json = Json (dataJson, JsonRequestBehavior. allowGet); return json ;}
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
