ASP. NET MVC5 PagedList paging example, mvc5pagedlist

ASP. NET MVC5 PagedList paging example, mvc5pagedlist

ASP. net mvc is currently ASP. NET Development in the lightweight Web development solution, in ASP. net mvc overview in this article, ASP has been introduced in detail.. net mvc and Web Forms and their application scenarios. Because ASP. net mvc is especially suitable for website development (Web Forms is more suitable for Business System Development), it has become the first framework for many website developers.

Here is a typical example (pagination of tables) to familiarize yourself with ASP. net mvc development. Development Environment: Windows 8.1 Enterprise Edition + VS2013 flagship edition + SQL Server 2014.

First, create an ASP. NET MVC5 application using the wizard of VS2013.

This application can run directly and provides some default functions (Registration and logon) and their own implementation sample code. developers can simply develop the application by referring to the code. By the way, VS2013 is very user-friendly and has been considered for developers.

1. modify Database Configuration

This is the default ASP. net mvc application, which is easy for development. We 'd better modify the database configuration. Open the Web. config file under the root directory of the project (note that it is not ~ /Views/under Web. config ).

Configure DefaultConnection:

<connectionStrings>    <add name="DefaultConnection" connectionString="uid=sa;pwd=123456;Data Source=192.168.0.4;         database=|DataDirectory|\StudentDB.mdf;Initial Catalog=StudentDB;Integrated Security=True"         providerName="System.Data.SqlClient" />  </connectionStrings>

As we need to develop a paging Demo, add:

<! -- Paging condition: number of records displayed on each page --> <add key = "pageSize" value = "8"/>

2. Create a Model

Generally, MVC applications are developed from the Model. Create a student model class under the Models folder of the project.

namespace MVC5PageDemo.Models{    public enum Sex    {        Female, Male    }    public class Student    {        public int ID { get; set; }        public string Name { get; set; }        public int Age { get; set; }        public Sex Sex { get; set; }        public double Score { get; set; }    }}

Ii. Create Data Operations

First, create a DAL directory under the root directory of the project. Create a StudentContext class under the DAL directory and let it inherit from DbContext. In this example, EF is used to perform database operations.

The created MVC5 application has introduced EF6.0 by default. You do not need to manage the NuGet package to install EF online.

The Code of StudentContext is as follows:

namespace MVC5PageDemo.DAL{    public class StudentContext : DbContext    {        public StudentContext() : base("DefaultConnection") { }        public DbSet<Student> Students { get; set; }    }}

We also need to use PagedList for paging, so we need to install it online. You can run the command on the Package Manager Console to install the SDK.

In this way, the required dll is automatically added to the project.

3. Create a Controller

In MVC development, there is a rule called: Convention is greater than configuration. That is, when the Controller is created, the class name ends with the Controller, So we create a Controller of StudentController.

Namespace MVC5PageDemo. Controllers {public class StudentController: Controller {// database context operation object private StudentContext db = new StudentContext (); public ViewResult Index (int? Page) {// student list var students = from s in db. Students select s; // page number int pageNumber = page ?? 1; // The number of int pageSize entries displayed per page = int. parse (ConfigurationManager. appSettings ["pageSize"]); // sort students = students by ID. orderBy (x => x. ID); // use the ToPagedList Extension Method to pagate IPagedList <Student> pagedList = students. toPagedList (pageNumber, pageSize); // pass the pagedList to View return View (pagedList );}}}

The above Code introduces the PagedList namespace.

using PagedList;

4. Create a View

Right-click the Index method in the StudentController and choose "add view" from the shortcut menu. (compile the project first. Otherwise, the view may not be properly added ).

The new ~ /Student/Index View File changed:

@ Model PagedList. IPagedList <MVC5PageDemo. Models. Student> @ using PagedList. Mvc; <link href = "~ /Content/PagedList.css "rel =" stylesheet "/> <table class =" table "> <tr> <th> name </th> <th> age </th> <th> gender </th> <th> score </th> </tr> @ foreach (var item in Model) {<tr> <td> @ Html. displayFor (modelItem => item. name) </td> <td> @ Html. displayFor (modelItem => item. age) </td> <td> @ Html. displayFor (modelItem => item. sex) </td> <td> @ Html. displayFor (modelItem => item. score) </td> </tr >}</table> @ Model on each page. pageSize record, total @ Model. pageCount page, the current @ Model. pageNumber page @ Html. pagedListPager (Model, page => Url. action ("Index", new {page }))

5. Prepare test data

Create the Initializer directory under the root directory of the project, create a StudentInitializer class in it, and inherit from System. Data. Entity. DropCreateDatabaseAlways <StudentContext>.

Namespace MVC5PageDemo. initializer {public class StudentInitializer: System. data. entity. dropCreateDatabaseAlways <StudentContext> {protected override void Seed (StudentContext context) {List <Student> students = new List <Student> (); for (int I = 1; I <40; I ++) {Student student = new Student (); student. ID = I; student. name = "Zhang" + I; student. age = 10 + I; student. sex = I % 2 = 0? Sex. female: Sex. male; student. score = 60 + I; students. add (student);} context. students. addRange (students); context. saveChanges ();}}}

Add the following configuration under the entityFramework node of Web. config:

 <contexts>    <context type="MVC5PageDemo.DAL.StudentContext,MVC5PageDemo">       <databaseInitializer type="MVC5PageDemo.Initializer.StudentInitializer,MVC5PageDemo"/>    </context> </contexts>

MVC5PageDemo. DAL. StudentContext is the namespace name + class name. The MVC5PageDemo after the comma is the name of the dll file where the StudentContext class is located. The configuration of databaseInitializer under the context node is the same.

The above completes the development of pagination tables based on ASP. NET MVC5.

Final: