Asp.NetMVC 3実例学習のExtShop(四)――製品リストページの完成

13833 ワード
ソースコード ダウンロード 製品
製品リストページを作成する前に、いくつかの準備をします.まずMvcPagerをダウンロードして製品リストのページを分けました.ダウンロードしたのはMVC 2ベースかもしれませんが、大丈夫です.MVC 3に使えます.心配があれば、ソースコードをダウンロードして再コンパイルしたほうがいいです.ダウンロード後にDLLをリファレンスに追加します.
次に、「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への参照を追加します.コードは以下の通りです.

  
  
  
  
    
   
   
   
   
  1. using Webdiyer . WebControls . Mvc;  
    2.

次にIndex操作のコードを変更します.

  
  
  
  
    
   
   
   
   
  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」を右クリックして「ビューを追加」を選択します(、今日は中国語版に変更してメニューも変わりました).ビューに次のコードを追加します.

  
  
  
  
    
   
   
   
   
  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を参照し、2番目の文は受信したデータモデルタイプを定義します.だから製品リストなのでPageData["id"]は空の文字列に設定します.残りのコードとトップページの差は多くありません.34文目はHTML方式でページングコードを表示します.ここで注意したいのは、操作で受信した現在のページパラメータがidで定義されているため、PagerOptionsオプションのPageIndexParameterNameを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操作には2つのパラメータがあり、1つ目は分類id、2つ目は現在のページ番号である.3行目は、現在の分類idをViewData["id"]を介してビューに渡し、左の分類リストを更新し、ナビゲーションバーを表示します.残りとIndexの操作はあまり差がありません.リスト操作のビューを作成します.ビュー内のコードは次のとおりです.

  
  
  
  
    
   
   
   
   
  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行目には、ナビゲーションメニューが1つのセクションビューで表示されます.35行目では、PageIndexParameterNameはIndexビューのidではなくpageであることに注意してください.
次に行うのは、ナビゲーションバーの表示を完了することです.ファイルを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:プロジェクトはまだ完成していないので、ソースコードの提供は考えていませんが、文章を読むと同時にソースコードを提供して参考にしたい読者がいるので、本稿から、一節を完成するたびに、その節のコードを提供します.
ソース:http://download.csdn.net/source/2996287
AWS Cloud9でWordpressを使ってみる~準備編~ 1(PHPとMYSQLのバージョンアップ)
N+1問題の実験