当前位置：首页 > Web开发 > 正文

ASP.NET + MVC5 入门完整教程八

2024-03-31 Web开发

https://blog.csdn.net/qq_21419015/article/details/80802931

SportsStore 1、导航添加导航控件

如果客户能够通过产品列表进行分类导航，SportsStore 措施会越发实用。那么如何实现过滤产品列表，这里首先要从是视图类模型 ProductsListViewModel 开始，对该类进行如下改削：

技术图片

添加一个新的属性 CurrentCategory ，接着更新 Product 控制器，使得 List 行动要领能够通过分类来过滤 Product 东西，改削如下所示：

public ViewResult List(string category,int page = 1)
{
ProductsListViewModel model = new Models.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);
}

上述清单对List要领做了3处改削:

第一处改削是添加了一个名为 category的参数；

第二处改削是在列表中使用这个 category参数,以使LINQ盘问得到增强,如果 category非空,则只选出与Category属性匹配的那些 Product东西(请注意, category和 Category是差此外,前者是字符串参数后者是 Product属性)；

最后一处改削是设置添加到 ProductsListViewModel类上的 CurrentCategory 属性的值。

在 List.cshtml 中添加分页连接信息，如下所示

在 List.cshtml 中添加分页连接信息，如下所示：

@model SportsStore.WebUI.Models.ProductsListViewModel
@{
ViewBag.Title = "Products";
}
@foreach (var item in Model.Products)
{
@Html.Partial("ProductSummary",item)
}

<div>
@Html.PageLinks(Model.PagingInfo,x=>Url.Action("List",
new { page=x,category=Model.CurrentCategory}))
</div>

成立分类导航菜单 创建导航控制器 NavController ：

右击 SportsStore. WebUI项目中的 Controllers文件夹,从弹出的菜单中选择“Add(添加)Controller(控制器)”。打开相应的对话框,从下拉列表中选择“MvC5 Controller- Empty(Mvc5控制器空)”,单击“Add(添加)”按钮,将控制器名称设置为“ NavController”,单击“Add(添加)”按钮,便可以创建这个 NavController.cs类文件。在此中删除 Visual studio添加新控制器时默认创建的 Index要领,并添加一个新的行动要领,其名称为“Menu”,如下所示。

public class NavController : Controller
{
// GET: Nav

public string Menu()
{
return "Hello 凌霜残雪";
}

}

该要领返回一个静态动静字符串。

编纂 Views/Shared/_Layout.cshtml 文件如下：

<body>
<div role="navigation">
<a href="#">SPORTS STORE</a>
</div>
<div>
<div>
@Html.Action("Menu", "Nav")
</div>
<div>
@RenderBody()
</div>
</div>
</body>

编纂 NavController 如下所示：

using SportsStore.Domain.Abstract;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace SportsStore.WebUI.Controllers
{
public class NavController : Controller
{
// GET: Nav
private IProductsRepository repository;

public NavController(IProductsRepository repo)
{
repository = repo;
}
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);
}
}
}

接下来给 Menu 要领创建视图

右键 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" : "")
})

}
到此，初阶完成导航，点击运行如下所示：