Asp.net MVC 3實例學習之ExtShop（四）——完成產品列表頁

時間  2020-08-06
標籤 asp.net asp mvc 實例 學習 extshop 完成 產品 列表 欄目 ASP 简体版
原文   原文鏈接

在完成產品列表頁前要作一些準備功夫。首先是去下載MvcPager用了爲產品列表分頁。下載的多是基於MVC 2的，不要緊，能夠用在MVC 3上。若是有擔憂，下載源代碼從新編譯一次好了。下載後將DLL添加到引用裏。javascript

接着是要修改一下路由以實現「Catalog/List/[id]/[page]」的訪問。打開「Global.asax.cs」文件，而後在默認路由以前添加如下代碼： 
  
  
  
  
    
   
   
   
   
  1. routes . MapRoute (   
    2. 
   
   
   
   
  2. " Catalog " , // Route name   
    3. 
   
   
   
   
  3. " Catalog/List/{id}/{page} " , // URL with parameters   
    4. 
   
   
   
   
  4. new { controller = " Catalog " , action = " List " , page = 1 } // Parameter defaults   
    5. 
   
   
   
   
  5. ) ;   
    6.

如今打開CatalogController.cs文件，在文件頭添加對MvcPager的引用，代碼以下：css

  
  
  
  
    
   
   
   
   
  1. using Webdiyer . WebControls . Mvc;  
    2.

而後修改Index操做的代碼以下：java

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

代碼傳入的id是頁碼而不是產品分類編碼，這個要注意。由於要使用分頁，因此傳遞給視圖的是PagedList對象，而不是Queryable，這也是要注意的地方。於是，查詢結果須要經過toPagedList方法將Queryable對象轉換爲PagedList對象。第1個參數是當前頁面，若是id爲空，則默認爲第1頁。第2個參數是每頁顯示的產品數量，在這裏是8個。數據庫

在「Index」上單擊鼠標右鍵，選擇「添加視圖」（ ，今天換了中文版，菜單也變了）。在視圖中添加如下代碼：ide

  
  
  
  
    
   
   
   
   
  1. @ using Webdiyer . WebControls . Mvc ;   
    2. 
   
   
   
   
  2. @ model PagedList < Extshop . Models . T_Products >   
    3. 
   
   
   
   
  3.  
    4. 
   
   
   
   
  4. @ {   
    5. 
   
   
   
   
  5. ViewBag . Title = " 產品列表 " ;   
    6. 
   
   
   
   
  6. PageData [ " id " ] = " " ;   
    7. 
   
   
   
   
  7. }   
    8. 
   
   
   
   
  8. < div class = " nav " >   
    9. 
   
   
   
   
  9. < a href = " @Url.Action( " " , " Catalog " ) " > 產品 < / a >   
    10. 
   
   
   
   
  10. < / div > < br / >   
    11. 
   
   
   
   
  11. < div id = " contentMain " style = " width:760px; " >   
    12. 
   
   
   
   
  12. < span class = " header " style = " width:750px; " > 產品列表 < / span >   
    13. 
   
   
   
   
  13. @ {   
    14. 
   
   
   
   
  14. foreach ( var c in Model )   
    15. 
   
   
   
   
  15. {   
    16. 
   
   
   
   
  16. < ul >   
    17. 
   
   
   
   
  17. < li > < a href = ' @ Url . Action ( " Details " , " Product " , new { id = c . ProductID } ) ' > < img src = ' / Images / products / @ c . SamllImageUrl ' alt = " @c.Title " / > < / a > < / li >   
    18. 
   
   
   
   
  18. < li class = ' title ' > < a href = ' @ Url . Action ( " Details " , " Product " , new { id = c . ProductID } ) ' > @ c . Title < / a > < / li >   
    19. 
   
   
   
   
  19. < li > 市場價： < del > @ c . MarketPrice . ToString ( " C " ) < / del > < / li >   
    20. 
   
   
   
   
  20. < li > 當前價： @ c . UnitPrice . ToString ( " C " ) < / li >   
    21. 
   
   
   
   
  21. < li > < span class = " rating-title " > 評 價： < / span >   
    22. 
   
   
   
   
  22. < div class = ' rating ' id = " @c.ProductID.ToString( " rat - 0 " ) " >   
    23. 
   
   
   
   
  23. < input name = " @c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = " disabled " value = " 1 " @ ( c . TotalRating = = 1 ? " checked='checked' " : " " ) / >   
    24. 
   
   
   
   
  24. < input name = " @c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = " disabled " value = " 2 " @ ( c . TotalRating = = 2 ? " checked='checked' " : " " ) / >   
    25. 
   
   
   
   
  25. < input name = " @c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = " disabled " value = " 3 " @ ( c . TotalRating = = 3 ? " checked='checked' " : " " ) / >   
    26. 
   
   
   
   
  26. < input name = " @c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = " disabled " value = " 4 " @ ( c . TotalRating = = 4 ? " checked='checked' " : " " ) / >   
    27. 
   
   
   
   
  27. < input name = " @c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = " disabled " value = " 5 " @ ( c . TotalRating = = 5 ? " checked='checked' " : " " ) / >   
    28. 
   
   
   
   
  28. < / div >   
    29. 
   
   
   
   
  29. < / li >   
    30. 
   
   
   
   
  30. < / ul >   
    31. 
   
   
   
   
  31. }   
    32. 
   
   
   
   
  32. }   
    33. 
   
   
   
   
  33. < div class = " clear " > < / div >   
    34. 
   
   
   
   
  34. < div class = ' pagenav ' > @ Html . Pager ( Model , new PagerOptions { PageIndexParameterName = " id " } ) < / div >   
    35. 
   
   
   
   
  35. < / div >   
    36. 
   
   
   
   
  36.  
    37. 
   
   
   
   
  37. < script type = " text/javascript " >   
    38. 
   
   
   
   
  38. jQuery ( function ( ) {   
    39. 
   
   
   
   
  39. $ ( " div .rating " ) . stars ( ) ;   
    40. 
   
   
   
   
  40. } ) ;   
    41. 
   
   
   
   
  41. < / script >   
    42.

