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

逐步构建简单MVC电商网站——BooksStore（三）

随着前两篇文章的逐步推进，我们已经完成了电商网站BooksStore的分类导航和添加商品到购物车的功能。本文将带领大家完成整个购物车的流程以及订单处理，让你的电商网站更加完善。

一、简介

我们的目标是在本节中完成购物车的完整流程，包括订单结算等核心功能。在上一节中，我们已经实现了移除购物车商品和清空购物车的方法，但尚未将这些操作对应的按钮放置在页面区域。我们还需要在页面的顶部位置展示购物车的摘要信息，包括商品数量和总金额。我们将继续完善狼蚁网站SEO优化的CartController代码。

二、主要任务

1. 完善购物车页面，添加移除购物车商品和清空购物车的按钮。

2. 在页面顶部显示购物车的摘要信息。

3. 实现订单结算功能，包括填写收货地址、选择支付方式等步骤。

三、详细步骤

1. 在购物车页面，为每个商品添加“移除”按钮，并绑定相应的移除事件。当用户点击“移除”按钮时，调用后端API删除购物车中的对应商品。

2. 在购物车页面顶部，添加一个摘要区域，展示购物车中的商品数量和总金额。当购物车中的商品发生变化时，实时更新摘要信息。

3. 创建一个新的订单结算页面，引导用户填写收货地址、选择支付方式等信息。在填写完信息后，调用后端API完成订单创建和支付。

四、技术要点

在开发过程中，我们将使用VS2015和C6进行开发。涉及到的技术点包括MVC的控制器和视图的设计、模型绑定、认证过滤器以及单元测试等。对于页面设计，我们会注重用户体验和页面美观度，尽管在初始阶段可能不够完美。

五、总结与展望

通过本文的学习，你已经掌握了如何完善一个简单的MVC电商网站的购物车功能，并实现了订单结算的核心流程。在后续的文章中，我们还将介绍如何进一步完善电商网站的功能，如商品浏览、CRUD管理、发邮件等功能。敬请期待！

购物车的旅程：从添加书籍到清空购物车的神奇之旅

在我们的虚拟书店中，有一个重要的角色——购物车控制器。这个控制器负责处理用户与购物车的交互，从浏览书籍到购买心仪的商品。下面让我们揭开这个控制器的神秘面纱。

想象一下，当用户想要购买一本书时，他们会遇到什么样的场景呢？他们会浏览书架上的书籍，选中自己喜爱的书籍后，将其添加到购物车中。这一切都是通过我们的购物车控制器来实现的。控制器接收到用户的请求后，会执行相应的操作，如添加书籍到购物车中。这个过程中涉及到的代码是 `AddToCart` 方法。当书籍成功添加到购物车后，用户会被重定向到购物车的页面，也就是 `Index` 方法所负责的页面。

接下来，当用户打开购物车的页面时，他们会看到自己的购物车中都有哪些书籍，以及这些书籍的价格、数量等信息。这一切都是通过 `Index` 方法来实现的。这个方法会将购物车的状态渲染到页面上，让用户一目了然地看到他们的购物清单。用户还可以从购物车中移除书籍。这个过程是通过 `RemoveFromCart` 方法来实现的。当用户点击移除按钮时，对应的书籍会从购物车中被移除，并更新页面的显示状态。我们还添加了清空购物车的功能，方便用户一键清空购物车中的所有商品。这个功能是通过 `Clear` 方法来实现的。这些方法共同构成了购物车控制器的核心功能。那么这一切是如何在后台实现的呢？这就需要依赖我们的私有方法 `GetCart` 来获取购物车的状态并进行相应的操作了。通过 `Session` 来存储购物车的状态是一个常用的方法。此外还依赖到了 `_bookRepository` 来获取书籍的信息。而视图部分，则通过 `Index.cshtml` 文件来呈现购物车的状态和用户交互的按钮等组件。为了让用户能够更方便地移除书籍和清空购物车，我们使用了隐藏的表单字段来提交数据。这些都是前端开发中的常用技巧。总体来说，购物车控制器是一个重要的组成部分，它使得用户在浏览书籍的同时也能方便地管理自己的购物清单。无论是添加书籍、移除书籍还是清空购物车，都能轻松实现。这就是我们的购物车控制器所扮演的角色和它的功能特点。购物新体验：精心设计的购物车摘要与概览功能

在繁忙的购物体验中，我们深知您对于便捷与效率的追求。为此，我们对购物车设计进行了全新的改造与升级，旨在为您提供更为直观、便捷的购物体验。在这个数字化的时代，购物也需与时俱进，展现出更多的智能与便捷。我们的购物车设计正是这一理念的完美体现。

一、醒目位置的购物摘要

我们的购物车设计了一个独特的摘要区域，它位于购物页面的顶部右上角，位置十分显眼。在这个区域，您可以一目了然地看到您的购物总额，无需进入详细的购物清单页面，就能快速了解购物情况。这一设计极大地提升了购物的便捷性，让您在浏览商品的也能轻松掌握自己的购物进度。

