7 天玩转 ASP.NET MVC — 第 6 天

目录

• 第 1 天
  

• 第 2 天
  

• 第 3 天
  

• 第 4 天
  

• 第 5 天
  

• 第 6 天
  

• 第 7 天

0. 前言

欢迎来到第六天的 MVC 系列学习中。希望你在阅读此篇文章的时候，已经学习了前五天的内容，这也是第六天学习的前提条件。

1. Lab 27 — 添加批量上传选项

在这个实验中，我们将会创建一个选项，用于从 CSV 文件中上传多个 Employees。

我们将会做两件事。
1. 学会如何运用文件上传控件。

1. 异步控制器。

第一步：创建 FileUploadViewModel

在 ViewModels 文件夹下创建一个类，命名为 FileUploadViewModel。

1. publicclassFileUploadViewModel:BaseViewModel

2. {

3. publicHttpPostedFileBase fileUpload {get;set;}

4. }

HttpPostedFileBase 将会通过客户端提供上传文件的访问入口。

第二步：创建 BulkUploadController 和 Index 行为方法

创建一个新的控制器，命名为 BulkUploadController，以及一个行为方法，命名为 Index。

1. publicclassBulkUploadController:Controller

2. {

3. [HeaderFooterFilter]

4. [AdminFilter]

5. publicActionResultIndex()

6. {

7. returnView(newFileUploadViewModel());

8. }

9. }

正 如你所看见的，Index 行为方法附上了 HeaderFooterFilter 和 AdminFilter 属性。HeaderFooterFilter 确保了正确了页眉和页脚数据传输到 ViewModel，AdminFilter 限制了 Non-Admin 用户访问行为方法。

第三步：创建上传视图

为上述行为方法创建一个视图。

需要注意的是，视图的名称应该为 Index.cshtml，并且应该放置在「~/Views/BulkUpload」文件夹下。

第四步：设计上传视图

在视图中放置如下内容。

1. @usingWebApplication1.ViewModels

2. @modelFileUploadViewModel

3. @{

4. Layout="~/Views/Shared/MyLayout.cshtml";

5. }

6. 
   

7. @sectionTitleSection{

8. BulkUpload

9. }

10. @sectionContentBody{

12. <a href="/Employee/Index">Backa>

13. <form action="/BulkUpload/Upload" method="post" enctype="multipart/form-data">

14. SelectFile:<input type="file" name="fileUpload" value=""/>

15. <input type="submit" name="name" value="Upload"/>

16. form>

17. div>

18. }

正如你所看见的，在 FileUploadViewModel 中，属性的名称和 input[type="file"] 的名称是一样的，都是「FileUpload」。我们在 Model Binder 实验中已经讲述了名称属性的重要性。

注意：在 Form 标签中，有一个额外的指定加密属性，我们将会在实验结尾处讨论它。

第五步：创建业务层上传方法

在 EmployeeBusinessLayer 中创建一个新的方法，命名为 UploadEmployees。

1. publicvoidUploadEmployees(List<Employee> employees)

2. {

3. SalesERPDAL salesDal =newSalesERPDAL();

4. salesDal.Employees.AddRange(employees);

5. salesDal.SaveChanges();

6. }

第六步：创建上传行为方法

在 BulkUploadController 中创建一个新的行为方法，命名为 Upload。

1. [AdminFilter]

2. publicActionResultUpload(FileUploadViewModel model)

3. {

4. List<Employee> employees =GetEmployees(model);

5. EmployeeBusinessLayer bal =newEmployeeBusinessLayer();

6. bal.UploadEmployees(employees);

7. returnRedirectToAction("Index","Employee");

8. }

9. 
   

10. privateList<Employee>GetEmployees(FileUploadViewModel model)

11. {

12. List<Employee> employees =newList<Employee>();

13. StreamReader csvreader =newStreamReader(model.fileUpload.InputStream);

14. csvreader.ReadLine();// Assuming first line is header

15. while(!csvreader.EndOfStream)

16. {

17. var line = csvreader.ReadLine();

18. var values = line.Split(',');//Values are comma separated

19. Employee e =newEmployee();

20. e.FirstName= values[0];

21. e.LastName= values[1];

22. e.Salary=int.Parse(values[2]);

23. employees.Add(e);

24. }

25. return employees;

26. }