代碼第一句引用MvcPager，第二句定義接收的數據模型類型。由於是因此產品列表，因此PageData["id"]設置爲空字符串。其他代碼和首頁的差很少。第34句使用HTML方式顯示分頁代碼。這裏要注意的是PagerOptions選項中的PageIndexParameterName要設置爲id，由於操做中接收的當前頁參數是以id定義的。編碼

頁面須要正常顯示，還須要在Site.css中添加如下代碼： 
  
  
  
  
    
   
   
   
   
  1. 1   #contentMain .clear { clear : both ; }   
    2. 
   
   
   
   
  2. 2   #contentMain .pagenav { width : 760px ; text-align : center ; margin-bottom : 10px ; }   
    3. 
   
   
   
   
  3. 切換回CatalogController.cs文件，在Index操做下添加一個List操做，其代碼以下：  
    4. 
   
   
   
   
  4. 1   public ActionResult List(string id, int? page)   
    5. 
   
   
   
   
  5. 2   {   
    6. 
   
   
   
   
  6. 3   ViewData["id"] = id;   
    7. 
   
   
   
   
  7. 4   PagedList q = dc.T_Products   
    8. 
   
   
   
   
  8. 5   .Where(m => dc.T_Categories.Where(n => n.CategoryID.Substring(0, id.Length) == id).Select(n => n.CategoryID ).Contains(m.CategoryID))   
    9. 
   
   
   
   
  9. 6   .OrderByDescending(m => m.CreateTime).ToPagedList(page ?? 1, 4);   
    10. 
   
   
   
   
  10. 7   return View(q);   
    11. 
   
   
   
   
  11. 8   }   
    12.

