第二章 初识ASP.NET MVC项目开发

ASP.NETMVC程序开发第二章初识ASP.NETMVC项目开发第二章初识ASP.NETMVC项目开发ASP.NETMVC程序开发第

2页2.1示例项目概述——在线书店2.2利用项目模板创建ASP.NETMVC项目2.3创建控制器2.4创建数据模型2.5创建视图2.6实现订单提交功能小结2.1示例项目概述——在线书店ASP.NETMVC程序开发第

3页

在线书店是一个完整的ASP.NETMVC项目，其中包括购物，结账和管理等功能，如图所示。本书中的很多示例都来自这个Web应用程序，并将以此项目贯穿始终，带领读者由浅入深，逐渐掌握ASP.NETMVC项目开发方法。2.1示例项目概述——在线书店ASP.NETMVC程序开发第

4页网站首页2.1示例项目概述——在线书店ASP.NETMVC程序开发第

5页浏览：根据类别浏览书籍2.1示例项目概述——在线书店ASP.NETMVC程序开发第

6页购书：向购物车中添加书籍2.1示例项目概述——在线书店ASP.NETMVC程序开发第

7页购物车：查看和管理购物车2.1示例项目概述——在线书店ASP.NETMVC程序开发第

8页结算：生成一个订单并且结账注销登录2.1示例项目概述——在线书店ASP.NETMVC程序开发第

9页管理：编辑书籍列表（管理员功能）2.2利用项目模板创建ASP.NETMVC项目

ASP.NETMVC程序开发第

10页ASP.NETMVC是一套建立在ASP.NET基础上的Web应用项目开发框架，在VisualStudio2010中提供了完整的ASP.NETMVC项目模板，利用此模板可以快速的创建标准的ASP.NETMVC项目。

用ASP.NETMVC项目模板创建项目的步骤如下。2.2利用项目模板创建ASP.NETMVC项目

ASP.NETMVC程序开发第

11页1、启动VisualStudio2010，打开“文件”菜单，选择“项目”选项。（本书使用的是ASP.NETMVC4开发环境，该环境要求在安装VisualStudio2010sp1版本的基础上额外下载并安装ASP.NETMVC4forVisualStudio2010，参见/mvc/mvc4）2.2利用项目模板创建ASP.NETMVC项目

ASP.NETMVC程序开发第

12页2、在“新建项目”窗口的“已安装的模板”列表中选择“Web”类别，然后在项目模板列表中选择“ASP.NETMVC4Web应用程序”。最后点击“确定”按钮。2.2利用项目模板创建ASP.NETMVC项目

ASP.NETMVC程序开发第

13页3、在“新ASP.NETMVC4项目”窗口中的“选择模板”列表中选择“Internet应用程序”模板，在“视图引擎”下拉列表框中选择“Razor”，目前暂时不用勾选“创建单元测试项目”。最后点击“确定”按钮。2.2利用项目模板创建ASP.NETMVC项目

ASP.NETMVC程序开发第

14页4、此时，ASP.NETMVC4项目已经创建完成，选择“调试”菜单下的“开始调试”菜单项，即可启动一个默认的ASP.NETMVC网站。该网站已具备基本的功能，包括简单的页面和会员机制。这些页面都是用了Razor的布局为网站定义的公共模板和ASP.NET内置的Membership功能，可以进行会员注册、登录、注销等操作。2.3创建控制器

ASP.NETMVC程序开发第

15页ASP.NETMVC的核心就是控制器（Controller），它负责处理浏览器传送过来的所有请求，并决定要将什么内容响应给浏览器。但控制器并不负责决定内容应该如何显示，而是仅将特定格式的数据响应给ASP.NETMVC架构，最后才由ASP.NETMVC架构依据响应的形态来决定如何将数据响应给浏览器。

创建控制器和动作的步骤如下：

2.3创建控制器

ASP.NETMVC程序开发第

16页1、打开ASP.NETMVC4项目，在“解决方案资源管理器”窗口中选择“Controllers”目录并单击鼠标右键，在弹出的快捷菜单中选择“添加”下面的“控制器”选项。

2.3创建控制器

ASP.NETMVC程序开发第

17页2、在“添加控制器”窗口中输入控制器名称StoreController，如图2-12所示，然后点击“添加”按钮。

此时，VisualStudio2010会创建一个名为“StoreController.cs”的Controller类文件，在该类中会默认新建一个名为Index的动作。2.3创建控制器

ASP.NETMVC程序开发第

18页在简化版在线书店项目中，上述Index动作将被用来显示所有待售书籍。对于这个动作，我们将在下一节中对其添加数据访问代码。对于Order和Details两个动作，我们也将在下一节中对其添加数据访问代码，以实现“提交订单”和“查看订单”功能。2.4创建数据模型

