转载MVC音乐商店实例完整编辑中文版.doc

《转载MVC音乐商店实例完整编辑中文版.doc》由会员分享，可在线阅读，更多相关《转载MVC音乐商店实例完整编辑中文版.doc（163页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、,.目录ASP.NET MVC 音乐商店0.概览2ASP.NETMVC音乐商店-1创建项目7ASP.NETMVC音乐商店-2.控制器10ASP.NETMVC音乐商店-3.视图与模型19ASP.NETMVC音乐商店-4.数据访问41ASP.NETMVC音乐商店-5.通过支架创建编辑表单54ASP.NETMVC音乐商店5.通过支架创建编辑表单续70ASP.NETMVC音乐商店-6.使用DataAnnotations进行模型验证88ASP.NET MVC 音乐商店 - 7.成员管理和授权93ASP.NET MVC 音乐商店 - 8. 使用 Ajax 更新的购物车101ASP.NET MVC 音乐商店

2、 - 9. 注册和结账120ASP.NET MVC 音乐商店 - 10. 完成导航和站点的设计135ASP.NET MVC 音乐商店0.概览MVC 音乐店是用来介绍和展示使用 ASP.NETMVC 以及 Visual Studio 进行 Web 开发的示例应用程序，我们将从基础知识开始，一步一步地进行介绍，因此，初学者也可以去的很好的学习体验。这个示例程序使用 ASP.NET MVC3 完成，视图部分使用 Razor 引擎，数据库访问使用 EF CodeFirst。这个程序将会创建一个音乐商店，这个程序包括三个主要的部分：购物，结账和管理。用户可以通过分类浏览唱片。可以查看某张唱片，然后加入到

3、购物车中。可以查看购物车，删除其中不再希望购买的项目。在结账的时候，就会提示用户登录，或者注册一个新的账号。创建新帐号创建账号之后，用户可以填写完整的送货和结账信息，为了让这个程序简单一些，如果你在优惠券号中输入 FREE 的话，我们会提示一切免费。下完订单之后，用户会看到一个简单的确认提示。另外，我们还会提供一个管理员用来创建、修改、以及删除唱片的功能。这个项目我们将使用 ASP.NET MVC3 和 Visual Studio 完成。其中的知识涉及到数据访问，表单的提交，数据验证，母版页，布局，以及 AJAX 的更新和验证，用户的登录等等。ASP.NETMVC音乐商店-1创建项目我们的项目

4、从在 Visual Studio 中的文件菜单中选择“新建”，选择“项目”开始。然后，选择 C# 中的 Web 模板组，在右边的项目模板中选择 ASP.NET MVC3 Web 应用程序，在项目的名称输入框中，输入 MvcMusicStore ，点击确定。这时，你会到第二个对话框，允许我们设置这个项目关于 MVC 的一些设置，确认选中了“空”项目模板，视图引擎选中 Razor ，点击确定。这样我们的项目就创建成功了！我们看一下在这个项目都创建了哪些内容。在 ASP.NET MVC 中使用了下面的一些基本的命名约定文件夹功能/Controllers控制器接受来自浏览器的请求，进行处理，然后向用户

5、返回回应/Views视图文件夹保存用户界面的模板/Models这个文件夹定义处理的数据/Content我们的图片，CSS以及其他任何的静态内容放在这里/Scripts放置脚本文件/App_Data数据库文件这些文件夹在一个空的 ASP.NET MVC 应用中也会存在，因为 ASP.NET MVC 的框架默认使用“约定胜于配置”的原则，已经假定这些文件夹有着特定的用途。例如，控制器将会在 Views 文件夹中寻找相应的视图，而不需要你在代码中显式设置，这样可以节省大量的编程工作，也可以使其他的开发人员更加容易理解你的程序。在创建这个程序的过程 中，我们将会详细的说明这些约定。ASP.NETMVC

6、音乐商店-2.控制器在典型的 Web 应用中，用户请求的 URL 地址通常映射到保存在网站中的文件上，例如，当用户请求 /Products.aspx 的时候，或者 /Products.php 的时候，很可能是在通过处理 Products.aspx 或者 Products.php 文件来完成任务。ASP.NET MVC 的处理方式则不同，它没有映射到文件上，相反，将这些 URL 地址映射到类的方法上，这些类被称为“控制器”，控制器用来接受 HTTP 请求，处理用户的输入，获取或者保存数据，其中的处理方法称为 Action，然后将回应发送到客户端，可能是显示了一个 HTML 的网页，下载一个文件，

