ASP. net mvc Practice Series 7-Grid implementation [using Contrib implementation] (below)

In many cases, we use grids to display data. In webform, we often use GridView or ListView. In fact, it is not difficult to simply implement these grids, the previous section describes the simple implementation of Grid in mvc. However, if a Grid is used to display many pages and the circular td is written every time, tr is a little troublesome, of course, in mvc, we can continue to use the GridView or ListView, but it is very poor in many places. here we can use Helper to encapsulate this process. Mvc Contrib helps us implement a set of Grid, so I will not create a new one here. The source code of Contrib can be downloaded from http://www.codeplex.com/mvccontrib.

I. Preparations

1. Prepare a set of simulation classes and Classes

Simulation class
Public class News
{
Public int ID {get; set ;}
Public string Author {get; set ;}
Public string Title {get; set ;}
Public DateTime CreateTime {get; set ;}
}
Public class ListNews
{
Public static List <News> GetList ()
{
List <News> list = new List <News> ();
List. Add (new News {ID = 1, Author = "lfm1", Title = "60 th anniversary of the People's Republic of China", CreateTime = DateTime. Now });
List. Add (new News {ID = 2, Author = "lfm2", Title = "61 Anniversary of the People's Republic of China", CreateTime = DateTime. Now. AddHours (1 )});
List. Add (new News {ID = 3, Author = "lfm3", Title = "62 Anniversary of the People's Republic of China", CreateTime = DateTime. Now. AddHours (2 )});
List. Add (new News {ID = 4, Author = "lfm3", Title = "63 Anniversary of the People's Republic of China", CreateTime = DateTime. Now. AddHours (3 )});
List. Add (new News {ID = 5, Author = "lfm2", Title = "64 Anniversary of the People's Republic of China", CreateTime = DateTime. Now. AddHours (4 )});

Return list;
}
}
2. You do not need to use <% @ Import Namespace = "MvcContrib. UI. grid "%> to import a namespace, enter the following in <pages> of webconfi:

Webconfig Configuration
<Pages>
<Namespaces>
<Add namespace = "System. Collections. Generic"/>
<Add namespace = "MvcContrib. UI. Grid"/>
<Add namespace = "MvcContrib. UI. Pager"/>
<Add namespace = "MvcContrib. Pagination"/>
</Namespaces>
</Pages>

Ii. Simple Application

Enter <% = Html. Grid (Model). AutoGenerateColumns () %> In the View. The Grid returns the corresponding columns and rows based on the Content reflection in the Model, which is simple but not practical. Generally, we need to define the columns to be displayed:

View

View
<% = Html. Grid (Model). Columns (column => {
Column. For (x => x. ID). Named ("News ID ");
Column. For (x => Html. ActionLink (x. Title, "NewsDetils", new {newsId = x. ID}). DoNotEncode ();
Column. For (x => x. Author );
Column. For (x => x. CreateTime );
})
%>
The Columns parameter is an Action <ColumnBuilder <T> delegate. The Grid method uses this delegate to help you process table display. Column. For is used to process each column. Named is used to re-mark the column name. If Named is not used, the column name is directly the ToString () content of the For parameter. By default, all the content shown in the following are encoded. Therefore, you must use the DoNotEncode () method if no encoding is required.

3. Display by PAGE

1. Simple paging:

View:

View
<% @ Page Title = "" Language = "C #" MasterPageFile = "~ /Views/Shared/Site. Master "Inherits =" System. Web. Mvc. ViewPage <IPagination <News> "%>

<Asp: Content ID = "Content1" ContentPlaceHolderID = "TitleContent" runat = "server">
ListPager
</Asp: Content>

<Asp: Content ID = "Content2" ContentPlaceHolderID = "MainContent" runat = "server">

<% = Html. Grid (Model). Columns (column => {
Column. For (x => x. ID). Named ("News ID ");
Column. For (x => Html. ActionLink (x. Title, "NewsDetils", new {newsId = x. ID}). DoNotEncode ();
Column. For (x => x. Author );
Column. For (x => x. CreateTime );
})
%>
<% = Html. Pager (Model) %>
</Asp: Content>

Note that Inherits = "System. Web. Mvc. ViewPage <IPagination <News>" is used for paging.

Controller:

Public ActionResult ListPager (int? Page)
{
Var pagedNews = ListNews. GetList (). AsPagination (page. GetValueOrDefault (1), 5 );
Return View (pagedNews );
}
Do not forget to introduce the namespace MvcContrib. Pagination;

This AsPagination is an extension of IEnumerable <T>. It is used to convert the collection class that implements IEnumerable into IPagination <T>

2. Custom Paging

The simple paging above is very easy to implement, but it often has poor performance in the case of large data volumes, So we often need to customize pages, and contrib also supports custom pages.

Custom paging code
Public ActionResult CustomPager (int? Page)
{
Int pageSize = 5;
Int pageNumber = page ?? 1;
Var list = ListNews. GetList (). Skip (pageNumber-1) * pageSize). Take (pageSize );
Int total = ListNews. GetList (). Count;
CustomPagination <News> customes = new CustomPagination <News> (list, pageNumber, pageSize, total );
Return View (customes );
}
3. Useful attributes in Paging

The default page is displayed as follows:

It is estimated that this will not be the page format you want. Next we will customize this page

Change the paging output:

<% = Html. Pager (Model). First ("First page ").
Last ("Last page "). previous ("Previous Page "). next ("Next page "). format ("currently from {0} rows to {1} rows, total {2} rows,") %>

The following result is displayed:

Currently, this is from 1 row to 5 rows, total 10 rows, first page | Previous Page | next page | last page

4. Paging format
You can use css for format control.
The front-end output of paging is: front-end output of Paging
<Div class = 'pagination'>
<Span class = 'paginationleft'> currently, 10 rows are counted from 1 row to 5,
</Span>
<Span class = 'paginationright'> page 1 | Previous Page | <a href = "/Home/ListPager? Page = 2 "> next page </a> | <a href ="/Home/ListPager? Page = 2 "> last page </a>
</Span>
</Div>

By default, two classes are controllable.

4. Color Separation

View:

Line color separation code
<% Html. Grid (Model). Columns (column =>
{
Column. For (x => x. ID). Named ("News ID ");
Column. For (x => Html. ActionLink (x. Title, "NewsDetils", new {newsId = x. ID}). DoNotEncode ();
Column. For (x => x. Author );
Column. For (x => x. CreateTime );
}). RowStart (p, row) =>
{
If (row. IsAlternate)
{
%> <Tr style = "background-color: # CCDDCC"> <%

}
Else
{
%> <Tr> <%

}
}
). Render (); %>
Note that <% @ Import Namespace = "MvcContrib. UI. Grid. ActionSyntax" %> is introduced here.

5. Sorting

1. Default sorting

The default sorting in the grid of contrib is very simple.

The column you want to sort will be rewritten

Column. For (x => x. Author). Sortable (true );

However, this sorting may not meet your requirements, because it only sorts the data of this Model. What you get when customizing the page is often not the result you want.

2. Custom sorting

You can rewrite the columns to be sorted:

Column. for (x => x. author ). header ("<th>" + Html. actionLink ("author", "CustomPager", new {desc = Convert. toBoolean (ViewData ["desc"]), sortName = "Author"}) + "</th> ");

For the practices in Controller, refer to ASP. net mvc Practice Series 6-Grid implementation (I)

Vi. Others

See MvcContrib. Samples. UI, which can be downloaded at http://www.codeplex.com/mvccontrib.

VII. Source Code download

Article