1. ไปที่ ProductListViewModel.htmlcs แล้วเพิ่ม
using PrimOnlineShoppingStore.Domain.Entities;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace PrimOnlineShoppingStore.WebUI.Models
{
public class ProductsListViewModel
{
public IEnumerable<Product> Products { get; set; }
public PagingInfo pagingInfo { get; set; }
public string CurrentCategory { get; set; }
}
}
2. ไปที่ ProductController.cs แล้วเพิ่ม
using PrimOnlineShoppingStore.Domain.Abstract;
using PrimOnlineShoppingStore.WebUI.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace PrimOnlineShoppingStore.WebUI.Controllers
{
public class ProductController : Controller
{
public int pageSize = 4;
private readonly IProductRepository repository;
public ProductController(IProductRepository repo)
{
repository = repo;
}
public ViewResult List(string category , int page = 1)
{
ProductsListViewModel model = new ProductsListViewModel()
{
Products = repository.Products
.Where( p=> category == null || p.Category == category)
.OrderBy(p => p.productID)
.Skip((page - 1) * pageSize)
.Take(pageSize),
pagingInfo = new PagingInfo()
{
CurrentPage = page,
ItemsPerPage = pageSize,
totalItems = repository.Products.Count()
},
CurrentCategory = category
};
return View(model);
}
}
}
3. เพื่ออยากให้ Url สวยๆ ไปที่ RouteConfig.cs แล้วเปลี่ยนเป็น
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace PrimOnlineShoppingStore.WebUI
{
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(null, "",
new
{
controller = "Product",
action = "List",
category = (string)null,
page = 1
});
routes.MapRoute(null, "Page{page}",
new
{
controller = "Product",
action = "List",
category =
(string)null
},
new { page = @"\d+" });
routes.MapRoute(
null,
"{category}",
new { controller = "Product", action = "List" , page = 1 }
);
routes.MapRoute(
null,
"{category}/Page{page}",
new { controller = "Product", action = "List" },
new {page = @"\d+" }
);
routes.MapRoute(null, "{controller}/{action}");
}
}
}
4. ไปที่ List.cshtml แล้วเพิ่ม
@model PrimOnlineShoppingStore.WebUI.Models.ProductsListViewModel
@using PrimOnlineShoppingStore.WebUI.HtmlHelpers;
@{
ViewBag.Title = "Products";
}
@foreach (var p in Model.Products)
{
@Html.Partial("ProductSummary" , p);
}
<div class="btn-group pull-right">
@Html.PageLinks(Model.pagingInfo, x => Url.Action("List", new { page = x , category = Model.CurrentCategory }) )
</div>
5. ไปที่ folder Controller แล้ว add class NavController
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace PrimOnlineShoppingStore.WebUI.Controllers
{
public class NavController : Controller
{
// GET: Nav
public string Menu()
{
return "return from Controller";
}
}
}
6. ไปที่ _Layout.cshtml แล้วเพิ่ม
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Prim Online Shopping Store</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="navbar navbar-inverse" role="navigation">
<a class="navbar-brand" href="#">Prim Online Shopping Store</a>
</div>
<div class="row panel">
<div id="categoris" class="col-lg-3">
@Html.Action("Menu" , "Nav")
</div>
<div class="col-lg-7">
@RenderBody()
</div>
</div>
</body>
</html>
7. แก้โค้ดที่ NavController เป็น
using PrimOnlineShoppingStore.Domain.Abstract;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace PrimOnlineShoppingStore.WebUI.Controllers
{
public class NavController : Controller
{
private IProductRepository repository;
public NavController(IProductRepository repo)
{
repository = repo;
}
// GET: Nav
public PartialViewResult Menu(string category = null)
{
ViewBag.SelectedCategory = category;
IEnumerable<string> categories = repository.Products
.Select(x => x.Category)
.Distinct()
.OrderBy(x => x);
return PartialView(categories);
}
}
}
8. ไปที่ folder Nav ที่อยู่ใน View folder แล้ว add View
ตั้งชื่อ Menu ค่าต่างๆ คงเดิม แล้วเพิ่มโค้ด
@model IEnumerable<string>
@Html.ActionLink("Home", "List", "Product", null,
new { @class = "btn btn-block btn-default btn-lg" })
@foreach( var link in Model)
{
@Html.RouteLink(link, new
{
controller = "Product",
action = "List",
category = link,
page = 1
},
new {
@class="btn btn-block btn-default btn-lg"
+ (link == ViewBag.SelectedCategory ? "btn-primary" : "")
}
)
}
9. ไปที่ ProductController.cs แล้ว แก้โค้ด
using PrimOnlineShoppingStore.Domain.Abstract;
using PrimOnlineShoppingStore.WebUI.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace PrimOnlineShoppingStore.WebUI.Controllers
{
public class ProductController : Controller
{
public int pageSize = 4;
private readonly IProductRepository repository;
public ProductController(IProductRepository repo)
{
repository = repo;
}
public ViewResult List(string category , int page = 1)
{
ProductsListViewModel model = new ProductsListViewModel()
{
Products = repository.Products
.Where( p=> category == null || p.Category == category)
.OrderBy(p => p.productID)
.Skip((page - 1) * pageSize)
.Take(pageSize),
pagingInfo = new PagingInfo()
{
CurrentPage = page,
ItemsPerPage = pageSize,
totalItems = category == null ? repository.Products.Count() :
repository.Products.Where( p => p.Category == category).Count()
},
CurrentCategory = category
};
return View(model);
}
}
}
ไม่มีความคิดเห็น:
แสดงความคิดเห็น