7、重定向到另外一个地址等等。默认的路由配置在新创建的项目中，打开 Global.asax.cs 文件，可以看到如下的代码。using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using System.Web.Routing;namespace MvcMusicStore / 注意: 有关启用 IIS6 或 IIS7 经典模式的说明， / 请访问 http:/ public class MvcApplication : System.Web.Htt

8、pApplication public static void RegisterGlobalFilters(GlobalFilterCollection filters) filters.Add(new HandleErrorAttribute(); public static void RegisterRoutes(RouteCollection routes) routes.IgnoreRoute(resource.axd/*pathInfo); routes.MapRoute( Default, / 路由名称 controller/action/id, / 带有参数的 URL new c

9、ontroller = Home, action = Index, id = UrlParameter.Optional / 参数默认值 ); / 一般用来进行网站的初始化 protected void Application_Start() System.Data.Entity.Database.SetInitializer(new MvcMusicStore.Models.SampleData(); AreaRegistration.RegisterAllAreas(); RegisterGlobalFilters(GlobalFilters.Filters); RegisterRoute

10、s(RouteTable.Routes); 其中 RegisterRoutes 方法注册了默认的路由配置，在方法中的 routes.MapRoute 语句中，请求地址将会被看成三个部分组成，controller/action/id，第一部分称为控制器，如果没有提供的话，默认为 Home, 第二部分称为 Action 方法，如果没有提供的话，默认为 Index, 第三部分称为 id, 通常用来提供数据的标识，没有默认值。这样，当请求 / 地址的时候，系统将会把请求映射到名为 Home 的控制器进行处理，调用其中名为 Index 的方法处理请求。增加 HomeController我们的应用商店从增

11、加一个首页的控制器开始，使用默认的命名约定，控制器的名称应该以 Controller 作为后缀，我们将这个控制器命名为 HomeController。在 Controller 文件夹上右击，然后选择“添加”，“控制器(T)”在弹出的对话框中，输入控制器的名字 HomeController，按下“添加”按钮。这样，将会创建一个名为 HomeController.cs 的文件，其中的代码如下：using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;na

12、mespace MvcMusinStore.Controllers public class HomeController : Controller / / GET: /Home/ public ActionResult Index() return View(); 为了尽可能地简单，我们让 Index 方法简单地返回一个字符串，这个字符串将作为回应内容直接返回浏览器，我们做下面的两个简单修改。 将方法的返回类型修改为string 将返回语句修改为 return Hello form Home;这样，我们的方法将会变成如下的内容public string Index() return Hell

13、o form Home;运行程序现在，可以运行一下了，我们可以启动服务器，使用下面的任何一种方法都可以。 选择“调试”，“启动调试”菜单 点击工具栏上的绿色的箭头按钮 使用键盘快捷方式，F5使用上面的任何一种方法都会导致编译项目，启动 Visual Studio 中内建的 ASP.NET 开发服务器.在屏幕的右下角会弹出一个启动 ASP.NET 开发服务器的提示，Visual Studio 将自动打开一个浏览器窗口，其中的地址指向我们的 Web 服务器，这使得我们可以快速使用我们的程序。Ok, 非常的简单，我们已经创建了一个 Web 站点，写了一个三行的函数，在浏览器中得到了这行文字， 不是很

14、震撼，但这仅仅只是开始。增加 StoreController我们已经为站点增加一个简单的 HomeController 作为首页，现在，增加另外一个控制器，可以用来浏览我们的音乐商店，我们的商店控制器将要支持三个场景： 列出商店中的唱片的分类 浏览商店中某个分类中的唱片列表 显示特定唱片的详细信息我们从增加一个新的 StoreController 开始，先停止刚才的程序，可以直接关闭浏览器，或者也可以在调试菜单中，选择停止调试。现在，增加一个新的 StoreController，像在 HomeController 中做的一样，我们在 Controllers 文件夹上右健，选择“添加”，“控制器

15、”.新的 StoreController 控制器中已经包含了 Index 方法，我们使用这个方法来实现列出所有分类的列表，我们还会再增加两个额外的方法来实现其他的场景：浏览和明细。这些包含在控制器中的方法，我们称为控制器中的 Action，像你在前面看到的，HomeController 中的 Index 方法就是一个 Action，这些 Action 的作用就是处理请求，然后返回对请求的处理结果。对于我们的 StoreController ，首先让 Index 这个 Action 返回一个“Hello” 串，然后，增加两个方法：Browse() 和 Detials()using System;

16、using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;namespace MvcMusinStore.Controllers public class StoreController : Controller / / GET: /Store/ public string Index() return Hello from Store.Index(); public string Browse() return Hello from Store.Browse(); publ

17、ic string Details() return Hello from Store.Details(); 重新运行程序，现在已经可以访问这些地址了。 /Store /Store/Browse /Store/Details太棒了，但是现在仅仅能够返回一些常量的字符串，让我们将它们变成动态的，我们从 URL 中获取一些信息，然后把他们显示在返回的页面中。首先，修改我们的 Browse 这个 Action，使得它可以从 URL 地址中获取查询信息，为方法增加一个名为“genre” 的字符串类型参数，当我们这样做的时候，ASP.NET MVC 就会自动把任何名为 genre 的请求参数的值赋予这个

18、参数。/ GET: /Store/Browse?genre=?Discopublic string Browse(string genre) string message = HttpUtility.HtmlEncode(Store.Browse, Genre = + genre); return message; 注意：我们使用了HttpUtility.HtmlEncode 方法来处理用户的输入，这样可以防止用户的脚本注入攻击。例如：/Store/Browse?Genre=window.location=http:/.现在，我们在浏览器中访问一下：/Store/Browse?Genre=Di

19、sco下一步，我们处理 Details 这个 Action，使它能够处理名为 ID 的整数类型参数。这次，我们不再在请求参数中传递这个整数，而是嵌在请求的 URL 地址中。例如：/Store/Details/5。在 ASP.NET MVC 中，我们可以轻易地完成这个任务而不需要配置任何东西，ASP.NET MVC 默认的路由约定会将跟在 Action 方法之后的部分看作名为 ID 的参数的值，如果你的 Action 方法有一个名为 ID 的参数，那么，ASP.NeT MVC 就会自动将这部分作为参数传送给 Action 方法，需要注意的是，MVC 可以帮助你完成数据类型之间的转换，所以，地址的

20、第三部分一定要可以转换为整数。/ GET: /Store/Details/5public string Details(int id) string message = Store.Details, ID = + id; return message;再次运行程序访问/Store/Details/5总结一下我们完成的任务： 创建了一个 ASP.NET MVC 项目 讨论了基本的项目文件夹 学习了如何运行开发服务器 创建了两个控制器 HomeController 和 StoreController 为控制器增加了 Action 方法。ASP.NETMVC音乐商店-3.视图与模型上一篇中有同学提到

21、为什么不使用视图，而使用字符串，这一篇我们就开始使用视图来处理。我们已经可以从控制器的 Action 中返回一个字符串，这可以帮助我们更好地理解 Controller 是如何工作的。但是对于创建一个 Web 程序来说还是不够的。下面我们使用更好的方法来生成 HTML，主要是通过模板来生成需要的 HTML，这就是视图所要做的。增加视图模板为了使用视图模板，我们需要将HomeController 中的 Index 这个 Action 的返回类型修改为 ActionResult，然后，让它像下面一样返回一个视图。public class HomeController : Controller / /

22、 GET: /Home/ public ActionResult Index() return View(); 上面的修改表示我们将使用视图来替换掉原来的字符串，以便生成返回的结果。现在为我们的项目增加一个视图，为达到这个目的，我们将光标移到 Index 方法内，然后，点击鼠标的右键，在右键菜单中选择“添加视图(D)”，这样将会弹出增加视图的对话框。添加视图的对话框允许我们快速，简单地创建一个视图模板，默认情况下，视图的名称使用当前 Action 的名字。因为我们是在 Index 这个 Aciton 上添加模板，所以添加视图对话框中，视图的名字就是 Index，我们不需要修改这个名字，点击添加

23、。在点击添加之后，Visual Studio 将会创建一个名为 Index.cshtml的视图模板，放置在 ViewsHome 目录中，如果没有这个目录，MVC 将会自动创建它。Index.cshtml 所在文件夹的名称和位置是很重要的，它是根据ASP.NET MVC 的约定来指定的。目录名称 ViewsHome ，匹配的控制器就是 HomeController ，视图模板的名字 Index，匹配将要使用这个视图的 Action 方法的名字。当使用默认的约定的时候，ASP.NET MVC 允许我们不用显式设置这些名字和位置，当我们的代码如下所示的时候，将会默认寻找 ViewsHomeIndex

24、.cshtml。public class HomeController : Controller / / GET: /Home/ public ActionResult Index() return View(); Visutal Studio 创建并打开了Index.cshtml 视图模板，其中的内容如下： ViewBag.Title = Index; Index 视图使用了 Razor 语法，这比 Web Form 视图引擎的语法更加简单。前三行使用 ViewBag.Title 设置了页面的标题，我们马上就可以看到这样做的效果，但是，首先，我们我们替换一下网页的内容，将 标记中的内容修改为

25、 This is the Home Page 。 ViewBag.Title = Index; This is the Home Page复制代码现在，我们的首页应该变成下面的样子。为页面的公共内容使用布局大多数的网站在页面之间有许多共享的内容：导航，页首，页脚，公司的 Logo，样式表等等。Razor 引擎默认使用名为 _Layout.cshtml 的布局来自动化管理，它保存在 /Views/Shared 文件夹中。打开之后，可以看到下列内容： ViewBag.Title RenderBody() 来自内容视图中的内容，将会被通过 RenderBody() 来显示，任何出现在网页中的公共内容

26、就加入到 _Layout.cshtml 中，我们希望我们的 MVC 音乐商店有一个公共的页首，其中含有链接到我们的首页和商店区域的链接，所以，我们将这些内容直接添加到这个布局中。 ViewBag.Title ASP.NET MVC MUSIC STORE Home Store RenderBody() 更新样式表在创建项目使用的空项目模板中，仅仅包含很简单的用来显示验证信息的样式。我们的设计师提供了一些额外的 CSS 样式和图片来改进网站的观感，现在我们就使用它们。首先，到网站 下载 MvcMusicStore-v3.0.zip，这里面有一个文件夹 MvcMusicStore-Assets，

27、将这个文件夹的Content 文件夹的内容复制到项目的 Content 文件夹中。你会被询问是否需要覆盖存在的文件，选择是。现在，网站的 Content 文件夹中的内容如下所示：重新运行程序，现在的页面变成了这样。我们回顾一下，什么发生了变化：HomeController 的 Index 的 Action 方法寻找并通过 ViewsHomeIndex.cshtml 模板生成输出结果，代码中是通过 return View() 实现的，因为默认的命名约定，Index 这个 Action 方法将会默认使用 Index 视图输出。而 Index 视图使用了我们的 _Layout.cshtml 模板，所

28、以，欢迎信息被包含在标准的 HTML 布局中。使用模型为视图传递信息仅仅使用硬编码的 HTML 不能创建令人感兴趣的网站，创建动态网站，我们需要从控制器的 Action 传送信息给视图模板。在 MVC 模式中，术语 Model 表示应用表现的数据，通常，模型对象用来表示数据库中保存在表中的数据，也不一定如此。控制器的 Action 方法通过返回的 ActionResule 可以传送模型对象给视图。这就允许控制器可以将所有生成回应需要的数据打包，然会传送给视图模板，以便生成适当的 HTML 回应，在 Action 方法中可以很容易理解，让我们开始吧。首先，我们将创建一些模型类来表示商店中的唱片类

29、型和专辑类型，从创建类型 Genre 类开始，在项目中，右击模型 Models 文件夹，然后选择增加类选项，然后命名为 Genre.cs。在新创建的类中增加一个属性。public class Genre public string Name get; set; 复制代码注意：这里的 get; set; 是 C# 的自动属性特性，这使得我们不需要在创建属性的时候，先创建一个成员字段现在，用同样的方法创建专辑类 Album，它有两个属性：Title 和 Genre .public class Album public string Title get; set; public Genre Genr

30、e get; set; 现在，我们修改 StoreController 通过模型来使视图显示动态信息，为了演示方便，我们定义专辑基于一个唯一的标识 Id, 我们将在视图中显示这个标识。我们从修改 Details 这个 Action 使得可以显示单个的专辑开始，在 StoreController.cs 的开始部分增加一些 using 语句来包含 MvcMusicStore.Models 命名空间，这使得我们不用总是输入这个命名空间。using System; using System.Collections.Generic; using System.Linq; using System.Web

31、; using System.Web.Mvc; using MvcMusicStore.Models;复制代码然后，我们更新 Details Action ，使得返回 ActionResult 类型的结果而不是字符串，就像在 HomeController 中的 Index 方法中做得一样。public ActionResult Details(int id) 现在，修改方法的处理逻辑，返回一个专辑对象到视图中，在这个项目最后，显示的数据将会来自数据库，现在我们仅仅填充一些数据而已。public ActionResult Details(int id) var album = new Album

32、 Title = Album + id ; return View(album); 复制代码如果你对 c# 不太熟悉，可能你会认为使用 var 定义变量使用了迟绑定，这是不正确的，C# 编译器使用赋予变量的值来推定变量的类型，所以，实际上变量的类型就是 Album 类型，因此不仅在编译时， Visual Studio 的代码编辑器中也会有类型支持。下面创建一个使用专辑来生成 HTML 的模板，在这样做之前，我们需要编译项目，以便增加视图的对话框知道我们新创建的专辑类型。你可以通过菜单“生成”的“生成解决方案”来完成。另外，也可以通过热键 Ctrl Shift B 来编译项目。已经可以创建视图模

33、板了，在 Details 方法中右键选择“增加视图”像以前一样，我们看到创建视图的对话框，不一样的是，我们要选中“创建强类型视图”，然后在下面的列表中选择“Album”类，这样视图将会期望得到一个 Album 类型的对象。在点击增加之后，我们的视图模板 ViewsStoreDetails.cshtml 被创建了，其中包含的如下的代码：model MvcMusicStore.Models.Album ViewBag.Title = Details; Details复制代码注意第一行，表示视图使用强类型的 Album 类。Rozer 视图引擎理解传送来的 Album 对象，所以我们可以容易地访问模

34、型的属性，在 Visual Studio 中得到智能感知的帮助。更新 标记，使得可以显示专辑的 Title 属性model MvcMusicStore.Models.Album ViewBag.Title = Details; Album: Model.Title复制代码注意，智能感知使得可以提示 Album 的属性和方法。再次运行并访问 /Store/Details/5，可以得到下面的结果。现在，我们继续修改 Browse 方法，更新方法返回 ActionResult 类型的结果，修改方法的处理，返回一个 Genre 类型的对象实例。public ActionResult Browse(st

35、ring genre) var genreModel = new Genre Name = genre ; return View(genreModel); 复制代码在方法上右击，选择“增加视图”，增加一个强类型的视图。修改 标记显示 Genre 的信息model MvcMusicStore.Models.Genre ViewBag.Title = Browse; Browsing Genre: Model.Name 复制代码重新运行，访问 /Store/Browse?Genre=Disco，可以看到如下的显示最后，将 Index 也修改为强类型的视图，显示所有唱片的类别，我们使用 Genre

36、 的一个列表，而不是单个的 Genre 对象。public ActionResult Index() var genres = new List new Genre Name = Disco, new Genre Name = Jazz, new Genre Name = Rock ; return View(genres); 复制代码创建一个强类型的视图首先，我们将期望得到多个 Genre 对象而不是一个，将第一行修改为如下内容。model IEnumerable 这告诉视图引擎模式是一个包含多个 Genre 对象的集合，我们使用 IEnumerable 而不是 List，因为这样更通用，可

37、以允许我们在以后改变集合为任何实现 IEnumerable 接口的集合。现在，我们遍历集合中的 Genre 对象进行处理。model IEnumerable ViewBag.Title = Store; Browse Genres Select from Model.Count() genres: foreach (var genre in Model) genre.Name 复制代码注意，此时有完全的智能提示在 foreach 循环中，也同样有提示。再次运行程序，我们可以看到如下的结果。增加页面之间的链接现在，我们的 /Store 可以使用纯文本列出当前的分类名称，下一步，我们将这些纯文本替

38、换成可以链接到浏览分类的链接 /Store/Browse 上，这样，当用户点击音乐分类“Disco”将会被导航到 /Store/Browse?genre=Disco 的 URL 地址上。我们再次更新ViewsStoreindex.cshtml 视图模板，先看一下，一会我们还会再次改进。 foreach (var genre in Model) genre.Name 复制代码这样就可以工作了，但是这里使用了硬编码的字符串，如果我们希望修改控制器的名称，那么，我们就要找到所有这样的位置进行修改更好的处理方式是使用 HTMLHelper 的助手方法，ASP.NET MVC 包含了一个 HTML 的助

39、手类，其中的方法专门用于在视图模板中完成多种常见的任务，其中的Html.ActionLink() 助手方法就是常用的一个，这使得可以容易地创建 ，包括关于链接的一些细节处理，像地址需要进行 URL 编码之类。Html.ActionLink() 有多个重载用于多种情况，在简单的情况下，你只需要提供提示的文本，以及指向的 Action 方法即可，在客户端，举个例子，我们希望链接到 /Store 的 Index 方法，提示文本为 Go to the Store Index，那么下面的代码就可以。Html.ActionLink(Go to the Store Index, Index)注意：在这个例子中，我们不需要再特别指定控制器的名称，因为