你的位置:首页 > 软件开发 > ASP.net > 7 天玩转 ASP.NET MVC — 第 6 天

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

发布时间:2015-08-20 11:00:08
目录第 1 天第 2 天第 3 天第 4 天第 5 天第 6 天第 7 天0. 前言欢迎来到第六天的 MVC 系列学习中。希望你在阅读此篇文章的时候,已经学习了前五天的内容,这也是第六天学习的前提条件。1. Lab 27 — 添加批量上传选项在这个实验中,我们 ...

目录

  • 第 1 天
  • 第 2 天
  • 第 3 天
  • 第 4 天
  • 第 5 天
  • 第 6 天
  • 第 7 天

0. 前言

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

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

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

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

  1. 异步控制器。

第一步:创建 FileUploadViewModel

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

public class FileUploadViewModel: BaseViewModel {  public HttpPostedFileBase fileUpload {get; set ;}}

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

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

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

public class BulkUploadController : Controller {    [HeaderFooterFilter]    [AdminFilter]    public ActionResult Index()    {      return View(new FileUploadViewModel());    } }

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

第三步:创建上传视图

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

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

第四步:设计上传视图

在视图中放置如下内容。

@using WebApplication1.ViewModels@model FileUploadViewModel@{  Layout = "~/Views/Shared/MyLayout.cshtml";}@section TitleSection{  Bulk Upload}@section ContentBody{  <div>   <a href="http://www.cnblogs.com//Employee/Index">Back</a>    <form action="/BulkUpload/Upload" method="post" enctype="multipart/form-data">      Select File : <input type="file" name="fileUpload" value="" />      <input type="submit" name="name" value="Upload" />    </form>  </div>}

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

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

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

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

public void UploadEmployees(List<Employee> employees) {  SalesERPDAL salesDal = new SalesERPDAL();  salesDal.Employees.AddRange(employees);  salesDal.SaveChanges();}

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

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

[AdminFilter]public ActionResult Upload(FileUploadViewModel model) {  List<Employee> employees = GetEmployees(model);  EmployeeBusinessLayer bal = new EmployeeBusinessLayer();  bal.UploadEmployees(employees);  return RedirectToAction("Index","Employee");}private List<Employee> GetEmployees(FileUploadViewModel model) {  List<Employee> employees = new List<Employee>();  StreamReader csvreader = new StreamReader(model.fileUpload.InputStream);  csvreader.ReadLine(); // Assuming first line is header  while (!csvreader.EndOfStream)  {    var line = csvreader.ReadLine();    var values = line.Split(',');//Values are comma separated    Employee e = new Employee();    e.FirstName = values[0];    e.LastName = values[1];    e.Salary = int.Parse(values[2]);    employees.Add(e);  }  return employees;}

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

第七步:为 BulkUpload 创建链接

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

<a href="http://www.cnblogs.com//Employee/AddNew">Add New</a> &nbsp;&nbsp;<a href="http://www.cnblogs.com//BulkUpload/Index">BulkUpload</a> 

第八步:执行并测试

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

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

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

执行并测试

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

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

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

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

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

「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。 

    原标题:7 天玩转 ASP.NET MVC — 第 6 天

    关键词:ASP.NET

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。