一步步打造简单的MVC电商网站BooksStore（2）

深入MVC电商网站BooksStore：分类导航与购物车的构建之旅（二）

随着网络的发展与普及，电商网站已经成为了人们生活中不可或缺的一部分。在这个背景下，构建一个简单但功能齐全的MVC电商网站显得尤为重要。今天，我们将继续深入如何打造这样一个网站——BooksStore，并着重介绍如何添加分类导航和购物车功能。

一、回顾与简介

在上一篇文章中，我们已经初步构建了BooksStore电商网站的基础架构，包括创建项目、定义域模型实体、编写单元测试、创建控制器与视图等。在此基础上，我们将继续完善网站的功能，如分类导航和购物车。本次开发环境为VS2015，使用C6进行开发。

二、分类导航的实现

在电商网站中，分类导航是展示产品的重要方式之一。在BooksStore中，左侧栏将用于展示书籍的分类。为了实现这一功能，我们需要完成以下步骤：

1. 在数据库中创建分类表，包括分类名称、描述等信息。

2. 在控制器中创建处理分类请求的方法，用于获取分类信息并展示在视图中。

3. 在视图层面，我们需要创建一个分部视图（Partial View），用于展示分类导航。这个分部视图可以包含分类的名称、图片等信息。

三、购物车的构建

购物车是电商网站的核心功能之一，用户可以在购物车内添加、删除商品，查看商品详情等。在BooksStore中，购物车的实现需要以下几个步骤：

1. 在数据库中创建购物车表，记录用户ID、商品ID、商品数量等信息。

2. 在控制器中创建处理购物车相关请求的方法，如添加商品到购物车、从购物车删除商品等。

3. 在视图层面，我们需要创建一个购物车视图，展示购物车中的商品信息，包括商品名称、价格、数量等。用户可以在这个视图中对购物车中的商品进行操作。

四、总结与展望

本次我们详细介绍了如何为BooksStore电商网站添加分类导航和购物车功能。这两个功能的实现涉及到了数据库设计、控制器方法的编写以及视图的展示。这只是构建电商网站的一个小部分，未来我们还将实现更多功能，如产品浏览、结算、CRUD管理、发邮件等。欢迎感兴趣的小伙伴们一起参与进来，共同完善这个电商网站。

在后续的文章中，我们将继续如何完善BooksStore电商网站的功能，敬请期待！如果在开发过程中遇到任何问题，欢迎在留言区留言，我们会尽快回复。页面样式方面，由于时间有限，可能还存在一些不足，希望大家谅解。回到之前的BookDetailsViewModels视图模型，我们决定为它注入新的生命力，增加一项分类属性，命名为CurrentCategory。

///

/// 书籍详情视图模型

///

public class BookDetailsViewModels : PagingInfo

{

public IEnumerable Books { get; set; }

///

/// 当前分类

///

public string CurrentCategory { get; set; }

}

完成视图模型的修改后，紧接着，我们需要在BookController中的Details方法里进行相应的调整。让我们来仔细修改这个方法。

BookController.cs 文件中，我们打开了Details方法的大门，热情地欢迎分类参数category的加入，让页码参数pageIndex默认为1。接下来，我们创建一个新的BookDetailsViewModels实例，填充它以丰富的数据。这里的Lambda表达式x => category == null || x.Category == category发挥了关键的作用。当分类字符串为空时，它将获取库中的所有Book实体；当分类字符串不为空时，它将根据分类筛选出相应的书籍。这样的设计使得我们可以灵活地获取不同分类下的书籍信息。修改后的代码如下：

namespace Wen.BooksStore.WebUI.Controllers