在 Upload 中附上 AdminFilter 是用于限制 Non-Admin 用户访问。

第七步：为 BulkUpload 创建链接

在「Views/Employee」文件夹下打开 AddNewLink.cshtml 文件，为 BulkUpload 附上链接。

1. href="/Employee/AddNew">Add New

2.  

3.  

4. href="/BulkUpload/Index">BulkUpload

第八步：执行并测试

为测试创建一个简单的文件

创建一个简单的文件如下，然后将其保存在电脑中。

执行并测试

按下 F5，然后执行应用。完成登录操作，然后通过点击链接导航到 BulkUpload 选项。

选择一个文件，然后点击上传。

注意：在上述的例子中，我们没有在视图中用到任何客户端或者服务器端的认证。它也许会导致如下的错误。

「Validation failed for one or more entities. See 'EntityValidationErrors' property for more details.」

为了发现这个错误的确切原因，只需要在异常发生的时候添加如下的表达式。

((System.Data.Entity.Validation.DbEntityValidationException)$exception).EntityValidationErrors。

表达式「$exception」呈现了任何从当前上下文中抛出的错误，即使它没有被捕获或者支配到一个变量中。

Lab 27 的 Q&A

为什么我们没有在这里用到认证？

为选项增加客户端和服务器端的认证将会留给读者完成，我在这里给出一些暗示。

• 运用 Data Annotations 来进行服务器端的认证。

• 你可以运用 Data Annotations 或者实现 JQuery Unobtrusive Validation 来实现客户端认证。明显的是，这一次你需要手动设置自定义数据属性，因为我们没有为文件输入创建 HtmlHelper 方法。

• 对于客户端的认证，你可以写一些自定义的 JavaScript，然后通过点击安全触发它。这并不是很难，因为文件输入是一个输入控件，值可以通过在 JavaScript 中获取并认证。

什么是HttpPostedFileBase？

HttpPostedFileBase 可以通过客户端提供文件上传的访问接口。Model Binder 将会在发送 Post 请求时更新所有 FileUploadViewModel 类的属性值。现在 FileUploadViewModel 里只有一个属性值，Model Binder 将会通过客户端来设置这个属性值，实现文件上传。

提供多个文件输入控件是否可行？

答案是肯定的。我们可以通过两种方式实现它。

1. 创 建多个文件输入控件。每一个控件都需要有唯一的名字。在 FileUploadViewModel 类中为每个控件创建一个 HttpPostedFileBase 的类型属性。每一个属性的名称应该与控件的名称相匹配。剩下的工作会由 ModelBinder 来处理。

2. 创建多个文件输入控件。每一个控件都需要有唯一的名字。这次不是创建多个 HttpPostedFileBase 的属性，而是创建一个类型 List。
   注意：上述的情形对于所有控件都可行。当你拥有多个相同名称的控件时，如果要更新的属性值是一个简单参数，Model Binder 将会更新第一个控件的属性值。如果更新的属性值是一个 List，Model Binder 会将每一个属性值设置到控件中。

enctype="multipart/form-data"是用于做什么的？

这个对知道与否并不重要，但是知道确实会好一点。

这个属性指定了编码类型，在传输数据时使用。属性的默认值是「application/x-www-form-urlencoded」。

例如，我们的登录表单将会随着 Post 请求向服务器发送如下数据。

1. POST /Authentication/DoLogin HTTP/1.1

2. Host: localhost:8870

3. Connection: keep-alive

4. Content-Length:44

5. Content-Type: application/x-www-form-urlencoded

6. ...

7. ...

8. UserName=Admin&Passsword=Admin&BtnSubmi=Login

当 enctype="multipart/form-data"属性被添加到表单标签时，随着 Post 请求会发送到服务器上。

1. POST /Authentication/DoLogin HTTP/1.1

2. Host: localhost:8870

3. Connection: keep-alive

4. Content-Length:452

5. Content-Type: multipart/form-data; boundary=----WebKitFormBoundarywHxplIF8cR8KNjeJ

6. ...

7. ...

8. ------WebKitFormBoundary7hciuLuSNglCR8WC

9. Content-Disposition: form-data; name="UserName"

10. 
    

11. Admin

12. ------WebKitFormBoundary7hciuLuSNglCR8WC

13. Content-Disposition: form-data; name="Password"