二、简洁的购物清单页面跳转

为了让您更详细地了解购物车中的商品，我们还在摘要区域旁边设置了一个醒目的跳转按钮。只需一键点击，即可跳转到购物清单页面，详细查看每一件商品的详细信息。这一设计不仅让购物变得更加便捷，也让您在享受购物乐趣的能更高效地管理自己的购物车。

三、购物的个性化体验

除了便捷的功能设计，我们还致力于提供个性化的购物体验。我们的购物车设计融合了现代审美与实用性，旨在为您打造一个既美观又实用的购物环境。无论是购物的过程还是购物的结果，都能让您感受到我们的用心与关怀。

我们的购物车设计以用户为中心，以提供便捷、高效的购物体验为目标。无论是购物摘要还是跳转按钮的设计，都是为了更好地满足您的需求，提供更优质的购物体验。在这个数字化的时代，让我们一起享受购物的乐趣与便捷吧！在CartController上，我们进一步增加了一个名为Summary的动作，这个新的动作返回一个分部视图。它的任务是在页面上显示购物车的摘要信息。下面是具体的代码实现：

Summary动作的代码片段如下：

```csharp

///

/// 显示购物车摘要信息

///

/// 分部视图结果

public PartialViewResult Summary()

{

// 获取购物车信息并返回分部视图进行展示

return PartialView(GetCart());

}

```

对应的Summary.cshtml视图文件如下：

```html

@model Wen.BooksStore.Domain.Entities.Cart

```

接下来，我们对布局页_Layout.cshtml进行了修改，将Summary动作渲染到页面的头部位置。修改后的代码如下：

```html

```

为了配合新的布局和动作，我们也对Site.css进行了相应的调整，增加了针对购物车摘要的样式定义：

```css

/ 其他样式省略 /

.bookSummary { / 定义购物车摘要的样式 /

width: 30%; / 可根据需要调整宽度 /

float: right; / 将购物车摘要置于页面右侧 /

margin: 1%; / 设置外边距 /

padding: 1em; / 设置内边距 /

background-color: f0f0f0; / 设置背景色 /

}

``` 接下来是订单结算部分的说明。购物完成后，用户将进入结算页面。在这个阶段，我们的系统主要使用邮件的形式进行通知，并不涉及复杂的支付接口调用。结算页面的设计和实现将依赖于具体的业务需求和技术选型。可能涉及的方面包括订单信息的确认、支付方式的展示、邮件发送等。在前端页面，结算页面需要清晰地展示订单详情，包括商品列表、总价、优惠信息等，并提供提交订单的按钮。在后台，系统将处理订单信息，生成订单号，并通过邮件的形式将订单详情发送给用户。订单结算页面是购物流程的重要一环，需要确保用户体验和交易安全。通过合理的页面设计和后台逻辑处理，我们可以为用户提供便捷、安全的购物体验。在这个系统中，结算环节的设计显得尤为重要。为了确保交易信息的准确无误，用户在进行结算时，需要填写一些关键信息。这些必要的信息包括姓名、地址以及电子等联系方式。一旦用户点击确认，我们将会将这些精确的信息与用户的购物清单数据一同通过系统发送到您所提供的中。这一流程设计得既直观又便捷，旨在为用户提供最佳的购物体验。

接下来，我们将深入系统背后的技术实现。在系统的实体（Entities）部分，我们特别设计了一个名为Contact.cs的域模型。这个模型的核心作用就是用来处理和存储联系人的相关信息。这一设计充分展示了我们对细节的重视以及对于用户体验的追求。

Contact.cs域模型作为一个强大的工具，能够有效地管理用户的联系人信息。它能够清晰地定义并区分不同的信息字段，如姓名、地址和电子邮件地址等。这些信息的准确录入和有效管理，确保了我们在后续操作中的准确性，如发送交易详情、促销信息等。通过这一模型，我们可以确保用户信息的完整性和安全性，从而为用户提供更加个性化和贴心的服务。

联系信息

在电商世界，保持联系是交易成功的关键一步。为此，我们为您设计了一个简洁明了的联系信息模型——Contact类。它包含了姓名、地址和三个关键字段，确保我们能够准确地与您取得联系。让我们深入了解每个字段背后的故事。

姓名，代表着您的身份，是建立联系的第一步。每当您浏览我们的网站或进行交易时，姓名都是不可或缺的标识。请确保填写完整，以便我们能够准确识别并与您沟通。

地址则是我们找到您所在地的关键信息。无论是送货还是其他后续服务，地址的准确性都至关重要。请务必提供正确的地址信息。

而则是我们与您保持联系的重要桥梁。您的地址将帮助我们发送订单确认、促销信息或其他重要通知。为确保信息的准确传达，请提供有效的地址，并确保格式正确。我们的系统将对地址进行校验，确保您提供的地址合法且有效。

结算流程

