Shulou(Shulou.com)06/03 Report--

This article to share with you is about ASP.NET VC +EF in the server side paging jqGrid and jquery Datatables precautions, Xiaobian think quite practical, so share to everyone to learn, I hope you can read this article after harvest, not much to say, follow Xiaobian to see it.

Always want to do a blog site, technical route is to use ASN. NET MVC5+EF6 (Code First)+ZUI+ various JQuery plug-ins, with this idea after the start of the UI, read a lot of bootstrap template, found that even if you use bootstrap or to write their own css style, are self-taught, the front end is really garbage, found a lot of UI on the Internet, the following is a variety of UI address, you need to see:

H-ui: www.h-ui.net/H-ui.admin.shtml, is a front-end Daniel made, imitating bootstrap, do UI suitable for Chinese Internet.

Amaze UI: http://amazeui.org/, Chinese HTML5 front-end framework is not compatible with the old version of IE, This I also see online IE10 above is good if you want to be compatible with IE8 official website said not very good.

ZUI: http://zui.sexy/ A Bootstrap-based deep customization open source front-end practice solution to help you quickly build modern cross-screen applications.

Finally chose ZUI, because it is Bootstrap custom to get started is also easy to point because I have also learned Bootstrap before the use of their own written DEMO feel good, I found a lot of templates are ready, many foreign, so the front end of their own garbage, it is also troublesome to change, do not give up, mainly their own garbage.

1. login interface

With the above method, I started to make a login interface myself:

Although I was rejected by the great gods in the technical group for a long time, I made it myself.

2. Selection of Forms

Sorry everyone, the above seems to have nothing to do with what to say, the next is the table selection, I am a very entangled person, really entangled, because ZUI only table style, not the kind with pagination total number of articles, set the number of pages per page, according to the founder of ZUI is, pagination these can be replaced with js pagination control, this is mainly to load data, this is their practice in the project results, But I still want a table with these features, so I want to find it on the Internet myself, find two, one is JQGrid and jquery Datatables, and then start to struggle with which one to use? Because I used jQuery EasyUI before, I chose JQGrid at first:

2.1 JQGgird implementation process under ASP.NET MVC:

Download js file on JQGird official website, official website address: www.trirand.com/blog/, seems to have been updated on June 9, 2016, DEMO address: www.guriddo.net/demo/bootstrap/ Bootstrap style, another Chinese demo website: blog.mn886.net/jqGrid/ and then start dry goods:

1. Create a JQGridController:

2. Create an index page and introduce the corresponding js and CSS styles:

3. View inserted parameters: rows is the number of records on a page;page is the page number;

4. View the format of data return: page number;records: total number of data;rows: data set;total: total number of pages

5. Then, he followed suit and created a data format like this in the background:

5.1: pagination query method, using the query how many, skip how many ideas:

6. Front HTML page call and js part: Need to explain one point is: http://www.guriddo.net/demo/bootstrap/DEMO instance using php background data format is datatype: "jsonp"; and I here MVC return to change datatype:"json", for this problem I got a long time, pain.

7. Display effect:

After I saw the effect, I began to feel uncomfortable. Why would there be a blank place on the left? I felt uncomfortable watching it. When I loaded too much data, I found that it was originally reserved for scrolling bars.

Then I was conflicted, I didn't like this style anymore, there was the following jquery Datatables

2.2 jquery Datatables implementation process under ASP.NET MVC:

Also find the official website online: Chinese official website: datatables.club/ (it is a Daniel who used jquery Datatables a long time ago and found that there was very little information in Chinese, so he contacted the foreign author and translated it into Chinese, and admired this kind of person very much); English official website: datatables.net/examples/index

1. First create DataTabController:

2. Create an index page and introduce the corresponding js and CSS styles:

3. View official website instance to find parameters, and return data format:

Server-side paging demo: datatables.net/examples/server_side/jsonp.html

datatables need to configure "serverSide": true to enable server-side mode; key parameters: start is the number from which to start;length is the number of pages;draw is to draw counters. This is used to ensure that Ajax returns the correct response from the server (Ajax is asynchronous, so the order of return is indeterminate). Request to return after the server receives this parameter (see below for details); for specific parameters, please query the official website address datatables.club/manual/server-side.html

Return data format: data for dataset;draw: for draw counter;recordsFiltered: for number of filtered;recordsTotal: for total number of

4. And then I started writing brazenly thinking I would use something more like JQGrid:

5. HTML and JS code:

It turned out to be wrong:

It took a long time to get it out: because the format returned by my query data is the same as that in DEMO, I began to be depressed:

Summary:

After the guidance of the gods in the group, he finally found the problem:

Because the parameter passed to the background in datatables is start, which means it starts from the page number different from the page number of jqgrid, the first time it passes to the background is 0, starting from the 0 th, when paging: passing 0 to the past minus 1 is negative, so the error is reported.

Therefore, he made a modification:

Make a judgment on pagesize first

Also changed the number of skipped entries setting when paging

Then restart the test page:

And that's where the data comes in.

The above is ASP. NETMVC +EF in the service side paging using jqGrid and jquery Datatables precautions, Xiaobian believes that some knowledge points may be our daily work will see or use. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.