從代碼能夠看到，List操做有兩個參數，第1個是分類id，第2個是當前頁號。第3行經過ViewData["id"]向視圖傳遞當前的分類id，以更新左邊分類列表以及顯示導航條。其他的和Index操做差很少。如今爲List操做建立一個視圖，視圖內代碼以下：spa

  
  
  
  
    
   
   
   
   
  1. @ using Webdiyer . WebControls . Mvc ;   
    2. 
   
   
   
   
  2. @ model PagedList < Extshop . Models . T_Products >   
    3. 
   
   
   
   
  3. @ {   
    4. 
   
   
   
   
  4. ViewBag . Title = " 產品列表 " ;   
    5. 
   
   
   
   
  5. PageData [ " id " ] = ViewData [ " id " ] ;   
    6. 
   
   
   
   
  6. }   
    7. 
   
   
   
   
  7.  
    8. 
   
   
   
   
  8. < div class = " nav " >   
    9. 
   
   
   
   
  9. < a href = " @Url.Action( " " , " Catalog " ) " > 產品 < / a >   
    10. 
   
   
   
   
  10. @ { Html . RenderAction ( " Navbar " , " Catalog " , new { id = ViewData [ " id " ] } ) ; }   
    11. 
   
   
   
   
  11. < / div > < br / >   
    12. 
   
   
   
   
  12. < div id = " contentMain " style = " width:760px; " >   
    13. 
   
   
   
   
  13. < span class = " header " style = " width:750px; " > 產品列表 < / span >   
    14. 
   
   
   
   
  14. @ {   
    15. 
   
   
   
   
  15. foreach ( var c in Model )   
    16. 
   
   
   
   
  16. {   
    17. 
   
   
   
   
  17. < ul >   
    18. 
   
   
   
   
  18. < li > < a href = ' @ Url . Action ( " Details " , " Product " , new { id = c . ProductID } ) ' > < img src = ' / Images / products / @ c . SamllImageUrl ' alt = " @c.Title " / > < / a > < / li >   
    19. 
   
   
   
   
  19. < li class = ' title ' > < a href = ' @ Url . Action ( " Details " , " Product " , new { id = c . ProductID } ) ' > @ c . Title < / a > < / li >   
    20. 
   
   
   
   
  20. < li > 市場價： < del > @ c . MarketPrice . ToString ( " C " ) < / del > < / li >   
    21. 
   
   
   
   
  21. < li > 當前價： @ c . UnitPrice . ToString ( " C " ) < / li >   
    22. 
   
   
   
   
  22. < li > < span class = " rating-title " > 評 價： < / span >   
    23. 
   
   
   
   
  23. < div class = ' rating ' id = " @c.ProductID.ToString( " rat - 0 " ) " >   
    24. 
   
   
   
   
  24. < input name = " @c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = " disabled " value = " 1 " @ ( c . TotalRating = = 1 ? " checked='checked' " : " " ) / >   
    25. 
   
   
   
   
  25. < input name = " @c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = " disabled " value = " 2 " @ ( c . TotalRating = = 2 ? " checked='checked' " : " " ) / >   
    26. 
   
   
   
   
  26. < input name = " @c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = " disabled " value = " 3 " @ ( c . TotalRating = = 3 ? " checked='checked' " : " " ) / >   
    27. 
   
   
   
   
  27. < input name = " @c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = " disabled " value = " 4 " @ ( c . TotalRating = = 4 ? " checked='checked' " : " " ) / >   
    28. 
   
   
   
   
  28. < input name = " @c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = " disabled " value = " 5 " @ ( c . TotalRating = = 5 ? " checked='checked' " : " " ) / >   
    29. 
   
   
   
   
  29. < / div >   
    30. 
   
   
   
   
  30. < / li >   
    31. 
   
   
   
   
  31. < / ul >   
    32. 
   
   
   
   
  32. }   
    33. 
   
   
   
   
  33. }   
    34. 
   
   
   
   
  34. < div class = " clear " > < / div >   
    35. 
   
   
   
   
  35. < div class = ' pagenav ' > @ Html . Pager ( Model , new PagerOptions { PageIndexParameterName = " page " } ) < / div >   
    36. 
   
   
   
   
  36. < / div >   
    37. 
   
   
   
   
  37.  
    38. 
   
   
   
   
  38. < script type = " text/javascript " >   
    39. 
   
   
   
   
  39. jQuery ( function ( ) {   
    40. 
   
   
   
   
  40. $ ( " div .rating " ) . stars ( ) ;   
    41. 
   
   
   
   
  41. } ) ;   
    42. 
   
   
   
   
  42. < / script >   
    43.

代碼第10行經過一個分部視圖顯示導航菜單。第35行要注意PageIndexParameterName是「page」，而不是Index視圖的「id」了。.net

下一步要作的是完成導航條的顯示。將文件切換回CatalogController.cs文件，添加一個名稱爲「Navbar」的子操做，其代碼以下：對象

  
  
  
  
    
   
   
   
   
  1. [ ChildActionOnly ]   
    2. 
   
   
   
   
  2. public ActionResult Navbar ( string id )   
    3. 
   
   
   
   
  3. {   
    4. 
   
   
   
   
  4. List < string > idlist = new List < string > ( ) ;   
    5. 
   
   
   
   
  5. idlist . Add ( id ) ;   
    6. 
   
   
   
   
  6. for ( int i = 0 ; i < ( id . Length - 2 ) ; i = i + 3 )   
    7. 
   
   
   
   
  7. {   
    8. 
   
   
   
   
  8. idlist . Add ( id . Substring ( 0 , i + 3 ) ) ;   
    9. 
   
   
   
   
  9. }   
    10. 
   
   
   
   
  10. var q = dc . T_Categories . Where ( m = > idlist . Contains ( m . CategoryID ) ) . OrderBy ( m = > m . CategoryID ) ;   
    11. 
   
   
   
   
  11. return PartialView ( q ) ;   
    12. 
   
   
   
   
  12. }   
    13.

代碼首先獲取了當前分類的父類編號，而後從數據庫一次查詢出全部類別並排序。如今爲該子操做建立一個分部視圖，視圖代碼以下：排序

  
  
  
  
    
   
   
   
   
  1. @ model IEnumerable < Extshop . Models . T_Categories >   
    2. 
   
   
   
   
  2.  
    3. 
   
   
   
   
  3. @ {   
    4. 
   
   
   
   
  4. foreach ( var c in Model )   
    5. 
   
   
   
   
  5. {   
    6. 
   
   
   
   
  6. @ Html . Raw ( " >> " ) < a href = ' @ Url . Action ( " List " , " Catalog " , new { id = c . CategoryID } ) ' > @ c . Titel < / a >   
    7. 
   
   
   
   
  7. }   
    8. 
   
   
   
   
  8. }   
    9.

代碼中，「>>」的顯示必須用Html的Raw方法顯示，否則會提示錯誤，使用「>」也不行，估計是和Razor的語法有衝突。是否有其它辦法，沒去研究了。

至此，產品列表頁的就已經完成了。
BTW：由於項目還沒完成，因此沒考慮提供源代碼，但有讀者但願在看文章的同時能提供源代碼作參考，因此從本文開始，每完成一節，就提供到該節的代碼。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程