14. 
    

15. Admin

16. ------WebKitFormBoundary7hciuLuSNglCR8WC

17. Content-Disposition: form-data; name="BtnSubmi"

18. 
    

19. Login

20. ------WebKitFormBoundary7hciuLuSNglCR8WC—

正如你所看见的，表单以多个部分被发送。每一个部分都通过 Content-Type 被一条边界线所分隔，并且每一个部分都包含一个值。

如果表单标签中包含文件输入控件时，编码类型需要设定为「multipart/form-data」。

注意：每一次请求发生时，边界线会随机生成。你可能会看到不同的边界线。

为什么我们不总是将 EncTyp 设置为「multipart/form-data」？

当 EncTyp 被设置为「multipart/form-data」，它将会做两件事，Post 数据以及上传文件。这就是为什么我们不总是将其设置为「multipart/form-data」。

答案就是，这样会增加请求的总体大小。请求的大小越大，意味着性能越差。因为最佳实践应该是将其设置为默认的值，即「application/x-www-form-urlencoded」。

为什么我们需要创建 ViewModel？

在我们的视图中有一个控件。我们可以通过直接向 HttpPostedFileBase 类型增加一个参数来实现同样的结果，这里我们需要在上传方法中命名为 「fileUpload」，而不是创建一个单独的 ViewModel。代码如下所示。

1. publicActionResultUpload(HttpPostedFileBase fileUpload)

2. {

3. }

创建 ViewModel 是最佳实践。Controller 应该总是向视图发送以 ViewModel 为格式的数据，并且来自视图的数据应该以 ViewModel 发送给 Controller。

2. 上述解决方案的问题

你是否想知道，当你发送一个请求时，如何获得响应的？

现在不要去说，是通过行为方法接到请求然后怎样怎样的。尽管这是正确的答案，我仍然期望一些不同的答案。我的问题是在最开始的时候发生了什么。

一个简单的编程规则，程序中所有都通过线程执行，尽管是请求。

在 Web 服务器上的 ASP.NET，.NET Framework 维护着线程池。每一次请求发送到 Web 服务器上时，就会把一个线程池中一个空闲的线程分配给服务器，用于处理请求。这个线程被称为 Worker 线程。

Worker 线程在请求正常处理的过程中处于阻塞状态，并且不能处理其它请求。

现 在来假设一种场景，一个应用接收到了很多请求，并且每个请求都会花费许多时间来处理进程。在这种情形下，没有 Worker 线程可用于服务器请求，所以当新的请求想要获取该线程进行处理状态时，我们可能需要在这时候终止它。这个我们称之为 Thread Starvation(线程饥饿)。

在我们的例子样本文件中，只存在了两个雇员记录，而在真实场景中，可能存在成千上万的记录，这意味着请求也许会花费大量时间来完成进程。这样会导致线程饥饿。

解决方案

迄今为止我们所讨论的请求都是同步请求类型。

如果客户端发出的是异步请求，而不是同步请求，那么线程饥饿的问题就解决了。

• 在异步请求的情形下，请求将会从线程池分配中获得通常的 Worker 线程，用于服务请求。

• Worker 线程将会初始化异步操作，然后返回线程池来服务其它请求。异步操作将会继续被 CLR 线程处理。

• 现在的问题是，CLR 线程不能返回响应，所以一旦当完成异步操作后，它就会通知 ASP.NET。

• Web 服务器将会再一次从线程池中得到 Worker 线程，用于处理剩余的请求和响应。

在上述的完整的场景中，两个 Worker 线程从线程池中获取。这两个 Worker 线程也许是同一个，也许不是。

在我们的例子中，文件读取是通过 I/O 操作的，这个操作不需要 Worker 线程来处理。所以最好是将同步请求转换为异步请求。

异步请求会提升响应时间吗？

答案是否定的。响应时间是相同的。这里线程将会被释放，用于服务其它请求。

3. Lab 28 — 解决线程饥饿问题

在 ASP.NET MVC 中，我们可以通过转换同步行为方法到异步行为方法，来将同步请求转换为异步请求。

第一步：创建异步控制器

将 UploadController 的基类改为AsynController。

1. publicclassBulkUploadController:AsyncController

