MVC 中的 ViewModel

ViewModel这个概念不只是在在MVC模式中有,你会在很多关于MVC、MVP、MVVM的文章中见到这个说法,并且这个概念在任何技术中都有可能提到,比如ASP.NET, Silverlight, WPF, or MVC... 现在我们来讨论如何在MVC中使用它。

ASP.NET MVC ViewModel 是什么?

在一般的情况下,我们向View中传递数据的时候,都是一个Model,当有一些额外的数据的时候,我们会使用viewbag等来进行,但是我们可以使用ViewModel将这些整合在一起也就是说:ASP.NET MVC 中的ViewModel允许你将一个或者多个data model和资源整合到一个对象中去,以此使View使用model的时候得到优化,下面的图说明了ViewModel的概念:

使用ViewModel的目的就是让View单个的对象来进行渲染,另一方面可以减少UI展示的逻辑代码,这个是很有必要的,也就是说View唯一的任务就是渲染单个的ViewModel对象,为了让concerns之间有一个清晰的分离,解耦意味着你的程序被设计的更好,所以我们要将对数据处理的代码放在它应该在的位置,远离View、controller。

 

在 MVC 中使用 ViewModel会让你的程序组件之间分离的更好,从而以与维护,记住,单元测试指的是测试小单元。下面列出的是你什么时候要使用ViewModel:

1、Incorporating dropdown lists of lookup data into a related entity

2、Master-detail records view Pagination:

3、combining actual data and paging information

4、Components like a shopping cart or user profile widget

5、Dashboards with multiple sources of disparate

6、data Reports, often with aggregate data 

创建个ViewModel                                                                          

尽管Viewmodel包含了几个实体,但是它任然只是一个类,没有什么特别的,放置它的位置可以是:

1、一个叫做ViewModels的文件夹中,这个文件夹可以放在项目的根目录中;

2、作为一个dll,我们从MVC项目中引用它;

3、放在一个分开的项目中的service layer;

而第一种方式无疑是最简单的一种,我们只需要创建一个文件夹,然后创建一个类就行了。

为了创建一个CustomerViewModel,我们要将Customer和StateDirctionary类型作为属性,来共同组建一个CustomerViewModel类,代码如下:

public class CustomerViewModel 
{ 
    public Customer Customer { get; set; } 
    public StatesDictionary States { get; set; }     public CustomerViewModel(Customer customer) 
    { 
        Customer = customer; 
        States = new StatesDictionary(); 
    } 
}

将ViewModel发送到Veiw                                                               

当然我们是从Controller开始的,将ViewModel发送到View和我们将普通的model发送到View的做法是一样的,因为ViewModel只是一个类,View不知道也不会在意model或者viewModel是从哪里来的,你可以在controller中创建一个ViewModel的实例,为了保证controller的整洁,没有额外的代码,在Controller中需要做的只是取得model或者ViewModel的值,没有其他的:

public ActionResult Edit(int id) 
{ 
     Customer customer = context.Customers.Single(x => x.Id == id); 
     var customerViewModel = new CustomerViewModel(customer); 
     return View(customerViewModel); 
}

然后就是view来渲染ViewModel                                                       

为了让View知道我们传过去的是哪一个对象,我们需要将@model关键字指向ViewModel,就像你在指定一个一般的model一样。

@model FourthCoffee.Web.ViewModels.CustomerViewModel

调用数据的代码:

<div class="editor-label">   
  @Html.LabelFor(model => model.Customer.FirstName) </div>
<div class="editor-field"> @Html.EditorFor(model => model.Customer.FirstName) @Html.ValidationMessageFor(model => model.Customer.FirstName)
</div> @* ...View code continues rendering properties...

使用ViewModel的小建议:                                                              

1、因为使用ViewModel时需要手动的进行映射,但是当ViewModel很复杂的时候,这个将会变得比较困难,这个时候,我们就可以是使用AutoMapper来简化简化工作,AutoMapper会让你顺畅的在ViewModel和models之间创建映射,除此之外还有:POCO Generator、EF POCO Templates

2、只把你在View上用来渲染的属性放到ViewModel中

3、用View来指导ViewModel属性的创建,这样才能更好的渲染和维护

以上动图由“图斗罗”提供

posted @ 2017-11-24 10:17  浅苍蓝  阅读(6792)  评论(1编辑  收藏  举报