通过

第 1 部分：概述和文件 -> 新建项目

  • 项目

作者 ：Jon Galloway

MVC 音乐应用商店是一个教程应用程序，介绍并逐步说明如何使用 ASP.NET MVC 和 Visual Studio 进行 Web 开发。

MVC 音乐商店是一个轻量级的示例商店实现，用于在线销售音乐专辑，并实现基本的网站管理、用户登录和购物车功能。

本系列教程详细介绍了生成 ASP.NET MVC 音乐应用商店示例应用程序所执行的所有步骤。 第 1 部分介绍概述和文件新建>项目。

概述

MVC 音乐应用商店是一个教程应用程序，介绍并逐步说明如何使用 ASP.NET MVC 和 Visual Web Developer 进行 Web 开发。 我们将慢慢开始，因此初学者级别的 Web 开发体验是可以的。

我们将构建的应用程序是一个简单的音乐商店。 应用程序有三个main部分：购物、结帐和管理。

A S P dot Net Music Store 概述菜单的屏幕截图，其中包含用于选择流派或从顶部选择选项的选项。

访问者可以按流派浏览相册：

A S P dot Net 音乐商店流派专辑选择菜单的屏幕截图，其中显示了给定流派中的专辑集合。

他们可以查看单个相册并将其添加到购物车：

专辑选择窗口的屏幕截图，其中显示了专辑的名称、流派、艺术家和价格，以及添加到购物车的选项。

他们可以查看购物车，删除不再需要的任何商品：

“查看购物车”菜单的屏幕截图，其中包含总价格信息和用于编辑购物车或结帐的选项。

继续签出将提示他们登录或注册用户帐户。

“登录”菜单栏的屏幕截图，请求用户输入用户名和密码，以及单击“记住我”按钮的选项。

“创建新帐户”菜单栏的屏幕截图，该菜单栏请求用户名、电子邮件地址和包含六个或更多字符的密码。注册按钮位于屏幕底部。

创建帐户后，他们可以通过填写发货和付款信息来完成订单。 为了简单起见，我们正在运行一个惊人的促销：如果他们输入促销代码“免费”，一切都是免费的！

显示购买者发货和付款信息的输入选项的屏幕截图，以及用于输入促销代码的占位符。

订购后，他们会看到一个简单的确认屏幕：

确认屏幕的屏幕截图，该屏幕感谢客户提供订单并提供订单号。

除了面向客户的页面，我们还将生成一个管理员部分，其中显示了管理员可以从中创建、编辑和删除相册的相册列表：

管理员分区菜单的屏幕截图，其中显示了拥有的专辑的标题、艺术家和流派的列表;以及用于编辑或删除每个选项的选项。

1. 文件 -> 新建项目

安装软件

本教程首先使用免费的 Visual Web Developer 2010 Express (（免费) ）创建新的 ASP.NET MVC 3 项目，然后我们将逐步添加功能以创建一个完整正常运行的应用程序。 在此过程中，我们将介绍数据库访问、表单发布方案、数据验证、使用母版页实现一致的页面布局、使用 AJAX 进行页面更新和验证、用户登录等。

可以分步操作，也可以从 MVC-Music-Store 下载已完成的应用程序。

可以使用 Visual Studio 2010 SP1 或 Visual Web Developer 2010 Express SP1 (免费版本的 Visual Studio 2010) 来生成应用程序。 我们将使用SQL Server Compact (免费) 来托管数据库。 在开始之前，请确保已安装下面列出的必备组件。

  • [Visual Studio Web Developer Express SP1 先决条件]
  • [ASP.NET MVC 3 工具更新]
  • [SQL Server Compact 4.0] - 包括运行时和工具支持

创建新的 ASP.NET MVC 3 项目

首先，从 Visual Web Developer 中的“文件”菜单中选择“新建项目”。 此时会显示“新建项目”对话框。

Visual Web 开发人员文件菜单的屏幕截图，其中显示了用于创建新项目的选择和快捷方式键盘命令。

我们将选择左侧的“Visual C# -> Web 模板”组，然后在中心列中选择“ASP.NET MVC 3 Web 应用程序”模板。 将项目命名为 MvcMusicStore，然后按“确定”按钮。

“新建项目对话框”窗口菜单的屏幕截图，其中提供了不同的应用程序选项模板。

这将显示一个辅助对话框，它允许我们为项目进行一些特定于 MVC 的设置。 选择以下项：

项目模板 - 选择“空”

视图引擎 - 选择“Razor”

使用 HTML5 语义标记 - 已选中

验证设置是否如下所示，然后按“确定”按钮。

辅助对话框的屏幕截图，允许用户为其项目选择不同的设置。

这将创建我们的项目。 让我们在右侧的解决方案资源管理器中查看已添加到应用程序的文件夹。

创建项目后“解决方案资源管理器”窗口的屏幕截图，其中显示了已添加到应用程序的文件夹的列表。

空 MVC 3 模板并不完全为空 ， 它添加了基本文件夹结构：

上面提到的文件夹列表的缩放屏幕截图，突出显示已创建项目的名称。

ASP.NET MVC 使用文件夹名称的一些基本命名约定：

文件夹 用途
/控制器 控制器响应来自浏览器的输入，决定该输入的操作，并将响应返回给用户。
/视图 视图保存我们的 UI 模板
/模型 模型保存和操作数据
/内容 此文件夹包含我们的图像、CSS 和任何其他静态内容
/脚本 此文件夹保存 JavaScript 文件

这些文件夹甚至包含在空 ASP.NET MVC 应用程序中，因为 ASP.NET MVC 框架默认使用“约定而不是配置”方法，并根据文件夹命名约定进行一些默认假设。 例如，控制器默认在“视图”文件夹中查找视图，而无需在代码中显式指定。 坚持默认约定可以减少需要编写的代码量，还可以使其他开发人员更轻松地了解你的项目。 在构建应用程序时，我们将进一步解释这些约定。

下一页