本期文章是七天学会 ASP.NET MVC 系列文章的最后一篇了，在开始讲述本篇文章之前，我们先对前面学习的内容做一个简单的回顾。
在本系列的第一篇文章中，我们先一起了解了 MVC 的组成和以及相比于 ASP.NET Webform 的优势。
在第二、三篇文章中，我们分别学习了 MVC 的数据传递和数据处理问题，这部分内容也是 MVC 中较为核心的知识。
在第四至六篇文章中，我们分别针对 MVC 开发中最常遇到的用户授权认证、用户角色管理以及线程问题进行了讲解。
在今天的最后一篇文章中，我们来一起实际创建一个单页应用，将我们所学的知识实际运用起来。
一、安装
我们需要从头开始新建 controllers, views，ViewModels。
下面的文件可以被重用：
已创建的业务层
已创建的数据访问层
已创建的业务实体
授权和异常过滤器
FooterViewModelFooter.cshtml
1. 创建新Area
右击项目，选择添加→Area，在弹出对话框中输入 SPA，点击确认，生成新的文件夹，因为在该文件夹中不需要 Model 中 Area 的文件夹，删掉。
接下来我们先了解一下Areas的概念
Areas
Areas 是实现 Asp.net MVC 项目模块化管理的一种简单方法。
每个项目由多个模块组成，如支付模块，客户关系模块等。在传统的项目中，采用“文件夹”来实现模块化管理的，你会发现在单个项目中会有多个同级文件夹，每个文件夹代表一个模块，并保存各模块相关的文件。
然而，在 Asp.net MVC 项目中使用自定义文件夹实现功能模块化会导致很多问题。
下面是在 Asp.Net MVC 中使用文件夹来实现模块化功能需要注意的几点：
DataAccessLayer, BusinessLayer, BusinessEntities 和 ViewModels 的使用不会导致其他问题，在任何情况下，可视作简单的类使用。
Controllers —只能保存在 Controller 文件夹，但是这不是大问题，从MVC4开始，控制器的路径不再受限。现在可以放在任何文件目录下。
所有的 Views 必须放在“~/Views/ControllerName” or “~/Views/Shared”文件夹。
2. 创建必要的 ViewModels
在 ViewModel 类库下新建文件夹并命名为SPA，创建 ViewModel，命名为”MainViewModel“，如下：
using WebApplication1.ViewModels;
namespace WebApplication1.ViewModels.SPA
{public class MainViewModel
{public string UserName
{ get; set; }
public FooterViewModel FooterData
{ get; set; }
//New Property
}
}
3. 创建 Index action 方法
在 MainController 中输入：
using WebApplication1.ViewModels.SPA;
using OldViewModel=WebApplication1.ViewModels;
在MainController 中新建Action 方法，如下：
public ActionResult Index()
{MainViewModel v = new MainViewModel();v.UserName = User.Identity.Name;
v.FooterData = new OldViewModel.FooterViewModel();
v.FooterData.CompanyName = "StepByStepSchools";
//Can be set to dynamic valuev.FooterData.Year = DateTime.Now.Year.ToString();
return View("Index", v);}
using OldViewModel=WebApplication1.ViewModels 这行代码中，给WebApplication1.ViewModels 添加了别名OldViewModel，使用时可直接写成OldViewModel.ClassName这种形式。
如果不定义别名的话，会产生歧义，因为WebApplication1.ViewModels.SPA 和 WebApplication1.ViewModels下有名称相同的类。
4.创建 Index View
创建与上述 Index 方法匹配的 View
@using WebApplication1.ViewModels.SPA
@model MainViewModel
5. 运行测试
二、显示 Employees
1.创建 ViewModel，实现“显示 Empoyee” 功能
在SPA中新建两个 ViewModel 类，命名为 ”EmployeeViewModel“及”EmployeeListViewModel“：
namespace WebApplication1.ViewModels.SPA
{public class EmployeeViewModel
{public string EmployeeName
{ get; set; }public string Salary
{ get; set; }public string SalaryColor
{ get; set; }
}
}
namespace WebApplication1.ViewModels.SPA
{
public class EmployeeListViewModel
{
public List Employees { get; set; }
}
}
注意：这两个ViewModel 都是由非SPA 应用创建的，唯一的区别就在于这次不需要使用BaseViewModel。
2. 创建 EmployeeList Index
在 MainController 中创建新的 Action 方法”EmployeeList“action 方法
public ActionResult EmployeeList()
{
EmployeeListViewModel employeeListViewModel = new EmployeeListViewModel();
EmployeeBusinessLayer empBal = new EmployeeBusinessLayer();
List employees = empBal.GetEmployees();
List empViewModels = new List();
foreach (Employee emp in employees)
{
EmployeeViewModel empViewModel = new EmployeeViewModel();
empViewModel.EmployeeName = emp.FirstName + " " + emp.LastName;empViewModel.Salary = emp.Salary.Value.ToString("C");
if (emp.Salary > 15000)
{empViewModel.SalaryColor = "yellow";}
else
{empViewModel.SalaryColor = "green";}
empViewModels.Add(empViewModel);}employeeListViewModel.Employees = empViewModels;r
eturn View("EmployeeList", employeeListViewModel);}
注意： 不需要使用 HeaderFooterFilter
3. 创建 AddNewLink 分部View
之前添加 AddNewLink 分部 View 已经无法使用，因为 Anchor 标签会造成全局刷新，我们的目标是创建”单页应用“，因此不需要全局刷新。
在”~/Areas/Spa/Views/Main“ 文件夹新建分部 View”AddNewLink.cshtml“。
Add New
4. 创建AddNewLink Action
方法在 MainController中创建 ”GetAddNewLink“ action 方法。
public ActionResult GetAddNewLink()
{if (Convert.ToBoolean(Session["IsAdmin"]))
{return PartialView("AddNewLink");}
else
{return new EmptyResult();}
}
5. 新建 EmployeeList View
在“~/Areas/Spa/Views/Main”中创建新分部View 命名为“EmployeeList”。
@using WebApplication1.ViewModels.SPA
@model EmployeeListViewModel
@{Html.RenderAction("GetAddNewLink");}
6. 设置 EmployeeList 为初始页面
打开“~/Areas/Spa/Views/Main/Index.cshtml”文件，在Div标签内包含EmployeeList action结果。
7. 运行
三、创建 Employee
1. 创建 AddNew ViewModels
在SPA中新建 ViewModel 类库项的 ViewModel，命名为“CreateEmployeeViewModel”。
namespace WebApplication1.ViewModels.SPA
{
public class CreateEmployeeViewModel
{public string FirstName
{ get; set; }
public string LastName
{ get; set; }
public string Salary
{ get; set; }
}
}
2. 创建 AddNew action 方法
在 MainController 中输入 using 语句：
using WebApplication1.Filters;
在 MainController 中创建 AddNew action 方法：
[AdminFilter]
public ActionResult AddNew()
{
CreateEmployeeViewModel v = new CreateEmployeeViewModel();
return PartialView("CreateEmployee", v);
}
3. 创建 CreateEmployee 分部View
在“~/Areas/Spa/Views/Main”中创建新的分部 View“CreateEmployee”
@using WebApplication1.ViewModels.SPA
@model CreateEmployeeViewModel
4. 添加 jQuery UI
右击项目选择 “Manage Nuget Manager”。找到 “jQuery UI” 并安装。
项目中会自动添加.js和.css文件
5. 在项目中添加 jQuery UI
打开“~/Areas/Spa/Views/Main/Index.cshtml”，添加jQuery.js,jQueryUI.js 及所有的.css文件的引用。这些文件会通过Nuget Manager添加到jQuery UI 包中。...
6. 实现 OpenAddNew 方法
在“~/Areas/Spa/Views/Main/Index.cshtml”中新建JavaScript方法“OpenAddNew”。
7. 运行
完成登录步骤后导航到Index中，点击Add New 链接。
四，单页上传
1. 创建 SpaBulkUploadController
创建新的 AsyncController“ SpaBulkUploadController”
namespace WebApplication1.Areas.SPA.Controllers
{
public class SpaBulkUploadController :
AsyncController{}
}
2. 创建 Index Action
在步骤1中的 Controller 中创建新的 Index Action 方法,如下：
[AdminFilter]
public ActionResult Index()
{
return PartialView("Index");
}
3. 创建 Index 分部 View
在“~/Areas/Spa/Views/SpaBulkUpload”中创建 Index 分部 ViewSelect File :
4. 创建 OpenBulkUpload 方法
打开“~/Areas/Spa/Views/Main/Index.cshtml”文件，新建JavaScript 方法OpenBulkUploadfunction OpenBulkUpload() {$.get("/SPA/SpaBulkUpload/Index").then(function (r) {$("
").html(r).dialog({ width: 'auto', height: 'auto', modal: true, title: "Create New Employee",close: function () {$('#DivBulkUpload').remove();} });});}
5. 运行
6. 新建 FileUploadViewModel
在ViewModel SPA文件夹中新建View Model”FileUploadViewModel”。
namespace WebApplication1.ViewModels.SPA
{
public class FileUploadViewModel
{
public HttpPostedFileBase fileUpload
{ get; set; }
}
}
7. 创建 Upload Action
[AdminFilter]
public async Task Upload(FileUploadViewModel model)
{
int t1 = Thread.CurrentThread.ManagedThreadId;List employees = await Task.Factory.StartNew<list>(() => GetEmployees(model));int t2 = Thread.CurrentThread.ManagedThreadId; </list
<listEmployeeBusinessLayer bal = new EmployeeBusinessLayer(); </list
<listbal.UploadEmployees(employees); </list
<listEmployeeListViewModel vm = new EmployeeListViewModel(); </list
<listvm.Employees = new List(); </list
<listforeach (Employee item in employees)</list
<list{EmployeeViewModel evm = new EmployeeViewModel(); </list
<listevm.EmployeeName = item.FirstName + " " + item.LastName;</list
<listevm.Salary = item.Salary.Value.ToString("C"); </list
<listif (item.Salary > 15000){evm.SalaryColor = "yellow";} </list
<listelse{evm.SalaryColor = "green";}vm.Employees.Add(evm);} </list
<listreturn Json(vm);} </list
<listprivate List GetEmployees(FileUploadViewModel model)</list
<list {List employees = new List();StreamReader csvreader = new StreamReader(model.fileUpload.InputStream); </list
<listcsvreader.ReadLine();</list
<list// Assuming first line is headerwhile (!csvreader.EndOfStream) </list
<list{var line = csvreader.ReadLine();var values = line.Split(',');</list
<list//Values are comma separatedEmployee e = new Employee();</list
<list e.FirstName = values[0]; </list
<liste.LastName = values[1]; </list
<liste.Salary = int.Parse(values[2]); </list
<listemployees.Add(e);} </list
<listreturn employees; </list
<list} </list
<list正如你可以看到我们重定向正在返回 JsonResult 这次来代替。 </list
<list8. 创建上传功能 </list
<list在〜/地区/水疗/查看/ SpaBulkUpload“文件夹中打开索引视图。并创建一个名为上传如下 JavaScript 函数。</list
<list9. 运行 </list
<list
</list
<list以上本系列的七篇文章就是介绍 MVC 知识的全部内容了，看到这里你是否已经对 MVC 的知识有了较为全面的掌握？在具备 MVC 知识的同时，使用一些开发工具将会使我们的开发过程变得事半功倍。</list
| 
陕公网安备：61019002000258 |
隐私政策 |
网站地图
