Asp.net MVC 3 instance learning ExtShop (4) -- complete the product list page

Make some preparations before completing the product list page. The first step is to download the MvcPager page for the product list. The download may be based on MVC 2. It does not matter. It can be used on MVC 3. If you are worried, download the source code and re-compile it. After the download, add the DLL to the reference.

Next, you need to modify the route to implement "Catalog/List/[id]/[page]" access. Open the "Global. asax. cs" file and add the following code before the default route:

1 routes. MapRoute (
2 "Catalog", // Route name
3 "Catalog/List/{id}/{page}", // URL with parameters
4 new {controller = "Catalog", action = "List", page = 1} // Parameter defaults
5 );
6

Open the CatalogController. cs file and add a reference to MvcPager in the file header. The Code is as follows:

1 using Webdiyer. WebControls. Mvc;

The code for modifying the Index operation is as follows:

1 public ActionResult Index (int? Id)
2 {
3 PagedList <T_Products> q = dc. T_Products. OrderByDescending (m => m. CreateTime). ToPagedList (id ?? 1, 8 );
4 return View (q );
5}
6

The id passed in by the Code is the page number rather than the product classification code. note this. Because pagination is required, the PagedList object instead of Queryable is passed to the view. Therefore, you must use the toPagedList method to convert the Queryable object to the PagedList object. The first parameter is the current page. If the id is empty, the default value is 1st pages. The 2nd parameters are the number of products displayed on each page. Here, 8 parameters are displayed.

Right-click "Index" and select "add view" (today, the Chinese version is changed, and the menu is changed ). Add the following code to the View:

1 @ using Webdiyer. WebControls. Mvc;
2 @ model PagedList <Extshop. Models. T_Products>
3
4 @{
5 ViewBag. Title = "product list ";
6 PageData ["id"] = "";
7}
8 <div class = "nav">
9 <a href = "@ Url. Action (" "," Catalog ")"> product </a>
10 </div> <br/>
11 <div id = "contentMain" style = "width: 760px;">
12 <span class = "header" style = "width: 750px;"> product list </span>
13 @{
14 foreach (var c in Model)
15 {
16 <ul>
17 <li> <a href = @ Url. action ("Details", "Product", new {id = c. productID})> </a> </li>
18 <li class = title> <a href = @ Url. action ("Details", "Product", new {id = c. productID})> @ c. title </a> </li>
19 <li> Market Price: <del> @ c. MarketPrice. ToString ("C") </del> </li>
20 <li> current price: @ c. UnitPrice. ToString ("C") </li>
21 &