Asp.NetMVC 3インスタンス学習のExtShop(四)——製品リストページの完成

8846 ワード
ダウンロード ソースコード 商品 ASP/ASP.NET
製品リストページを作成する前に、いくつかの準備をします.まず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  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    
    3. 
    
    
    
    
  3.  
    4. 
    
    
    
    
  4. @ {   
    5. 
    
    
    
    
  5. ViewBag . Title = "      " ;   
    6. 
    
    
    
    
  6. PageData [ " id " ] = " " ;   
    7. 
    
    
    
    
  7. }   
    8. 
    
    
    
    
  8.    
    9. 
    
    
    
    
  9.        
    10. 
    
    
    
    
  10.     
    11. 
    
    
    
    
  11.    
    12. 
    
    
    
    
  12.          
    13. 
    
    
    
    
  13. @ {   
    14. 
    
    
    
    
  14. foreach ( var c in Model )   
    15. 
    
    
    
    
  15. {   
    16. 
    
    
    
    
  16.    
    17. 
    
    
    
    
  17.        
    18. 
    
    
    
    
  18.   @ c . Title     
    19. 
    
    
    
    
  19.     ：  @ c . MarketPrice . ToString ( " C " )     
    20. 
    
    
    
    
  20.     ： @ c . UnitPrice . ToString ( " C " )    
    21. 
    
    
    
    
  21.      ：    
    22. 
    
    
    
    
  22.    
    23. 
    
    
    
    
  23.    
    24. 
    
    
    
    
  24.    
    25. 
    
    
    
    
  25.    
    26. 
    
    
    
    
  26.    
    27. 
    
    
    
    
  27.    
    28. 
    
    
    
    
  28.    
    29. 
    
    
    
    
  29.    
    30. 
    
    
    
    
  30.    
    31. 
    
    
    
    
  31. }   
    32. 
    
    
    
    
  32. }   
    33. 
    
    
    
    
  33.     
    34. 
    
    
    
    
  34.  @ Html . Pager ( Model , new PagerOptions { PageIndexParameterName = " id " } )    
    35. 
    
    
    
    
  35.    
    36. 
    
    
    
    
  36.  
    37. 
    
    
    
    
  37.    
    38. 
    
    
    
    
  38. jQuery ( function ( ) {   
    39. 
    
    
    
    
  39. $ ( " div .rating " ) . stars ( ) ;   
    40. 
    
    
    
    
  40. } ) ;   
    41. 
    
    
    
    
  41.    
    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    
    3. 
    
    
    
    
  3. @ {   
    4. 
    
    
    
    
  4. ViewBag . Title = "      " ;   
    5. 
    
    
    
    
  5. PageData [ " id " ] = ViewData [ " id " ] ;   
    6. 
    
    
    
    
  6. }   
    7. 
    
    
    
    
  7.  
    8. 
    
    
    
    
  8.    
    9. 
    
    
    
    
  9.        
    10. 
    
    
    
    
  10. @ { Html . RenderAction ( " Navbar " , " Catalog " , new { id = ViewData [ " id " ] } ) ; }   
    11. 
    
    
    
    
  11.     
    12. 
    
    
    
    
  12.    
    13. 
    
    
    
    
  13.          
    14. 
    
    
    
    
  14. @ {   
    15. 
    
    
    
    
  15. foreach ( var c in Model )   
    16. 
    
    
    
    
  16. {   
    17. 
    
    
    
    
  17.    
    18. 
    
    
    
    
  18.        
    19. 
    
    
    
    
  19.   @ c . Title     
    20. 
    
    
    
    
  20.     ：  @ c . MarketPrice . ToString ( " C " )     
    21. 
    
    
    
    
  21.     ： @ c . UnitPrice . ToString ( " C " )    
    22. 
    
    
    
    
  22.      ：    
    23. 
    
    
    
    
  23.    
    24. 
    
    
    
    
  24.    
    25. 
    
    
    
    
  25.    
    26. 
    
    
    
    
  26.    
    27. 
    
    
    
    
  27.    
    28. 
    
    
    
    
  28.    
    29. 
    
    
    
    
  29.    
    30. 
    
    
    
    
  30.    
    31. 
    
    
    
    
  31.    
    32. 
    
    
    
    
  32. }   
    33. 
    
    
    
    
  33. }   
    34. 
    
    
    
    
  34.     
    35. 
    
    
    
    
  35.  @ Html . Pager ( Model , new PagerOptions { PageIndexParameterName = " page " } )    
    36. 
    
    
    
    
  36.    
    37. 
    
    
    
    
  37.  
    38. 
    
    
    
    
  38.    
    39. 
    
    
    
    
  39. jQuery ( function ( ) {   
    40. 
    
    
    
    
  40. $ ( " div .rating " ) . stars ( ) ;   
    41. 
    
    
    
    
  41. } ) ;   
    42. 
    
    
    
    
  42.    
    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  idlist = new List  ( ) ;   
    5. 
    
    
    
    
  5. idlist . Add ( id ) ;   
    6. 
    
    
    
    
  6. for ( int i = 0 ; i 
    
    
    
    
  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    
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. @ {   
    4. 
    
    
    
    
  4. foreach ( var c in Model )   
    5. 
    
    
    
    
  5. {   
    6. 
    
    
    
    
  6. @ Html . Raw ( " >> " )  @ c . Titel    
    7. 
    
    
    
    
  7. }   
    8. 
    
    
    
    
  8. }   
    9.

コードの中で、">>の表示は必ずHtmlのRawの方法で表示しなければならなくて、さもなくばエラーを提示することができて、">"を使ってもだめで、Razorの文法と衝突があると推定します.他に方法があるかどうか、検討しなかった.
これで、製品リストページは完了しました.
BTW:プロジェクトはまだ完成していないので、ソースコードの提供は考えていませんが、文章を読むと同時にソースコードを提供して参考にしたい読者がいるので、本稿から、一節を完成するたびに、その節のコードを提供します.
ソース:http://download.csdn.net/source/2996287
IE 10ブラウザでASPを使用できないことを解決する.NETフォーム認証ログインの問題
CodeIgniterにcssファイルをロード