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

Most people do not understand the knowledge points of this article "how to use MvcPager in ASP.NET MVC", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use MvcPager in ASP.NET MVC" article.

one。 Pagination

First of all, we need to create an ASP.NETMVC project, but we won't go into details about how to create it.

Then we need to introduce the dll file of the control

I quoted the case directly under the official website.

Of course, you can also refer to it from the NuGet package

Find the project, right-click and you will have an administrative NuGet package. We will open it.

Type Webdiyer to find and install

Entity class

Article.cs

PublicclassArticle

{

[Display (Name= "article number")]

PublicintID {get;set;}

[Display (Name= "article title")]

[MaxLength (200)]

PublicstringTitle {get;set;}

[Display (Name= "article content")]

PublicstringContent {get;set;}

[Display (Name= "release date")]

PublicDateTimePubDate {get;set;}

[Display (Name= "author")]

[MaxLength (20)]

PublicstringAuthor {get;set;}

[Display (Name= "article source")]

[MaxLength (20)]

PublicstringSource {get;set;}

}

Cotroller

PublicActionResultAjaxPaging (intid=1)

{

Using (vardb=newDataContext ())

{

Varmodel=db.Articles.OrderByDescending (a = > a.PubDate) .ToPagedList (id,5)

/ / determine whether it is an AJAX request, and if it is true, return to the partial view

If (Request.IsAjaxRequest ())

ReturnPartialView ("_ ArticleTable", model)

ReturnView (model)

}

}

You can see that when we refer to this paging control, we no longer return List, but PagedList

The following ToPagedList (starting page, showing the number of entries per page), the starting page requires us to define intid=1 in this method

View:

@ modelPagedList

@ usingWebdiyer.WebControls.Mvc

/ / this ID is the ID that we need to update in paging.

@ Html.Partial ("_ ArticleTable", Model)

@ sectionscripts

{

@ {Html.RegisterMvcPagerScriptResource ();}

/ / this sentence is necessary to register MVCPager, if it is not possible to cause the Ajax request to become unresponsive

}

The collection we refer to in the view is also PagedList.

@ sectionscripts

{

@ {Html.RegisterMvcPagerScriptResource ();}

/ / this sentence is necessary to register MVCPager, if it is not possible to cause the Ajax request to become unresponsive

}

Note: our view uses the layout page layout by default

We cannot make the layout page Null@ {layout=null}, which will invalidate our asynchronous paging, and our Requset.isAjaxRequset () block to the controller will always be false

Create a partial view:

After creating the distribution page, the tables that we need to display

_ ArticleTable:

@ modelPagedList

@ usingWebdiyer.WebControls.Mvc

Serial number

@ Html.DisplayNameFor (model= > model.Title)

@ Html.DisplayNameFor (model= > model.PubDate)

@ Html.DisplayNameFor (model= > model.Author)

@ Html.DisplayNameFor (model= > model.Source)

@ {inti=0;}

@ foreach (variteminModel)

{

@ (Model.StartItemIndex+i++)

@ Html.DisplayFor (modelItem= > item.Title)

@ Html.DisplayFor (modelItem= > item.PubDate)

@ Html.DisplayFor (modelItem= > item.Author)

@ Html.DisplayFor (modelItem= > item.Source)

}

@ Ajax.Pager (Model,newPagerOptions {PageIndexParameterName= "id", ContainerTagName= "ul", CssClass= "pagination", CurrentPagerItemTemplate= "{0}", DisabledPagerItemTemplate= "{0}", PagerItemTemplate= "{0}"}) .AjaxOptions (a = > a.SetUpdateTargetId ("articles"))

Among them, it should be noted that:

PageIndexParameterName is the parameter id in our controller, which needs to be consistent.

We need to use @ Ajax.Pager () instead of @ Html.Pager

AjaxOptions (a = > a.SetUpdateTargetId ("articles")) on the official website means the method used to build MvcAjaxOptions objects.

Let's take another look.

MvcAjaxOptions object

UpdateTargetId: gets or sets the ID of the DOM element to be updated with the server response. This parameter ID allows us to div the Id in the view

Above we use AjaxOptions (a = > a.SetUpdateTargetId ("articles"))

How to use the MvcAjaxOptions object

@ Ajax.Pager (Model,newPagerOptions {PageIndexParameterName= "id", ContainerTagName= "ul", CssClass= "pagination", CurrentPagerItemTemplate= "{0}", DisabledPagerItemTemplate= "{0}", PagerItemTemplate= "{0}"}, newMvcAjaxOptions {UpdateTargetId= "RecordList"})

Through the above, our asynchronous paging has already been done.

two。 Check box

We need to keep the previous check box when we click on the previous page or the next page

It doesn't change the state because we click on the previous page or the next page.

The premise of selecting the check box is that we need to refresh asynchronously, only refresh the table, not refresh the page.

On this paging control, there are objects we need.

MvcAjaxOptions object

Let's take a look at the properties we need to use in this object. There are only two properties we can use:

OnBegin: gets or sets the name of the JavaScript function to be called immediately before the page is updated.

OnSuccess: gets or sets the JavaScript function to be called after the page has been successfully updated.

Code presents:

In paging, we need to add these two attributes to the MvcAjaxOptions, one is the js function called before updating the page (OnBegin), and the other is the JS function called after updating the page (OnSuccess)

@ Ajax.Pager (Model,newPagerOptions {

PageIndexParameterName= "id"

NumericPagerItemCount=5

CssClass= "pagination"

CurrentPagerItemTemplate= "{0}"

DisabledPagerItemTemplate= "{0}"

PagerItemTemplate= "{0}", Id= "bootstrappager"

}, newMvcAjaxOptions {OnBegin= "GetCheckbox ()", OnSuccess= "OnSuccess"}) .AjaxOptions (a = > a.SetUpdateTargetId ("RecordList") .SetDataFormId ("searchForm"))

GetCheckbox () function

/ / define an array to store the selected ID

Varselect=newArray

FunctionGetCheckbox () {

/ / .single is the class of the check box

$(".single") .each (function () {

/ / determine the status of the check box, if selected as true

If ($(this) .prop ('checked')) {

/ / determine whether the val () value of the selected check box exists in the array select

Varindex=$.inArray ($(this). Val (), select)

/ / if it does not exist,-1 is returned, and there is no write to the array.

If (index==-1) {

Select.push ($(this) .val ()

}

}

Else {

/ / if it is not checked, it may be unchecked. We need to determine whether the unselected $(this) .val () value of the current page is select in the array.

Varindex=$.inArray ($(this). Val (), select)

/ / if it exists, the subscript of the existing value in the array will be returned.

If (index > = 0) {

/ / delete the subscript value

Select.splice (index)

}

}

})

}

OnSuccess ()

FunctionOnSuccess () {

$(".single") .each (function () {

/ / when the update is successful, we need to determine whether the $(this) .val () of the check box of the current page exists in the array select

Varindex=$.inArray ($(this). Val (), select)

/ / return subscript if it exists

If (index > = 0) {

/ / console.log ("index=" + index+ ", select [Index] =" + select [index])

If the value of $(this) .val () is the same as the value of the subscript in the array, it is selected

If ($(this) .index () = = select [index]) {

$(this) .prop ('checked','checked')

}

}

})

}

In this way, the selection of check can be realized.

However, it should be noted that:

When I first loaded into the page, even if you selected a few check boxes, there was no data in the array

Because the function is triggered only when you click on the next page or the previous page.

So we also need to select a check box on the current page when we don't click.

When I enter this page and select the check box, I also need to select it when I click the button.

The above is about the content of this article on "how to use MvcPager in ASP.NET MVC". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, 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.