With jsRender, my mom no longer needs to worry about the mess of using jq to splice DOM stitching, the page is neat, and other partners are not so hard to read the code. jsrenderjq

With jsRender, my mom no longer needs to worry about the mess of using jq to splice DOM stitching, the page is neat, and other partners are not so hard to read the code. jsrenderjq
Preface

Coincidentally, in the afternoon, I made another page, and then made a normal paging list. I still use PagedList as usual in the MVC environment. mvc ajax does not refresh the page, so the problem arises. slides is used for carousel images in the List data. js plug-in, carousel images also use pagination. The page number of the first page of data carousel images can be used normally. If the data list is switched to the second page, the page number of the carousel image cannot be used normally. In fact, PagedList is used. the style file that comes with MVC has been used with slides. j built-in style file conflict, I also specifically modified slides. js style files, however, are useless, so that they are depressing to fly...

 

1. Paging writing based on MVC PagedList. MVC

Var currentPage = 1; $ (function () {// The toolbar binds the page number currentPage = $ ('. pagination li. active '). text (); currentPage = $ ('. pagination li. active '). text (); $ ('body '). on ('click ','. pagination li: not (". active ") ', function (e) {var txtnum = $ (this ). text (); if (parseInt (txtnum)> 0) {DoSearch (txtnum);} else if (txtnum = '»') {DoSearch (parseInt (currentPage) + 1);} else if (txtnum = '«') {DoSearch (parseInt (CurrentPage)-1);} else if (txtnum = '«') {DoSearch (1);} else if (txtnum = '»»') {var pagenum = $ (this ). find ('A '). attr ("href "). replace (/[^ \ d] +/gi, ''); DoSearch (pagenum);} return false ;});}); // list compound query condition function DoSearch (page) {var item ={}; if (page) {item. pageIndex = page;} PostData (item) ;}// this method is used for AJAX paging effect. It uses the data carried by the page to replace function PostData (objdata) cyclically) {$. post ('/Home/Index? Rdm = '+ Math. random (), objdata, function (d) {// 1. Replace the list data on the page $ (". contentajax "pai.html ($ (d ). find (". contentajax "pai.html (); // 2. Replace the page number $ (". ajaxpage ").html ($ (d ). find (". ajaxpage ").html (); currentPage = $ ('. pagination li. active ', $ (d )). text ();});}

　　

2. When I was depressed, I saw a jq paging plug-in from a friend in the garden.

Http://www.cnblogs.com/Jusoc/p/4757079.html#3254097 this is his article, he mentioned in the Article this jq paging plug-in, plug-in style is modeled after bootstrap, the API is more convenient to use.

 

3,

4. coding should be used to practice the theory and discover js template plug-ins.

I wrote a demo Based on the usage and API view described in this friend's article. I found that there was no error in the program and there was no data. He mentioned that the remote Parameter contains three events: beforeSend, success, and complete. The comment is written to the success to process the data returned by the background, that is, a json string. The json string must contain the total number of data (total or count ). I saw in the demo that these three events did not work. I don't know if this guy has practiced them. So I checked the plug-in source code and found that there was only one callback event in the source code, here, the returned data is processed. OK solves the data return problem.

The following problem occurs again. Because it is paging, it is still a normal requirement. At this time, I find that the usual practice is to directly foreach in callback, various concatenated strings, single quotes, and double quotation marks. I can't fight for the plug-in. I went on to check the DEMO of this plug-in. The pageIndex of this plug-in started from 0, and many plug-ins started from 1, so the pages based on linq are generally written like this :( (pageIndex-1) * pageSize), then if it is 0, then do not subtract. A concept below the API attracted my attention:Describes how to present the returned data. It introduces a jq template plug-in. You only need to define the rendering template and render the data in a line of js.. In fact, the js template is not a stranger, but it has never been used before. I think jq is awesome. I didn't expect this template to be so attractive. To a certain extent, the idea of this template is like the data operation method of Angularjs.

I wrote the DEMO again over the past few days. Although the DEMO is simple, it brings a lot of GAINS to me. I will refactor our project and promote the front-end to try this method.

 

5. Handling Code in key areas

1 @ {2 ViewBag. Title = "Index"; 3 Layout = "~ /Views/Shared/_ Layout. cshtml "; 4} 5 <style> 6 h2 7 {8 margin-left: 80px; 9} 10 </style> 11 <link href = "~ /Content/bootstrap.css "rel =" stylesheet "/> 12 <link href = "~ /Content/jquery.pagination.css "rel =" stylesheet "/> 13 
 
 
 public ActionResult Index()        {            return View();        }        public JsonResult AjaxList()        {            int pageIndex = Convert.ToInt16(Request["pageIndex"]);            int pageSize = Convert.ToInt16(Request["pageSize"]);            IList<Product> list = new List<Product>()            {                new Product{ID=1,Name="iphone6 plus",Price=6999},                new Product{ID=2,Name="iphone6",Price=4999},                new Product{ID=3,Name="MX5",Price=1799},                new Product{ID=4,Name="MEILAN NOTE",Price=799},                new Product{ID=5,Name="XIAOMI 2S",Price=1299}            };            IList<Product> modelList = list.Skip(pageIndex * pageSize).Take(pageSize).ToList();            int count = list.Count;            var strJson = new JsonResult();            strJson.Data = new            {                modelList=modelList,                total=count            };            strJson.JsonRequestBehavior = JsonRequestBehavior.AllowGet;            return strJson;        }
 
Summary
Although it was a paging demo, but in the process of using this paging plug-in, we found the js template plug-in, which is simple in writing and a lot of page jq is concise. I have also written a page based on MVC Angularjs. Make a lot of comparisons and use them as needed.
Download link: http://yunpan.cn/cmfE7xgsWqqKV access password 4d30