ASP. net mvc 2 getting started walkthrough 5 -- pagination

The first line is fast, as shown below:

Paging with ASP. net mvc is used on pages. You can click here to download and learn about the usage instructions. Or download the source code from here:/files/Ferry/vs2010/martijnboland-MvcPaging-515e582.zip

Decompress the package, open the solution, compile the mvcpaging project, find mvcpaging. dll in the debug/bin directory, and add it to the project (add reference ).

There is also a demo project in the solution that will help you use mvcpaging.

Now, let's take a look at how to rebuild ourCode.

1. Add reference

That's what I said above. If no (some) object is found during use, compile the project. Of course, the namespace must be referenced.

Ii. modify controller: newscontroller. CS

First, add a reference to the namespace:

Using Mvcpaging;

Modify the list method as follows:

Public Actionresult list ( Int ? Page)
{ // The number of records displayed on each page. 1 is set here.
Const   Int Defaultpagesize =   1 ;
Int Currentpageindex = Page. hasvalue ? Page. Value -   1 : 0 ;
Return View (db. cmsnews. orderbydescending (Model => Model. pubdate). tolist (). topagedlist (currentpageindex, defaultpagesize ));
// Return view (db. cmsnews. orderbydescending (model => model. pubdate). tolist ());
}

 

3. Modify view: List. aspx

Modify the page command first, that is, modify the inherits attribute, and then add a reference to the required namespace:

Here cmsnews is the model in our example.

<% -- < % @ Page title = "" Language = " C # " Masterpagefile = " ~ /Views/shared/site. Master " Inherits = " System. Web. MVC. viewpage <ienumerable <mvc2demo. Models. cmsnews> "   %> -- %>
<% @ Page title = "" Language = " C # " Masterpagefile = " ~ /Views/shared/site. Master " Inherits = " Viewpage <ipagedlist <cmsnews> "   %>

<% @ Import namespace = " Mvcpaging " %>
<% @ Import namespace = " Mvc2demo. Models " %>

 

Add paging Code (the DIV part is newly added ):

< P >
<% : HTML. actionlink ( " Create new " , " Create " ) %>
< Div Class = "Pager" >
<% = Html. Pager (model. pagesize, model. pagenumber, model. totalitemcount) %>
</ Div >
</ P >

 

4. Add CSS

In fact, the paging function has been completed in the above steps, but we need to make the paging better, copy the following code from the downloaded Demo project's content/site.css to the CSS file of our site. We also see that this style is also specified in the above Div.

/* Pager */
. Pager
{
Margin : 8px 3px ;
Padding : 3px ;
}

. Pager. Disabled
{
Border : 1px solid # ddd ;
Color : #999 ;
Margin-top : 4px ;
Padding : 3px ;
Text-align : Center ;
}

. Pager. Current
{
Background-color : # 06c ;
Border : 1px solid #009 ;
Color : # Fff ;
Font-weight : Bold ;
Margin-top : 4px ;
Padding : 3px 5px ;
Text-align : Center ;
}

. Pager span,. Pager
{
Margin:4px 3px;
}

. Pager
{
Border:1px solid # c0c0c0;
Padding:3px 5px;
Text-align:Center;
Text-Decoration:None;
}