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

Source: Internet
Author: User

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 &

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.