七天学会ASP.NET MVC (7) -- 创建单页应用
本期文章是七天学会 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 方法：
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
Employee Name
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 方法,如下：
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
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; </list
<liste.LastName = values; </list
<liste.Salary = int.Parse(values); </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
页:
[1]