Silverlight 4 + RIA Services之商業應用系列----9.1 MVVM+RIA Service

SourceCode:http://www.n-pei.com/download/SilverlightMVVM.rar

part1: 如何使用RIA Services

part2: RIA Services更新和驗證

part3:RIA Services數據新增

part4:皮膚的更改

part5:報表的展示

part6:Endpoint的設置

part7:如何使用RIA Service Class Library 

part8:url重寫和界面友好

part9:MVVM+RIA Service

MVVM模式或者簡稱VM模式是針對WPFSilverlight這種具有很強的數據綁定功能的開發語言而提出的。之前有看過很多WPF的代碼,大家基本上都是使用的MVVM模式開發。最近Silverlight4的火爆引出了SilverlightMVVM模式開發也多了。

如果你對MVVM不瞭解我想下面的簡單介紹應該會對你有幫助。

 

MVVM模式最大的好處是讓整個開發過程中的UI設計和後臺的代碼編寫完全分開了,大家互不影響,設計者可以專注於使用Express Blend等去設計頁面也就是View,而開發的可以完全去通過Model來定義要操作的object,通過ViewModel來定義出來需要對這些model做哪些操作。最後使用Command來把ModelView完全聯繫到一起。

 

這是我寫得第一篇MVVM文章,而且是使用RIA Service。我相信當你看完下面的文章,完全會理解並能夠使用MVVM模式了。

1.  創建一個允許使用RIA ServiceSilverLight Application:

相信不需要多說了。

2.  創建Model

這裏以Product作爲一個model:

 

3.  創建Domain Service

再創建Domain Service之前先準備一些數據,所以要創建一個class

public class ProductRepository

    {

        private static readonly List<Product> Products =

            new List<Product>() {

                new Product { ProductID = 355, Name = "Rain Racer 2000", ModelNumber = "RU007", Description = "Looks like an ordinary bumbershoot, but don't be fooled! Simply place Rain Racer's tip on the ground and press the release latch. Within seconds, this ordinary rain umbrella converts into a two-wheeled gas-powered mini-scooter. Goes from 0 to 60 in 7.5 seconds - even in a driving rain! Comes in black, blue, and candy-apple red.", UnitCost = 99.99m }},

                  public IQueryable<Product> FindAllProducts() {

            return Products.AsQueryable();

        }

接下來創建一個空的domain service。我們需要手動添加一個方法來獲得上面的Products這個list中的數據。

 

4.  View頁面的添加:

實際上這裏如果是設計人員在做頁面,我們根本不需要管到底它頁面上有哪些按鈕,哪些功能。我們只需要去做接下來的一步,添加ViewModel

這裏我添加了一個頁面,然後看一下它的頁面XAML結點和後臺的代碼:

 

黑色線條上面就是傳說中的SearchViewModel Class,所有的數據都有它提供。

下面紅色圈住的地方你可能注意到就基本上是頁面中的所有主要控件,RIA Service根本記沒有在頁面裏,綠色部分是數據綁定,既然沒有數據源哪來的綁定?是不是後臺代碼裏初始化時把數據源給綁定了?看看後臺代碼:

  public SearchView() {

            InitializeComponent();

        }

什麼都沒有,所以說真正的MVVM模式中View頁面的.cs文件都是可以去掉的。這就是爲什麼設計人員只需要專注於設計,開發人員只需要寫代碼。所以說數據綁定時MVVM最重要的。上面的SearchViewModel就是我們接下來要寫得ViewModel

5.  ViewModel類:

首先需要記住ViewModel必須繼承Model類,或者是Model的繼承類。

我們在ViewModel中需要做什麼呢?需要做兩件事情,1是在View頁面加載時我們需要讓它的DataGrid顯示數據,2是我們提供一個搜索按鈕,當頁面上某個按鈕點擊時,重新從服務器端load數據。

 

你會發現在ViewModel類中的Properties ProductsSelectedProduct就是上面View頁面中DataBinding的內容。

當點擊View中那個按鈕時,ViewModel中的Search方法會執行:

public void Search(string keyword)

        {

            keyword = keyword.Trim();

            if (keyword.Length == 0)

            {

                return;

            }

 

            if (SearchStarting != null)

            {

                SearchStarting(this, EventArgs.Empty);

            }

 

            _catalog.Products.Clear();

 

            _catalog.Load(_catalog.GetProductsQuery(keyword), (lo) =>

                {

                 

                }, null);

            SearchCompleted(this, EventArgs.Empty);

           

        }

它通過傳入的參數來從服務器得到Products,然後 清空當前的RIA Service數據源,重新綁定數據。

搞定,運行下看看結果:

 

如果有人需要這個源代碼請告訴我。

Reference:

http://www.silverlightshow.net/items/Model-View-ViewModel-in-Silverlight.aspx

http://www.nikhilk.net/RIA-Services-MIX10.aspx

http://en.wikipedia.org/wiki/Model_View_ViewModel

http://msdn.microsoft.com/en-us/magazine/dd419663.aspx

http://msdn.microsoft.com/en-us/magazine/dd458800.aspx

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章