版面修正、增加Pager、加入ExtensionMethod

修改RWD配置加入Pagedelist套件加入ExtensionMethod(Truncate)
Asing1001 · Sep 27, 2014 · 2d592a7 · 2d592a7
1 parent 4a64f3e
commit 2d592a7
Show file tree

Hide file tree

Showing 51 changed files with 2,172 additions and 109 deletions.
diff --git a/App_Data/CompactDB.sdf b/App_Data/CompactDB.sdf
diff --git a/Content/PagedList.css b/Content/PagedList.css
@@ -0,0 +1,166 @@
+.pagination {
+  display: inline-block;
+  padding-left: 0;
+  margin: 20px 0;
+  border-radius: 4px;
+}
+
+.pagination > li {
+  display: inline;
+}
+
+.pagination > li > a,
+.pagination > li > span {
+  position: relative;
+  float: left;
+  padding: 6px 12px;
+  margin-left: -1px;
+  line-height: 1.428571429;
+  text-decoration: none;
+  background-color: #ffffff;
+  border: 1px solid #dddddd;
+}
+
+.pagination > li:first-child > a,
+.pagination > li:first-child > span {
+  margin-left: 0;
+  border-bottom-left-radius: 4px;
+  border-top-left-radius: 4px;
+}
+
+.pagination > li:last-child > a,
+.pagination > li:last-child > span {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.pagination > li > a:hover,
+.pagination > li > span:hover,
+.pagination > li > a:focus,
+.pagination > li > span:focus {
+  background-color: #eeeeee;
+}
+
+.pagination > .active > a,
+.pagination > .active > span,
+.pagination > .active > a:hover,
+.pagination > .active > span:hover,
+.pagination > .active > a:focus,
+.pagination > .active > span:focus {
+  z-index: 2;
+  color: #ffffff;
+  cursor: default;
+  background-color: #428bca;
+  border-color: #428bca;
+}
+
+.pagination > .disabled > span,
+.pagination > .disabled > a,
+.pagination > .disabled > a:hover,
+.pagination > .disabled > a:focus {
+  color: #999999;
+  cursor: not-allowed;
+  background-color: #ffffff;
+  border-color: #dddddd;
+}
+
+.pagination-lg > li > a,
+.pagination-lg > li > span {
+  padding: 10px 16px;
+  font-size: 18px;
+}
+
+.pagination-lg > li:first-child > a,
+.pagination-lg > li:first-child > span {
+  border-bottom-left-radius: 6px;
+  border-top-left-radius: 6px;
+}
+
+.pagination-lg > li:last-child > a,
+.pagination-lg > li:last-child > span {
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+
+.pagination-sm > li > a,
+.pagination-sm > li > span {
+  padding: 5px 10px;
+  font-size: 12px;
+}
+
+.pagination-sm > li:first-child > a,
+.pagination-sm > li:first-child > span {
+  border-bottom-left-radius: 3px;
+  border-top-left-radius: 3px;
+}
+
+.pagination-sm > li:last-child > a,
+.pagination-sm > li:last-child > span {
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+
+.pager {
+  padding-left: 0;
+  margin: 20px 0;
+  text-align: center;
+  list-style: none;
+}
+
+.pager:before,
+.pager:after {
+  display: table;
+  content: " ";
+}
+
+.pager:after {
+  clear: both;
+}
+
+.pager:before,
+.pager:after {
+  display: table;
+  content: " ";
+}
+
+.pager:after {
+  clear: both;
+}
+
+.pager li {
+  display: inline;
+}
+
+.pager li > a,
+.pager li > span {
+  display: inline-block;
+  padding: 5px 14px;
+  background-color: #ffffff;
+  border: 1px solid #dddddd;
+  border-radius: 15px;
+}
+
+.pager li > a:hover,
+.pager li > a:focus {
+  text-decoration: none;
+  background-color: #eeeeee;
+}
+
+.pager .next > a,
+.pager .next > span {
+  float: right;
+}
+
+.pager .previous > a,
+.pager .previous > span {
+  float: left;
+}
+
+.pager .disabled > a,
+.pager .disabled > a:hover,
+.pager .disabled > a:focus,
+.pager .disabled > span {
+  color: #999999;
+  cursor: not-allowed;
+  background-color: #ffffff;
+}
diff --git a/Controllers/StoreController.cs b/Controllers/StoreController.cs
@@ -5,6 +5,9 @@
 using System.Web.Mvc;
 using WecareMVC.Models;
 using WecareMVC.ViewModels;
+using PagedList;
+using PagedList.Mvc;
+
 
 namespace WecareMVC.Controllers
 {
@@ -15,8 +18,7 @@ public class StoreController : Controller
         // GET: /Store/
         public ActionResult Index()
         {
-            var genres = storeDB.Genres.ToList();
-
+            var genres = storeDB.Genres.ToList();            
             return View(genres);
             //var genres = new List<Genre> { 
             //    new Genre { Name = "Disco" }, 
@@ -35,15 +37,17 @@ private List<Album> GetTopSellingAlbums(int count)
                 .Take(count)
                 .ToList();
         }
+
         //
         // url: "store/{genre}"
-        public ActionResult Browse(string genre)
+        public ActionResult Browse(int? page, string genre = "Hot")
         {
-            // Retrieve Genre and its Associated Albums from database
+           // Retrieve Genre and its Associated Albums from database
             var genreModel = storeDB.Genres.Include("Albums")
-                .Single(g => g.Name == genre);
+                .Single(g => g.Name == genre).Albums;
+
 
-            return View(genreModel);
+            return View(genreModel.ToList().ToPagedList(page?? 1, 6));
         }
 
         // GET: /Store/Details/5

diff --git a/Models/ExtensionMethod.cs b/Models/ExtensionMethod.cs
@@ -0,0 +1,19 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Web;
+
+namespace WecareMVC.Models
+{
+    public static class ExtensionMethod
+    {
+        public static string Truncate(this string s, int length)
+        {
+            if (s.Length<=length)
+            {
+                return s;
+            }
+            return s.Substring(0,length)+"...";
+        }     
+    }
+}
diff --git a/Views/Home/Index.cshtml b/Views/Home/Index.cshtml
@@ -69,7 +69,7 @@
                     <h4 class="pull-right text-success"><s>$ @(album.Price +3)</s></h4>
                     <h4>
                         <a href="@Url.Action("Details", "Store", new { id = album.AlbumId })">
-                            @Truncate(album.Title, 15)
+                            @Truncate(album.Title, 10)
                         </a>
                     </h4>
                     @*<p>作者：@Truncate(album.Artist.Name, 25)</p>*@

diff --git a/Views/Shared/_Layout.cshtml b/Views/Shared/_Layout.cshtml
@@ -52,12 +52,12 @@
 
         <div class="row">
 
-            <nav class="col-xs-12 col-sm-3">
+            <nav class="col-sm-12 col-md-3">
                 <header class="lead text-center tex"><h3 class="text-danger">商品分類</h3></header>    @*區段標題header*@
                 @{Html.RenderAction("GenreMenu", "Store");}
             </nav>
 
-            <section class="col-xs-12 col-sm-9">@RenderBody()</section>
+            <section class="col-xs-12 col-sm-12 col-md-9">@RenderBody()</section>
 
         </div>
 

diff --git a/Views/Store/Browse.cshtml b/Views/Store/Browse.cshtml
@@ -1,11 +1,14 @@
-@model WecareMVC.Models.Genre
+@using PagedList;
+@using PagedList.Mvc;
+@model IPagedList<WecareMVC.Models.Album>
+@*@model WecareMVC.Models.Genre*@
 
 @{
     ViewBag.Title = "Browse";
 }
 
 <div class="row">
-    <div class="col-xs-12"><h2 class="text-danger text-center">@Model.Name</h2> </div>
+    <div class="col-xs-12"><h2 class="text-danger text-center">@Model.First().Genre.Name</h2> </div>
     <br />
     @helper Truncate(string input, int length)
 {
@@ -19,21 +22,22 @@
     }
 }
 
-    @foreach (var album in Model.Albums)
+    @foreach (var album in Model)
     {
-        <div class="col-sm-4 col-lg-4 col-md-4" >
-            <div class="thumbnail"> @*style="max-height:400px !important">*@
+        <div class="col-sm-4 col-lg-4 col-md-4">
+            <div class="thumbnail">
+                @*style="max-height:400px !important">*@
                 @*需要固定高度不然會跑掉*@
                 <img alt="@album.Title" src="@album.AlbumArtUrl" />
                 <div class="caption">
                     <h4 class="pull-right"><s>$ @(album.Price+3)</s></h4>
                     <h4>
                         <a href="@Url.Action("Details", "Store", new { id = album.AlbumId })">
-                            @Truncate(album.Title, 15)
+                            @Truncate(album.Title, 10)
                         </a>
                     </h4>
                     @*<p>作者：@Truncate(album.Artist.Name, 25)</p>*@
-                    <h3 class="text-danger"  >優惠價：$ @(album.Price)</h3>
+                    <h4 class="text-danger">優惠價：$ @(album.Price)</h4>
                 </div>
                 <div class="ratings">
                     <p class="pull-right">已賣出：@album.OrderDetails.Sum(o => o.Quantity) 件</p>
@@ -49,24 +53,31 @@
         </div>
     }
 
+    <div class="col-xs-12">
+        @Html.PagedListPager(Model, page => Url.Action("Browse", new { page }),
+     PagedListRenderOptions.Classic)
+
+    </div>
+
 </div>
 
+
 @*<div class="genre">
-    <h3><em>@Model.Name</em> Albums</h3>
+        <h3><em>@Model.Name</em> Albums</h3>
 
-    <ul id="album-list">
-        @foreach (var album in Model.Albums)
-        {
-            <li>
-                <a href="@Url.Action("Details",
-                    new { id = album.AlbumId })">
-                    <img alt="@album.Title"
-                         src="@album.AlbumArtUrl" />
-                    <span>@album.Title</span>
-                </a>
-            </li>
-        }
-    </ul>
-</div>*@
+        <ul id="album-list">
+            @foreach (var album in Model.Albums)
+            {
+                <li>
+                    <a href="@Url.Action("Details",
+                        new { id = album.AlbumId })">
+                        <img alt="@album.Title"
+                             src="@album.AlbumArtUrl" />
+                        <span>@album.Title</span>
+                    </a>
+                </li>
+            }
+        </ul>
+    </div>*@
 
 
diff --git a/Views/Store/Index.cshtml b/Views/Store/Index.cshtml
@@ -1,28 +1,19 @@
-@model IEnumerable<WecareMVC.Models.Genre>
+@using WecareMVC.Models;
+@model IEnumerable<WecareMVC.Models.Genre>
 @{
     ViewBag.Title = "WecareShop";
 }
 
+
 <div class="row">
     <header>        <h1 class="text-danger text-center">各分類Top3熱賣商品</h1>    </header>
-        @helper Truncate(string input, int length)
-{
-    if (input.Length <= length)
-    {
-        @input
-    }
-    else
-    {
-        @input.Substring(0, length)<text>...</text>
-    }
-}
-
+
         <article>
             @foreach (var genre in Model)
             {
                 <section class="row">
-                    <header>
-                        <a href="/Store/Browse?Genre=@genre.Name" class="col-xs-12">
+                    <header class="col-md-12">
+                        <a href="/Store/@genre.Name">
                             <h2>@genre.Name</h2>
                         </a>
                     </header>
@@ -37,7 +28,8 @@
                                     <h4 class="pull-right"><s>$ @(album.Price + 3)</s></h4>
                                     <h4>
                                         <a href="@Url.Action("Details", "Store", new { id = album.AlbumId })">
-                                            @Truncate(album.Title, 15)
+                                            @album.Title.Truncate(10)                                      
+
                                         </a>
                                     </h4>
                                     @*<p>作者：@Truncate(album.Artist.Name, 25)</p>*@