ASP.NETMVC程序开发第

19页在ASP.NETMVC中，数据模型（Model）负责所有与数据有关的任务，不管是控制器（Controller）还是视图（View），都会参考数据模型里面定义的数据类型，或是使用数据模型里定义的一些数据操作方法，例如新建、删除、修改、查询等。本节将继续通过简化版在线书店项目为例，介绍ASP.NETMVC4中数据模型创建与使用的基本方法。2.4创建数据模型

ASP.NETMVC程序开发第

20页首先，让我们为简化版在线书店项目创建一个名为MvcBookStore的数据库，该数据库应该包含Books和Orders两个数据表，分别存放书籍数据和订单数据。因为是简易版在线书店项目，所以为了方便我们假设一个订单只包含一本书暂且让订单与书籍为多对一的关系，但是要注意，在实际的项目开发中订单与书籍应该是多对多的关系。2.4创建数据模型

ASP.NETMVC程序开发第

21页基于EntityFramework技术的数据模型创建步骤如下：1、打开简化版在线书店项目，在“解决方案资源管理器”窗口中选择“Models”目录并单击鼠标右键，在弹出的快捷菜单中选择“添加”下面的“新建项目”选项。2.4创建数据模型

ASP.NETMVC程序开发第

22页

2、在“新建项目”窗口的“已安装的模板”列表中选择“数据”类别，然后在项目模板列表中选择“ADO.NET实体数据模型”并将名称改为“BookStore.edmx”。最后点击“确定”按钮。2.4创建数据模型

ASP.NETMVC程序开发第

23页

3、在“实体数据模型向导”窗口中，选择“从数据库产生”。最后点击“下一步”按钮。4、创建数据库连接，并连接到“MvcBookStore”数据库，并将实体连接字符串改名为“BookStoreEntities”。最后点击“下一步”按钮。2.4创建数据模型

ASP.NETMVC程序开发第

24页

5、选择数据库对象，勾选“数据表”对象。最后点击“完成”按钮。此时，就创建完成简化版在线书店项目所需的数据模型了。该数据模型可用来对数据库进行数据查询与写入等操作。2.4创建数据模型

ASP.NETMVC程序开发第

25页在这里，项目的“Models”目录只是一个目录而已，其主要目的是帮助开发人员养成将与数据访问获业务逻辑有关的程序都统一集中在“Models”目录下的习惯，但并不强制，并且当项目规模变大时还可以将整个“Models”目录转变成一个独立的项目。2.4创建数据模型

ASP.NETMVC程序开发第

26页最后，我们在本项目“StoreController”控制器类的“Index”与“Details”两个动作中分别加入一段代码，让“Index”动作能够获取全部待售书籍的数据，让“Details”动作能够获取全部订单的数据。2.5创建视图

ASP.NETMVC程序开发第

27页视图（View）在ASP.NETMVC中负责将控制器（Controller）传送过来的数据转换成客户端需要的输出格式。所有视图中的代码应该是主要完成数据显示这项工作，而不应该有其他的用途。本节将继续通过简化版在线书店项目为例，介绍ASP.NETMVC4中视图创建与使用的基本方法。接下来，我们将为简化版在线书店项目创建一个Index视图，完成在线书店的“待售书籍浏览”功能。2.5创建视图

ASP.NETMVC程序开发第

28页在正式创建试图之前，我们需要完善StoreController控制器类的Index动作的代码，在ASP.NETMVC架构中动作与视图通常是对应的，我们需要让Index动作能够传送待售书籍数据到对应视图。接下来，可以使用VisualStudio帮我们自动创建强类型视图，在代码编辑器的“Index”动作对应函数上单击鼠标右键并选择“加入视图”菜单项2.5创建视图

ASP.NETMVC程序开发第

29页在默认情况下，视图名称一般不需要修改，默认视图名称会与动作名称一致。勾选“强类型视图”多选框，并在“模类型”下拉列表框中选择“Books”（注意在添加视图前要将项目编译生成一次，否则在“模类型”下拉列表框中是找不到“Books”选项的），也就是“Index”动作创递给视图的数据类型，然后在“支架模版”下拉列表框中选择“List”。最后点击“添加”按钮创建视图。2.6实现订单提交功能

ASP.NETMVC程序开发第

30页“提交订单”功能涉及到两部分内容，一是在订单页面中要能显示用户将要购买的书籍，其次是用户能通过订单页面将购书数量和送货地址等信息提交到系统。这里我们将逐步了解到在ASP.NETMVC架构中如何通过控制器中的动作接收链接中的数据、如何在视图中创建表单以及如何把视图中表单数据传递到控制器里的动作。2.6.1在动作中接收连接参数

