七天学会ASP.NET MVC（七）——创建单页应用 【转】

http://www.cnblogs.com/powertoolsteam/p/MVC_Seven.html

系列文章

七天学会ASP.NETMVC(一)——深入理解ASP.NETMVC

七天学会ASP.NETMVC(二)——ASP.NETMVC数据传递

七天学会ASP.NETMVC(三)——ASP.NetMVC数据处理

七天学会ASP.NETMVC(四)——用户授权认证问题

[b]七天学会ASP.NETMVC(五)——Layout页面使用和用户角色管理[/b]

七天学会ASP.NETMVC(六)——线程问题、异常处理、自定义URL

[b]七天学会ASP.NETMVC（七）——创建单页应用[/b]

目录

引言

最后一篇学什么

实验32—整理项目组织结构

关于实验32

实验33——创建单页应用——第一部分—安装

什么是Areas？

关于实验33

实验34——创建单页应用——第二部分—显示Employee

实验35——创建单页应用——第三部分—新建Employee

实验36——创建单页应用——第三部分—上传

实验32———整理项目组织结构

实验32与其他实验不同，本实验并不是在之前实验基础之上为程序添加新的功能，实验32主要目的是整理项目结构，使项目条理清晰，能够结构化系统化，便于其他人员理解。

1.创建解决方案文件夹

右键单击，选择“新解决方案文件夹—>添加—>新解决方案”，命名为“ViewAndController”



重复上述步骤，创建文件夹“Model”，“ViewModel”,”DataAccessLayer”



2.创建数据访问层工程

右击“DataAccessLayer”文件夹，新建类库“DataAccessLayer”。

3.创建业务层和业务实体项

在Model文件夹下创建新类库“BusinessLayer”和“BusinessEntities”

4.创建ViewModel项

在ViewModel文件夹下新建类库项“ViewModel“

5.添加引用

为以上创建的项目添加引用，如下：

1.DataAccessLayer添加BusinessEntities项

2.BusinessLayer添加DataAccessLayer和BusinessEntities项

3.MVCWebApplication选择BusinessLayer,BusinessEntities,ViewModel

4.BusinessEntities添加System.ComponentModel.DataAnnotations

6.设置

1.将DataAccessLayer文件夹下的SalesERPDAL.cs文件，复制粘贴到新创建的DataAccessLayer类库中。



2.删除MVC项目（WebApplication1）的DataAccessLayer文件夹
3.同上，将Model文件夹中的Employee.cs,UserDetails.cs及UserStatus.cs文件复制到新建的BusinessEntities文件夹中。

4.将MVC项目中的Model文件夹的EmployeeBusinessLayer.cs文件粘贴到新建的BusinessLayer的文件夹中。

5.删除MVC中的Model文件夹

6.将MVC项目的ViewModels文件夹下所有的文件复制到新建的ViewModel类库项中。

7.删除ViewModels文件夹

8.将整个MVC项目剪切到”ViewAndController”解决方案文件夹中。

7.Build

选择Build->BuildSolutionfrommenubar，会报错。



8.改错

1.给ViewModel项添加System.Web引用

2.在DataAccessLayer和BusinessLayer中使用Nuget管理，并安装EF（EntityFramework）（如果对于Nuget的使用有不理解的地方可以查看第三篇博客文章）

注意：在BusinessLayer中引用EF是非常必要的，因为BusinessLayer与DataAccessLayer
直接关联的，而完善的体系架构它自身的业务层是不应该与DataAccessLayer直接关联，因此我们必须使用pattern库，协助完成。

3.删除MVC项目中的EF

右击MVC项目，选择”ManageNugetpackages“选项

在弹出的对话框中选择”InstalledPackages“

则会显示所有的已安装项，选择EF，点解卸载。

9.编译会发现还是会报错



10.修改错误

报错是由于在项目中既没有引用SalesERPDAL，也没有引用EF，在项目中直接引用也并不是优质的解决方案。

1.在DataAccessLayer项中新建带有静态方法”SetDatabase“的类”DatabaseSettings“

[code]

[/code]
2.在BusinessLayer项中新建带有”SetBusiness“静态方法的”BusinessSettings“类。

[code]

[/code]
3.删除global.asax中的报错的Using语句和Database.SetInitializer语句。调用BusinessSettings.SetBusiness函数：

[code]

[/code]
再次编译程序，会发现成功。

关于实验32

什么是解决方案文件夹？

解决方案文件夹是逻辑性的文件夹，并不是在物理磁盘上实际创建，这里使用解决方案文件夹就是为了使项目更系统化更有结构。

实验33——创建单页应用1—安装

实验33中，不再使用已创建好的控制器和视图，会创建新的控制器及视图，创建新控制器和视图原因如下：

1.保证现有的选项完整，也会用于旧版本与新版本对比
2.学习理解ASP.NETMVC新概念：Areas

接下来，我们需要从头开始新建controllers,views，ViewModels。

下面的文件可以被重用：

已创建的业务层

已创建的数据访问层

已创建的业务实体

授权和异常过滤器

FooterViewModel

Footer.cshtml

1.创建新Area

右击项目，选择添加->Area，在弹出对话框中输入SPA，点击确认，生成新的文件夹，因为在该文件夹中不需要Model中Area的文件夹，删掉。





接下来我们先了解一下Areas的概念

Areas

Areas是实现Asp.netMVC项目模块化管理的一种简单方法。

每个项目由多个模块组成，如支付模块，客户关系模块等。在传统的项目中，采用“文件夹”来实现模块化管理的，你会发现在单个项目中会有多个同级文件夹，每个文件夹代表一个模块，并保存各模块相关的文件。

然而，在Asp.netMVC项目中使用自定义文件夹实现功能模块化会导致很多问题。

下面是在Asp.NetMVC中使用文件夹来实现模块化功能需要注意的几点：

DataAccessLayer,BusinessLayer,BusinessEntities和ViewModels的使用不会导致其他问题，在任何情况下，可视作简单的类使用。

Controllers—只能保存在Controller文件夹，但是这不是大问题，从MVC4开始，控制器的路径不再受限。现在可以放在任何文件目录下。

所有的Views必须放在“~/Views/ControllerName”or“~/Views/Shared”文件夹。

2.创建必要的ViewModels

在ViewModel类库下新建文件夹并命名为SPA，创建ViewModel，命名为”MainViewModel“，如下：

[code]

[/code]
3.创建Indexaction方法

在MainController中输入：

[code]
[/code]
在MainController中新建Action方法，如下：

[code]

[/code]
usingOldViewModel=WebApplication1.ViewModels这行代码中，给WebApplication1.ViewModels添加了别名OldViewModel，使用时可直接写成OldViewModel.ClassName这种形式。

如果不定义别名的话，会产生歧义，因为WebApplication1.ViewModels.SPA和WebApplication1.ViewModels下有名称相同的类。

4.创建IndexView

创建与上述Index方法匹配的View

[code]

[/code]
5.运行测试

关于实验33

为什么在控制器名前需要使用SPA关键字？

在ASP.NETMVC应用中添加area时，VisualStudio会自动创建并命名为“[AreaName]AreaRegistration.cs”的文件，其中包含了AreaRegistration的派生类。该类定义了AreaName属性和用来定义register路劲信息的RegisterArea方法。

在本次实验中你会发现nameSpaArealRegistration.cs文件被存放在“~/Areas/Spa”文件夹下，SpaArealRegistration类的RegisterArea方法的代码如下：

[code]

[/code]


这就是为什么一提到Controllers，我们会在Controllers前面加SPA关键字。