在购物完成后，您将进入结算环节。在这一环节，我们提供了一个名为Checkout的Action。当您点击结算按钮时，页面将展示一个包含联系信息的表单。这个表单正是基于我们前面提到的Contact类生成的。

在Checkout.cshtml页面中，您将看到清晰的表单布局，包括姓名、地址和三个字段的输入框。为了确保信息的准确性，我们引入了模型校验功能。这意味着，如果您不填写任何信息或填写格式不正确，系统将自动提示您相应的错误信息。

为了增强用户体验和表单验证功能，您需要在_Layout.cshtml布局页中引入相关的JavaScript文件。这些文件将帮助我们实现客户端端的表单验证，提高用户填写的准确性并减少错误提交的可能性。

一旦您完成填写并提交表单，您将看到一个清晰的页面，展示您的联系信息以及任何可能的错误提示。接下来的流程将根据您提交的信息进行后续处理，包括订单确认、支付等环节。

整个流程设计得既简单又直观，旨在为您提供最佳的购物体验。无论是购物过程还是结算环节，我们都致力于确保与您的沟通畅通无阻，让每一次交易都愉快而顺利。请放心填写您的联系信息，让我们共同开启愉快的购物之旅。您需要一个组件来处理订单，为此需要创建一个订单处理接口以及它的实现类。让我们通过 Ninject 框架将两者紧密地绑定在一起。

定义了一个名为 `IOrderProcessor` 的接口，这个接口的主要职责是处理订单。它的 `ProcessOrder` 方法接收购物车（`Cart`）和联系人信息（`Contact`）作为参数。

紧接着，我们创建了一个名为 `EmailOrderProcessor` 的类，这个类实现了 `IOrderProcessor` 接口。这个类的功能是通过电子邮件发送订单信息，而不是调用支付接口。在类中，定义了一个内部类 `Sender` 来存储发送邮件的账号和密码。

在实现 `ProcessOrder` 方法时，首先检查联系人信息中的电子邮件地址是否为空。如果为空，则抛出一个异常，因为电子邮件地址是必需的。如果不为空，那么就可以使用BCL中的类库来发送电子邮件。以下是这个类的部分代码：

```csharp

public class EmailOrderProcessor : IOrderProcessor

{

// ... 其他代码 ...

///

/// 处理订单

///

///

///

public void ProcessOrder(Cart cart, Contact contact)

{

if (string.IsNullOrEmpty(contact.Email))

{

throw new Exception("Email 不能为空！");

}

// 使用BCL中的类库发送电子邮件

// 这里可以添加具体的邮件发送逻辑

}

}

```

购物车结算与邮件通知

一、购物车结算流程

在精致的电商平台上，用户完成选购后，即将迈入激动人心的结算环节。CartController扮演着关键角色，此刻需要额外添加一个带有[HttpPost]特性的Checkout方法。当校验成功时，这个方法将触发一系列动作。

二、发送结算信息

当您点击“结算”按钮，后台代码开始忙碌起来。它通过GetCart方法获取当前的购物车内容。随后，调用_orderProcessor的ProcessOrder方法处理订单，这个方法会校验订单信息并触发相应的业务逻辑。一旦订单处理完毕，购物车将被清空，表示本次购物体验圆满结束。

三、邮件通知

为了让您实时了解订单状态，我们将在订单处理后发送一封邮件通知。这个过程需要通过电子邮件发送模块实现。让我们逐一看下邮件发送的详细步骤：

1. 构建邮件内容：以StringBuilder为工具，遍历购物车中的商品，生成详细的订单清单，包括书名、价格和数量。计算订单总额，并附上联系信息。

2. 设置发件人和收件人：发件人需与邮件发送服务器的账号一致。收件人为用户的联系。还可以设置抄送人，这里选择发送给发送者本人以便知晓。

3. 设置邮件标题和内容：标题简洁明了，如“您的订单正在出库...”。内容则包含具体的订单详情。

4. 选择邮件发送服务器：根据您使用的选择合适的服务器。这里以QQ为例，使用smtp.qq作为服务器地址，端口号为25。

5. 发送邮件：通过SmtpClient对象发送邮件，过程中需要设置账号的凭据、启用SSL安全传输等。

四、感谢页面

结算完成后，用户将被引导至一个感谢页面（Thanks.cshtml）。这个页面简洁明了，仅包含“Thanks”字样和一些简单的装饰图案，用以表达平台对用户的感谢之情。

五、绑定与启动

别忘了将相关组件进行绑定，使用DI容器（依赖注入容器）将邮件发送模块和CartController进行绑定。启动页面后，您可以尝试整个流程，看看是否一切如预期般顺利。

恭喜您成功完成购物车的结算与邮件通知功能！这是电商平台上不可或缺的一环，提升了用户的购物体验。希望这篇文章能对您的学习有所帮助，也希望大家多多支持我们的电商平台。

以上即为本文的全部内容，希望与大家共同分享、共同进步。