Mvc5+ef6 Getting Started complete tutorial VII

In this article we add some new features for the table display.

We've already explained the data in the table before, and now we've added three common features:

Sort, filter, and page the displayed results.

Article outline

• Theoretical basis/pre-preparation
• Detailed steps
• Summarize

Pre-Preparation – add test data by applying previous styles

We have modified the previous viewsàaccountàindex.cshtml to complete today's example.

Before the interface style is modified:

The following changes are made to the viewsàaccountàindex.cshtml:

1. Apply Layout page _layoutadmin.cshtml

2. Delete all except the body of the HTML part, leaving only the text content, run this page.

Make some small adjustments to the style, and eventually become the following style.

(Adjust the style of the steps slightly, you can directly view the source code)

Create new two test data with create new to prepare for the next pagination, followed by one page for each of the 3 bars.

At present the preparation work is OK, below starts today the function operation.

Detailed steps

First, the title Added link sorting function

1. To open Controllersàaccountcontroller.cs, modify the index method as follows

2. Open the viewsàaccountàindex.cshtml and replace the header content.

@Html. ActionLink ("UserName", "Index", new {SortOrder = Viewbag.namesortparm})

Click on the title to switch between ascending and descending order.

Second, add the name search function

Continue to modify the index method to increase the conditional filtering feature. The part of the change is shown in the yellow background.

We added a searchstring parameter and added a WHERE clause to filter the name.

Now let's go to viewsàaccountàindex.cshtml. Add a text box to pass this filter value.

Now test it and run this page to see that the results match our expectations.

OK, here's the last function, paging.

Third, add paging function (using PAGEDLIST.MVC)

Installing PAGEDLIST.MVC

Open the package Manager Console to ensure that the package source is nuget.org, enter

Install-package PAGEDLIST.MVC

Add a declaration first in the AccountController.cs.

Using Pagedlist;

Modify the Index method

The index is increased by the following highlight (I only intercept the beginning and end of the section)

We have added two incoming parameters CurrentFilter and page

All incoming values are null when the page is first displayed or when no page number or sort is clicked

When you click the paging link, the page number is passed in.

The current sort order needs to be passed in because the same order needs to be maintained when paging.

Viewbag.currentsort = SortOrder;

Another property, Viewbag.currentfilter, provides the current filter string for the view.

This value is used to maintain the filter condition unchanged when paging, and must be re-displayed in the text box when paging. If the filter condition changes when the child is paged, the page must be reset to 1 because the new filter condition causes different data to be displayed. SearchString is not NULL when filter conditions change

In the end, Topagedlist passes a collection of Query results transformation component pages to the view.

Note

?? The operator is called null-coalescing operator.

This operator defines a default value for nullable types. (page?? 1) indicates that if page is null returns 1, the value of the page is returned.

Let's look directly at the following example:

Add pagination display and feature links in view

Main additions/Modifications to the following sections:

The @model declaration at the top specifies that view obtains a Pagedlist object.

(It's a list object, see the Notes section)

Add @using Pagedlist.mvc, get related paging helper

Overloaded BeginForm is get mode.

As we mentioned earlier in this article, if you do not involve updating data operations, we recommend the Get method.

The text box is initialized to CurrentFilter.

This allows you to see the current filter condition when you switch to the next page.

The title link of the table also passes the currentfilter over.

Finally, add the current number of pages and the total quantity similar to page x in x format.

Displays page 0 of 0 if no pages are displayed

In this case, page number>page count.

According to the index method, it can be learned that PageNumber is 1,model.pagecount 0.

The paging button is displayed by Pagedlistpager Helper.

Final result

Second page

Legacy issues

Finally did an experiment, found that there is a problem, know the park friends to help answer under.

It's no problem sorting username.

When I sort by email, if I add the condition directly to the expression, it's OK, like.

Reverse row

If you do this in the following way

Or

The following results appear in both the positive and reverse order:

Summary of the problem, the following two kinds of writing, the second does not meet the expectations.

Mvc5+ef6 Getting Started complete tutorial VII