ASP.NET + MVC5 入门完整教程八 -—-- 一个完整的应用程序（下）

时间：2021-07-13 19:10:32

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

SportsStore

1、导航

添加导航控件

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

ASP.NET + MVC5 入门完整教程八 -—-- 一个完整的应用程序（下）

添加一个新的属性 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 class="btn-group pull-right">
@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 class="navbar navbar-inverse" role="navigation">
<a class="navbar-brand" href="#">SPORTS STORE</a>
</div>
<div class="row panel">
<div id="cateagories" class="col-xs-3">
@Html.Action("Menu", "Nav")
</div>
<div class="col-xs-8">
@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" : "")
})

}
到此，初步完成导航，点击运行如下所示：
ASP.NET + MVC5 入门完整教程八 -—-- 一个完整的应用程序（下）

要做的最后一件事就是修正页面链接

当前，页面链接的数目是由产品总数决定的，而不是有分类产品数决定，这意味着，点击分类页第二页，得到的是一个空白页，因为没有足够的产品来填充。如下所示：

ASP.NET + MVC5 入门完整教程八 -—-- 一个完整的应用程序（下）

通过修改 Product 控制器中的 List 方法，编辑如下所示：

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 = category == null ? repository.Products.Count() : repository.Products.Where(e => e.Category == category).Count()
},CurrentCategory=category
};
return View(model);
}

ASP.NET + MVC5 入门完整教程八 -—-- 一个完整的应用程序（下）

ASP.NET + MVC5 入门完整教程八 -—-- 一个完整的应用程序（下）的更多相关文章

  1. ASP&period;NET &plus; MVC5 入门完整教程八 -—-- 一个完整的应用程序（上）

    https://blog.csdn.net/qq_21419015/article/details/80509513 SportsStore 1.开始创建Visual Studio 解决方案和项目这里 ...

  2. Asp&period;Net MVC5入门学习系列③

    原文:Asp.Net MVC5入门学习系列③ 添加一个视图(View) 接着上篇的入门系列,上面解说添加一个简单Controller(控制器),这里我们简单的在来添加一个View(视图)来展示我们Co ...

  3. Asp&period;Net MVC5入门学习系列②

    原文:Asp.Net MVC5入门学习系列② 添加一个Controller(控制器) 因为我们用的是Asp.Net MVC,MVC最终还是一套框架,所以我们还是需要遵循它才能玩下去,或者说是更好的利用 ...

  4. ASP&period;NET &plus; MVC5 入门完整教程七 -—-- MVC基本工具（上）

    https://blog.csdn.net/qq_21419015/article/details/80474956 这里主要介绍三类工具之一的 依赖项注入(DI)容器,其他两类 单元测试框架和模仿工 ...

  5. ASP&period;NET &plus; MVC5 入门完整教程三 &lpar;下&rpar; ---MVC 松耦合

    建立松耦合组件 MVC 模式最重要的特性之一视他支持关注分离,希望应用程序中的组件尽可能独立,只有很少的几个可控依赖项.在理想的情况下,每个组件都不了解其他组件,而只是通过抽象接口来处理应用程序的其他 ...

  6. ASP&period;NET Aries 入门开发教程6：列表数据表格的格式化处理及行内编辑

    前言: 为了赶进度,周末也写文了! 前几篇讲完查询框和工具栏,这节讲表格数据相关的操作. 先看一下列表: 接下来我们有很多事情可以做. 1:格式化 - 键值的翻译 对于“启用”列,已经配置了格式化 # ...

  7. ASP&period;NET Aries 入门开发教程4：查询区的下拉配置

    背景: 今天去深圳溜达了一天,刚回来,看到首页都是微软大法好,看来离.NET的春天就差3个月了~~ 回到正题,这篇的教程讲解下拉配置. 查询区的下拉配置: 1:查询框怎么配置成下拉? 在配置表头:格式 ...

  8. ASP&period;NET MVC 入门系列教程

    ASP.NET MVC 入门系列教程 博客园ASP.NET MVC 技术专题 http://kb.cnblogs.com/zt/mvc/ 一个居于ASP.NET MVC Beta的系列入门文章,有朋友 ...

  9. Asp&period;Net MVC5入门学习系列①

    原文:Asp.Net MVC5入门学习系列① 现在直接开始MVC5的学习系列,学习资源来自Micrsoft. 开始使用Asp.Net MVC 5 打开Visual Studio 2013,然后新建一个 ...

随机推荐

  1. required

    required,这是HTML5中的一个新属性:这是HTML5中input元素中的一个属性. required译为必须的,在input元素中应用这一属性,就表示这一input元素节点是必填的或者必选的 ...

  2. Preserving Remote IP&sol;Host while proxying

    因为这个文章用一般手段看不到,所以摘录下来备用 (From http://kasunh.wordpress.com/2011/10/11/preserving-remote-iphost-while- ...

  3. &lbrack;转&rsqb; js prototype详解

    JavaScript能够实现的面向对象的特征有:·公有属性(public field)·公有方法(public Method)·私有属性(private field)·私有方法(private fie ...

  4. Bluebird-Core API &lpar;三&rpar;

    Promise.join Promise.join( Promise<any>|any values..., function handler ) – -> Promise For ...

  5. C语言学习&lowbar;C如何在一个文件里调用另一个源文件中的函数

    问题 C如何在一个文件里调用另一个源文件中的函数,如题. 解决办法 当程序大了代码多了之后,想模块化开发,不同文件中存一点,是很好的解决办法,那我们如何做才能让各个文件中的代码协同工作呢?我们知道,m ...

  6. 请写一个C函数，判断处理器是大端存储还是小端存储，若处理器是Big&lowbar;endian的，则返回0；若是Little&lowbar;endian的，则返回1

    [解答] int checkCPU() { { union w { int a; char b; }c; c.a=1; return (c.b==1); } } [剖析] 嵌入式系统开发者应该对Lit ...

  7. ubuntu创建wifi热点&lpar;android可识别&rpar;亲测可用

    转自http://jingyan.baidu.com/article/ea24bc39b03fc6da62b331f0.html 如何在ubuntu系统下创建android可识别热点?一般环境下创建的 ...

  8. Guava新增集合类型-Multiset

    Guava新增集合类型-Multiset Guava引进了JDK里没有的,但是非常有用的一些新的集合类型.所有这些新集合类型都能和JDK里的集合平滑集成.Guava集合非常精准地实现了JDK定义的接口 ...

  9. http初探

    http超文本传输协议 一.版本差异: 版本分0.9   1.0   1.1    2.0 http0.9/1.0已经过时:目前主要是1.1版本的,2.0版本的还没普及. http1.1 ----在同 ...

  10. Tomcat 启动报错：host-manager does not exist or is not a readable directory

    http://blog.csdn.net/yh88356656/article/details/50519120 新安装一个Tomcat,我们肯定会删除Tomcat Webapps下的自带项目,在考入 ...

相关文章