ASP.NETMVC程序开发第

31页在上一节完成的简易版在线书店项目中，我们已经实现了浏览待售书籍的页面，在该页面的每一本书籍封面的后面都留有一个名为“购书”的链接，我们希望当用户点击该链接后系统能跳转到对应书籍的购买页面，这个页面就是实现“订单提交”功能的页面。2.6.1在动作中接收连接参数

ASP.NETMVC程序开发第

32页通过代码首先通过实体数据模型查询到参数id对应的具体书籍信息，然后书名、作者名、价格和书籍封面地址表存到ViewData中，以便对应试图使用。完成Order函数后，就可以按照上节所介绍的方式为其添加视图了，只不过这里在“添加视图”窗口中不再需要勾选“添加强类型视图”多选框了。2.6.1在动作中接收连接参数

ASP.NETMVC程序开发第

33页待视图创建完成后，在视图里补充代码，以便试图能够显示用户希望购买的书籍的信息。

从视图代码中不难看出ViewBag对象可以用来将Order动作对应函数中的数据传递到对应的视图，最后运行项目，在书籍浏览页面中点击“购书”链接，就能跳转到对应的提交订单页面了。2.6.2在视图中创建表单

ASP.NETMVC程序开发第

34页在上一节，我们创建了“提交订单”功能的页面，并能在页面中显示用户希望购买的书籍信息，接下来需要在该页面中创建表单让用户可以输入购书数量和送货地址等信息，并提交。

要在视图中创建表单可以使用ASP.NETMVC内置的HTML辅助方法来生成字段，需要显示标签的地方可以使用Html.Label()方法，需要显示文本框的地方则可以使用Html.TextBox()方法并在该方法的第一个参数中输入字段名称。2.6.2在视图中创建表单

ASP.NETMVC程序开发第

35页通过代码不难看出，action属性中的路径是直接写在代码中的（也就是“/Store/Order”这个路径），表示这个表单在送出数据时会发送给Store控制器的Order动作。

2.6.2在视图中创建表单

ASP.NETMVC程序开发第

36页目前Order表单的提交地址是固定的，不过将表单提交地址直接写在代码中并不好，因为在ASP.NETMVC中，网址路径可以通过“RouteConfig.cs”文件中的RouteConfig类来自定义和随时修改，所以当修改了RouteConfig类后，还要连带修改相关多个视图中的表单提交地址，这就会带来很多麻烦。2.6.2在视图中创建表单

ASP.NETMVC程序开发第

37页其实在ASP.NETMVC中，可以利用Html.BeginForm()辅助方法实现自动输出表单标记。

最后运行项目，在书籍浏览页面中点击“购书”链接，就能跳转到对应的提交订单页面了，并且在页面中可以填写订单信息并提交。

2.6.3将视图中的表单数据传递到动作

ASP.NETMVC程序开发第

38页在上一节中，我们在Order视图中添加了表单，表单数据会被发送给Store控制器中的Order动作，而且表单中会有三个字段一起被送出，分别是BookId、Num和Address，表示书籍编号、购买数量和送货地址。

2.6.3将视图中的表单数据传递到动作

ASP.NETMVC程序开发第

39页目前在Store控制器中已经有了一个Order动作，该动作的作用是显示“提交订单”页面并让用户输入提交订单数据，但是在用户提交订单数据后数据的接收者还是Order动作，如何才能区分这两个同名但功能不同的Order动作呢？

2.6.3将视图中的表单数据传递到动作

ASP.NETMVC程序开发第

40页最好的方式就是用ASP.NETMVC中的HttpGet属性和HttpPost属性来区分动作，因为显示“提交订单”页面的Order动作对应的是HTTPGET请求，而接受表单数据的Order动作对应的是HTTPPOST请求。

2.6.3将视图中的表单数据传递到动作

ASP.NETMVC程序开发第

41页在ASP.NETMVC中有一个数据模型绑定（ModelBinder）机制，通过这个机制可以自动将客户端传来的数据转换成.NET类型的数据，也因为这样，我们才能直接通过Order函数的参数取得表单传递过来的数据。2.6.3将视图中的表单数据传递到动作

ASP.NETMVC程序开发第

42页一般来说该函数参数的名称与对应表单数据的字段名一致，在页面中表单的字段名指的是input标记中的name属性的值。Order动作的前两个参数属于int类型，第三个参数属于string类型，虽然通过Request.Form()方法取得的数据都是字符串类型的，但通过数据模型绑定机制，AS