{

public class BookController : Controller

{

private readonly IBookRepository _bookRepository;

public int PageSize = 5;

public BookController(IBookRepository bookRepository)

{

_bookRepository = bookRepository;

}

///

/// 显示书籍详情，可以根据分类进行筛选

///

/// 书籍分类

/// 页码

///

public ActionResult Details(string category, int pageIndex = 1)

{

var model = new BookDetailsViewModels

{

Books = _bookRepository.Books.Where(x => category == null || x.Category == category) // 根据分类筛选书籍信息，若分类为空则获取所有书籍信息。 当前分类设置为category的值。对于分页信息，设置PageSize为每页显示的书籍数量，PageIndex为当前页数。TotalItems则表示书籍的总数量。将这些信息全部放入模型后返回视图进行展示。 var model = new BookDetailsViewModels

{

深入调整书籍存储系统：细节优化与功能完善

在进行书籍展示的细节优化时，我们需要注意几个关键的修改点。

一、对CurrentCategory属性进行赋值

确保在适当的地方对CurrentCategory属性进行赋值，以便在视图和路由中正确使用。这是分页功能的基础，因为分页是根据TotalItems属性进行的。

二、修改LINQ查询以统计不同分类的书籍数量

我们需要修改地方_bookRepository.Books.Count的LINQ查询，以便它能够统计不同分类情况的个数。这样，我们可以更准确地执行分页操作。修改后的查询应类似于以下形式：

```csharp

int count = _bookRepository.Books.Count(x => category == null || x.Category == category);

```

这将帮助我们获取特定分类下的书籍数量。

三、修改Details.cshtml中的分页辅助器

在Details.cshtml视图中，我们需要修改分页辅助器，以添加新的路由参数。修改后的代码如下：

```html

```这样，我们就可以在分页时保持当前分类不变，同时根据页面索引进行跳转。

四、调整路由配置以适应新的需求

在RouteConfig.cs文件中，我们需要调整路由配置以适应新的需求。具体来说，我们需要添加一个新的路由规则来处理带有分类参数的URL。修改后的路由配置如下：

```csharp

public static void RegisterRoutes(RouteCollection routes)

{

routes.IgnoreRoute("{resource}.axd/{pathInfo}");

routes.MapRoute(

name: "Default",

url: "{controller}/{action}",

defaults: new { controller = "Book", action = "Details" }

);

routes.MapRoute(

name: "BookDetailsWithCategory",

url: "{controller}/{action}/{category}", // 新增带有分类参数的路由规则

defaults: new { controller = "Book", action = "Details" }

);

routes.MapRoute(

name: "BookDetailsWithCategoryAndPageIndex", // 新增带有分类和页面索引参数的路由规则，支持分页功能。注意这里的pageIndex是可选参数。这意味着我们可以根据分类直接跳转到特定页面进行浏览书籍列表。这是提高用户体验的关键一步。我们还创建了一个新的NavController控制器，专门用于处理侧边栏的渲染逻辑。该控制器包含一个名为Sidebar的方法，用于返回侧边栏的内容作为PartialView分部视图类型。这样，我们可以更灵活地管理和渲染侧边栏的内容。在方法体中右键点击时，选择创建分部视图选项来生成对应的视图文件。通过这种方式，我们可以确保侧边栏的内容与主视图保持分离，便于维护和更新。这些改动将有助于提升网站的可用性和用户体验，为书籍展示系统增添更多的个性化功能。综合以上改动，我们的书籍存储系统将变得更加完善和用户友好。我们将能够根据不同分类展示书籍列表并进行分页浏览，同时提供侧边栏作为辅助导航工具。这些优化措施将为我们提供更高效、更便捷的书籍管理体验。一、Sidebar.cshtml的改造

```csharp

@model IEnumerable

• @Html.ActionLink("所有分类", "Index", "Book")

@foreach (var category in Model)

{

• @Html.RouteLink(category, new { controller = "Book", action = "Details", category = category, pageIndex = 1 }, new { @class = ViewBag.CurrentCategory == category ? "selected" : null })

}

```

在修改后的_Layout.cshtml布局页中，由于需要呈现另一个Action中的分部视图，我们可以使用RenderAction()方法来嵌入Sidebar动作。启动应用后，界面布局应与原图1保持一致，点击左侧边栏的分类时，主区域的内容会相应更新。

二、购物功能的加入

对于购物功能的实现，我们首先在图书区域添加一个“添加到购物车”的链接。点击该链接后，用户将被引导到一个新页面，展示购物车的详细信息——购物清单。我们还提供一个“结算”链接，点击后将会跳转到结算页面。

购物车作为应用程序业务域的一部分，应当有一个购物车实体作为域模型。在图2所示的功能界面中，我们可以将购物车的相关操作（如添加商品、删除商品、结算等）封装在一个购物车控制器中。当用户点击“添加到购物车”链接时，将触发控制器中的相应动作，更新购物车的状态并跳转到购物清单页面。

这样的设计使得界面更加友好，用户体验更加流畅。购物车的功能完善，能够满足用户的购物需求，同时也方便了应用程序的管理和维护。好的，我会尝试以更生动的语言重新阐述这两段内容，同时保持原文风格特点。

一、添加两个类

我们有一个名为“Cart”的类，就像是一个虚拟的购物车，你可以往里面添加、移除物品，还能清空购物车或统计购物车内的物品总价值。这个类内部有一个列表用于存放购物车中的每一个物品，每一个物品都是一个“CartItem”。

这是Cart类的简单介绍：

```csharp

///

/// 购物车

///

public class Cart

{

private readonly List _cartItems = new List();

///

/// 获取购物车的所有项目

///

public IList GetCartItems => _cartItems;

/// 添加书模型到购物车中

public void AddBook(Book book, int quantity)

{

// 添加逻辑代码... 省略部分细节... 主要是添加书籍到购物车中并更新数量等操作。

}

/// 从购物车中移除书模型

public void RemoveBook(Book book)

{

// 移除逻辑代码...省略部分细节...主要是从购物车中移除指定书籍的操作。

}

/// 清空购物车中的所有项目。就是清空购物车。你懂的！哈哈。下面同理不再赘述细节代码了哈。