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

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

}
到此,初步完成导航,点击运行如下所示:

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

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

通过修改 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);
}

原文地址:https://www.cnblogs.com/wfy680/p/12254673.html

时间: 2024-08-20 08:25:46

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

Asp.Net MVC5入门学习系列②

原文:Asp.Net MVC5入门学习系列② 添加一个Controller(控制器) 因为我们用的是Asp.Net MVC,MVC最终还是一套框架,所以我们还是需要遵循它才能玩下去,或者说是更好的利用来便于我们的开发,要是对MVC概念还有点模糊的,可以去我以前写的第一话 Asp.Net MVC 3.0[Hello World!]里开始部分就对此做了阐述.假定所有跟我一起学的都了解MVC的这么一个概念,我们就开始下面的步骤了: 现在我们开始添加一个Controller,具体如下: 我们选择创建一个

ASP.NET + MVC5 入门完整教程七 -—-- MVC基本工具(上)

https://blog.csdn.net/qq_21419015/article/details/80474956 这里主要介绍三类工具之一的 依赖项注入(DI)容器,其他两类 单元测试框架和模仿工具以后介绍. 1.准备示例项目 从创建一个简单的示例开始,名称为"EssentialTools" ,使用MVC空模板,如下所示: 创建模型类 在 Models 文件夹中添加一个名为 Products.cs 的类,添加内容如下 using System;using System.Collec

Asp.Net MVC5入门学习系列④

原文:Asp.Net MVC5入门学习系列④ 添加Model且简单的使用EF 对于EF(EntityFramework)不了解的朋友可以去百度文科或者在园子里搜一些简资源看下,假如和我一样知道EF的概念,那么就知道EF有一个code first的特性,什么意思呢!说的通俗简单明了点就是:通过代码映射到数据库!有朋友会说这里不是添加Model说这个EF干啥呢!说这个code first呢就是我们在一会添加Model的同时我打算利用EF的code first特性把我们的Model映射到数据库,这样我

Asp.Net MVC5入门学习系列①

原文:Asp.Net MVC5入门学习系列① 现在直接开始MVC5的学习系列,学习资源来自Micrsoft. 开始使用Asp.Net MVC 5 打开Visual Studio 2013,然后新建一个项目,具体如下图: VS13与12/10不同的是创建Web的时候你不能像以前那样直接选你要创建框架项目,而把这个选择集中在了第二步骤,当你操作完上面点击确定就可以看到一个集中所有web框架供你选择的窗体,具体如下: 然后点击确定,vs会帮我们完成创建mvc应用程序的动作. 创建完成后,我们的VS会呈

ASP.NET Aries 入门开发教程4:查询区的下拉配置

背景: 今天去深圳溜达了一天,刚回来,看到首页都是微软大法好,看来离.NET的春天就差3个月了~~ 回到正题,这篇的教程讲解下拉配置. 查询区的下拉配置: 1:查询框怎么配置成下拉? 在配置表头:格式化配置 #是否 PS:格式化配置除了用来格式化表格的内容,同样也会下拉进行格式化. 效果: 那“#是否”是哪里来的? 在配置维护里来的,对于固定的选项,统一在这里配置: 2:查询框下拉能不能多选? 配置格式规则即可:multiple属性 效果: 3:查询框下拉能不能级联? 配置格式化规则指向上一级即

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

前言: 为了赶进度,周末也写文了! 前几篇讲完查询框和工具栏,这节讲表格数据相关的操作. 先看一下列表: 接下来我们有很多事情可以做. 1:格式化 - 键值的翻译 对于“启用”列,已经配置了格式化 #是否,已经可以看到效果了. 对于分类ID列,通常显示的是分类名称,而不是ID值. 可是分类名称不在文章表里,在文章分类表,怎么关联格式化呢? 我们有文章分类表: 所以我们写个下拉配置: 然后在配置表头里把它配置上: 效果: PS:通过自定义语句来翻译下拉项的注意事项: 1:翻译项的数量在100以下,

Asp.Net MVC5入门学习系列⑥

接着上次的篇幅,我们这篇手动来写一个查询的流程代码! 搜索/查询 流程功能的实现 那现在要做搜索(查询)功能我们第一步应该做什么呢!第一次是不是我们应该去Controller(控制器)里去搞一个搜索(查询)的方法(action),那么我就说做搜索功能吧!搜索可能是根据名字搜索,如果根据某一个条件搜索的话,那么我们的方法就需要一个参数,如果是多个条件的话就需要多个参数给方法传递多个参数,这么说你的方法的参数多少是不是就取决你我们的搜索条件.我们开始就先做一个简单的单条件查询. 我们把这个搜索的功能

Asp.Net MVC5入门学习系列③

添加一个视图(View) 接着上篇的入门系列,上面解说添加一个简单Controller(控制器),这里我们简单的在来添加一个View(视图)来展示我们Controller里执行完(Action)动作/方法后的结果. 我们修改我们的HelloWorldController到默认创建的代码,如下: 然后我们在Views/HelloWorld文件夹里来添加一个Index的视图,在添加的时候我们选择使用模版,具体操作如下: 然后选择_Layout.cshtml作为我们的模板点击确定后项目结构如下. 简单

Asp.Net MVC5入门学习系列⑤

原文:Asp.Net MVC5入门学习系列⑤ 检查VS生产的编辑方法和编辑窗体 前面我们一步使用强类型,然后创建Controller(控制器)的时候,VS默认已经给我们把CURD都简单的实现了.这篇的话就简单的看下它默认实现的代码,VS终归强大,但是方便的同时也是在弱化我们,当然大牛级别的这样搞是为了效率,我们新手的话还是建议不要去偷那个懒,至于为什么?不解释啦..... 我们打开我们的创建的实体对象Movie类,然后再ReleaseDate属性上添加一些标识特性,具体如下: 我们设置了一下Re