2012年1月23日 星期一

ASP.NET MVVM(1)

MVVM是Model-View-ViewModel的縮寫
基本上也是一種程式系統分層的架構:
Model負責資料。
View負責呈現介面。
ViewModel則是前兩者間互動的媒介。
介面不能直接驅動資料,必須由ViewModel負責
詳細相關介紹可以閱讀這篇文章
http://blog.sanc.idv.tw/2011/12/wpf-mvvm.html

在ASP.NET MVVM裡面Excalibur將透過利用ASP.NET的Expression語法讓Web Form同樣做出類似WPF MVVM的架構,先來一個示範,請看看囉

1.首先網站的web.config要加進Excalibur的設定,註冊好'Binding'這個Expression語法需交由Excalibur的類別處理,(當然Bin裡面dll等等,那些也要放進去)



然後我們做一個示範功能好了,只要一個網頁上有一個文字方塊與按鈕,可以輸入名子按下按鈕後在文字方塊下方,顯示輸入的名子即可,像下面這樣



2.在方案總管加入新項目Default.aspx至網站中,然後於設計的原始檔中加入各一個TextBox、Button、Label,調整並加入Binding語法如下



這樣就幾乎完成MVVM其中的View了,要改變做法的是使用Binding,Binding裡面的文字意思就是View要繫結到ViewModel中的屬性名稱,而且這邊就連像OnClick這樣的event也可以透過Binding去繫結ViewModel裡面的method了,所以,至於Default.aspx.cs中的程式就一行都不需要去動它了,因為View不做其他事情

3.接下來要製作ViewModel的部分,在方案總管加入新項目Hello.ascx至網站中,因為示範的功能很小Model的部分就先用一個Label控制項來充當省略囉,Hello.ascx設計如下



4.撰寫Hello.ascx.cs的內容,分別完成Name屬性與Button1_Click方法中的程式,如下



到這裡一定要說明Hello.ascx的兩個地方:

(1)為何Label的ID屬性要設為'Model'?

答:是因為要有簡單的方式當做MVVM架構中Model物件的識別,或者如果有其他需求也有另一個方法可以在程式中實做IViewModel介面,指派其他或者不是控制項的物件做為Model。所以另外同樣的在View中也是用相同的規則,會用ID為ViewModel的控制項或實做IView介面,後指派的結果讓MVVM架構識別ViewModel物件

(2)為何View裡面Binding的Text屬性不用實做出來?

答:這是因為使用了幫ViewModel節省程式碼的機制,屬性名稱相同ViewModel就不用另外去寫轉譯Model的屬性到ViewModel上的程式,因為在View上Binding的規則是,如果ViewModel沒有這個屬性就允許透過去Binding裡面Model的屬性,因此只要屬性不是Binding在雙向的目標上,只是要唯讀呈現就可使用,否則不建議喔

5.最後終於要將ViewModel跟View結合起來了,到Default.aspx的設計頁面將Hello.ascx自方案總管拖曳進來,然後修改控制項ID為ViewModel,如下,建置成功,就完成囉



Default.aspx.cs



詳細範例與程式碼下載連結於公告文章中