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屬性的創建，這樣才能更好的渲染和維護

以上動圖由“圖斗羅”提供