实现分类导航功能
步骤1:在ProductListViewModel视图模型中新增代码
public class ProductListViewModel
{
public IEnumerable<Product> Products { get; set; }
public PagingInfo PagingInfo { get; set; }
public string CurrentCategory { get; set; }
}
步骤2:在控制器中修改相应代码
public ViewResult List(string category, int Page=1)
{
ProductListViewModel model = new ProductListViewModel
{
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()
TotalItems = category == null ? repository.Products.Count() :
repository.Products.Where(
e => e.Category == category).Count()
},
CurrentCategory=category
};
return View(model);
}
步骤3:新增导航控制器Nav
public class NavController : Controller
{
private IProductsRepository repository;
public NavController(IProductsRepository 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);
}
}
步骤4:在_layout.cshtml页面中修改代码如下,:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="~/Content/bootstrap.css" rel="stylesheet"/>
<link href="~/Content/bootstrap-theme.css" rel="stylesheet"/>
<title>@ViewBag.Title</title>
</head>
<body>
<div class="navbar navbar-inverse" role="navigation">
<a class="navbar-brand" href="#">Zlz Store</a>
</div>
<div class="row panel">
<div id="categories" class="col-xs-3">
@Html.Action("Menu","Nav")
</div>
<div class="col-xs-8">
@RenderBody()
</div>
</div>
</body>
</html>
步骤5:新增Menu视图
@model ZlzStore.WebUI.Models.ProductListViewModel
@using ZlzStore.WebUI.HtmlHelpers
@{
ViewBag.Title = "Products";
}
<div>
@foreach (var p in Model.Products)
{
@*<div class="well">
<h3>
<strong> @p.Name</strong>
<span class="pull-right label label-primary">@p.Price.ToString("c")</span>
</h3>
<span class="lead">@p.Description</span>
</div>*@
@Html.Partial("ProductSummary",p)
}
</div>
<hr />
<div class="btn-group pull-right">
@Html.PageLinks(Model.PagingInfo,x=>Url.Action("List",new { Page=x,category=Model.CurrentCategory}))
</div>
步骤6:ListS视图代码修改如下:
@model ZlzStore.WebUI.Models.ProductListViewModel
@using ZlzStore.WebUI.HtmlHelpers
@{
ViewBag.Title = "Products";
}
<div>
@foreach (var p in Model.Products)
{
@*<div class="well">
<h3>
<strong> @p.Name</strong>
<span class="pull-right label label-primary">@p.Price.ToString("c")</span>
</h3>
<span class="lead">@p.Description</span>
</div>*@
@Html.Partial("ProductSummary",p)
}
</div>
<hr />
<div class="btn-group pull-right">
@Html.PageLinks(Model.PagingInfo,x=>Url.Action("List",new { Page=x,category=Model.CurrentCategory}))
</div>
步骤7:在项目中的app_start/RouteConfig.cs中修改代码如下,修改路由:
routes.MapRoute(null, "Page{page}",
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}");
结果如下:
仅以此文,献给自己