2. {

第二步：转换同步行为方法到异步行为方法

通过关键字，「async」和「await」，可以很容易做这件事。

1. [AdminFilter]

2. public async Task<ActionResult>Upload(FileUploadViewModel model)

3. {

4. int t1 =Thread.CurrentThread.ManagedThreadId;

5. List<Employee> employees = await Task.Factory.StartNew<List<Employee>>

6. (()=>GetEmployees(model));

7. int t2 =Thread.CurrentThread.ManagedThreadId;

8. EmployeeBusinessLayer bal =newEmployeeBusinessLayer();

9. bal.UploadEmployees(employees);

10. returnRedirectToAction("Index","Employee");

11. }

正如你所看见的，我们在行为方法的开始和结束的地方将线程 ID 存储在变量中。

现在让我理解下代码。

• 当客户端点击上传按钮时，一个新的请求将被发送到服务器。

• Webserver 从线程池中获取一个 Worker 线程，然后将其分配给请求用于服务。

• Worker 线程使得行为方法用于执行。

• Worker 方法通过 Task.Factory.StartNew 方法执行异步操作。

• 正如你所看见的，行为方法通过关键字 Async被标记为异步的，这将会确保一旦异步方法操作开始执行，Worker 线程就会得到释放。这个时候逻辑的异步操作将会通过独立的 CLR 线程继续在后台执行。

• 现在异步操作调用将被标记为 Await 关键字。这将会确保接下来的代码行不会被执行，除非异步操作完成。

• 一旦异步操作完成了，接下来的行为方法中的代码就需要被执行。因此又要需要一个 Worker 线程。因此 Webserver 将会从线程池中取出一个空闲线程，然后将其分配给剩余的请求用于服务，并返回响应。

第三步：执行并测试

执行应用。导航到 BulkUpload 选项。

在你做任何操作之前，先导航到代码，然后在最后一行代码中打个断点。

现在选择一个简单的文件，然后点击 Upload。

正如你所看见的，在方法的开始和结束时，线程 ID 是不同的。输出的结果和之前的实验结果一样。

4. Lab 29 — 异常处理 — 呈现自定义错误页面

如果一个项目没有正确的异常处理，就不能算是一个完整的项目。

迄今为止，我们讨论过 ASP.NET MVC 中的两个过滤器，即 Action 过滤器和 Authentication 过滤器。现在是时候讨论第三个过滤器了，即 Exception 过滤器。

什么是 Exception 过滤器？

Exception 过滤器的使用方式同其它过滤器一样。我们将以属性的方式运用。

运用 Exception 过滤器的步骤。

• 使它们可用

• 将它们作为行为方法或者控制器的属性。我们也可以将它们应用到 Global 级别。

它们是用来做什么的？

一旦在行为方法内部发生异常时，Exception 过滤器就将会控制执行并开始自动执行其内部的代码。

是否存在自动的 Exception 过滤器？

ASP.NET MVC 提供给我们一个已经编写好的 Exception 过滤器，称作 HandleError。

正 如我们之前所说的，当行为方法中，一旦异常发生，过滤器就将被执行。这个过滤器将会在「~/Views/[current controller]」或者「~/Views/Shared」文件夹内发现一个名称为「Error」的视图，为这个视图创建一个 ViewResult，然后返回响应。

让我们看一个 Demo，用于更好地理解。在项目的实验最后，我们将会实现 BulkUpload 选项。现在存在着较高的输入文件的错误可能性。

第一步：创建一个简单的带有错误的 Upload 文件

创建一个简单的上传文件，就像之前一样。但是这次，文件中包含一些非法值。

正如你所看见的，Salary 是非法的。

第二步：执行并测试应用

按下 F5，执行应用。导航到 Bulk Upload 选项，选择上述的文件，然后点击 Upload。

第三步：使异常过滤器可用

自定义异常开启后，异常过滤器也被开启。为了开启自定义异常，打开 Web.config 文件，然后导航到 System.Web 区域，在该区域下增加自定义错误，如下所示。

2. mode="On">

第四步：创建错误视图

在「~Views/Shared」文件夹下，可以看到一个文件，即「Error.cshtml」。这个文件作为 MVC 样本文件的一部分在开始的时候被创建。如果没有被创建，就手动创建。

1. @{

2. Layout=null;

3. }

4. 
   

5. DOCTYPE html>

8. <meta name="viewport" content="width=device-width"/>