MVC + EasyUI + layer-3 news website data query by PAGE (7), mvceasyui

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.