此例項為本人依託網上原有資料，加以個人理解整合，在MVVM模式下寫的一個基於MySQL資料庫的小Demo,實現對資料庫中內容的搜尋顯示功能。文件下載 原始碼下載

本例項基於VS2012+MySQL+SilverLight5實現。

MVVM開發模式

概述

MVVM（Model-View-ViewModel）是在WPF/Silverlight一種很常見的開發模式，是MVC模式的一種變種，從字面意義上便可知MVVM模式大致上可以分為三個模組即Model、View和ViewModel。Model（模型）層主要存放一些實際資料，業務邏輯程式碼， View(檢視)就是與使用者互動的介面層，存放著我們的Xaml頁面，而通過Xaml頁面控制元件的Binding技術就能夠實現View和Model之間的關聯，但實際程式設計時我們發現, Model中的屬性(與方法)往往不那麼容易與View中的介面控制元件關聯起來, 比如型別不匹配介面控制元件所需要的型別與模型中屬性提供的型別不匹配，也就是說需要額外操作，模型中的資料需要經過一些額外的處理才能傳給檢視，這誕生了我們的ViewModel模組，ViewModel檢視模組層的作用用來連線業務邏輯和檢視層的關鍵部分，通常我們發出的命令或者事件都是通過這層傳送給業務邏輯層的。這樣MVVM模式解決了，我們在開發WPF/Silverlight應用程式過程中產生的業務層、表示層比較混亂問題，使表示層和業務層完全分離。

由於我們的silverLight專案無法直接連線MySQL資料庫，通常的做法是通過Web Service和WCF服務，所以在對資料庫的操作將放到web專案中，然後通過silverLight中引用相應的服務便可間接時間對資料庫的訪問。

例項演示

新建一個silverLight應用程式MVVMDemo, 生產解決方案後會有兩個專案，一個是silverLight的專案，一個是以silverLight專案名加.web的專案。

資料庫層

專案主要功能：實現對資料庫中的使用者根據使用者名稱的模糊查詢。

資料庫的設計：資料庫名：db_user,表名：t_user, 詳細見下圖：

在silverLight專案中新建四個資料夾，分別是Model， View， ViewModel和Command，Command我們用來存放的命令，Model我們用來存放獲取到的資料，View我們用來存放顯示查詢的UserControl，ViewModel用來實現相應資料和命令的繫結。在web專案中新建Entiyi資料夾用來存放資料庫實體類（User），同時在web專案下新建一個操作資料庫的類SQLHelper和一個提供給SilverLight專案執行使用者資訊相關操作的web服務，UserInfoWebService.asmx截圖如下：

要使用MySQL資料庫，首先需要下載安裝mysql-connector-net-6.6.4，然後在web專案中引用安裝目錄下的MySql.Data.dll, 然後再Web.config配置連線字串如下：

<appSettings>

<addkey="ip"value="localhost"/>

<addkey="port"value="3306"/>

<addkey="user"value="root"/>

<addkey="pwd"value="teamwork603_04"/>

<addkey="database"value="db_user

<addkey="encoding"value="utf8"/>

<addkey="parseType"value="HTML"/>

</appSettings>

這樣在SQLHelper類中再引用MySql.Data.MySqlClient; System.Configuration;便可實現對資料庫的訪問，在此就不貼上具體實現程式碼。

然後在UserInfoWebService.asmx中便可以通過呼叫SQLHelper類中的方法進一步封裝成類集合供silverLight專案呼叫，在UserInfoWebService.asmx寫入以下方法。

[WebMethod]

publicList<User>GetUserByName(string sqlStr)

{

List<User> userList = newList<User>();

SQLHelpersqlHelper = newSQLHelper();

DataSetuserDataSet = sqlHelper.QueryData(sqlStr);

foreach (DataRow dr in userDataSet.Tables[0].Rows)

{

Useruser = newUser(Convert.ToInt32(dr[0]), Convert.ToString(dr[1]));

userList.Add(user);

}

return userList;

}

這樣一個根據使用者名稱查詢使用者的web服務方法便完成了，接下來再silverLight的專案中引用—>新增服務引用—>發現，然後選後剛剛的UserInfoWebService.asmx，即可，如圖：

可以修改名稱空間為UserInfoServiceReference，在silverlight的專案中你會發現多出了一個Service References的資料夾，資料夾裡面就是引用的服務。

View層

到了這步，對資料庫部分的工作就大致完成了，結下了就是通過MVVM模式來實現查詢了。

首先在View資料夾下新建一個Xaml頁面，使用者提供查詢的介面，如下圖：

也就是一個文字框，一個按鈕，和一個顯示結果的DataGrid，程式碼在後面。

ViewModel層

我們可以看到有三個控制元件，為了在ViewModel層實現繫結，需要在ViewModel層分別為這三個控制元件定義相應的屬性, 在文字框輸入查詢字元後文本框的文字屬性就變化，查詢到資料後更新到DataGrid後相應的屬於也會變化， 要實現屬性變化的通知就需要實現INotifyPropertyChanged 介面，INotifyPropertyChanged介面定義了一個當屬性值改變時執行的事件，名稱為PropertyChanged，這是繼承這個藉口必須要實現的事件， event PropertyChangedEventHandler PropertyChanged; PropertyChangedEventHandler委託類delegate voidPropertyChangedEventHandler(object sender, PropertyChangedEventArgs e); PropertyChangedEventArgs型別，這個類用於傳遞更改值的屬性的名稱，實現向客戶端已經更改的屬性發送更改通知，屬性的名稱為字串型別。根據PropertyChanged事件的委託類，實現PropertyChanged事件：

PropertyChanged(this, new PropertyChangedEventArgs("PropertyName"));

綜上，可在ViewModel中新建一個QueryUserViewModel類，繼承INotifyPropertyChange介面，定義查詢關鍵字和查詢結果兩個變數，並實現相應的屬性更改事件：

#region屬性

///<summary>

///查詢關鍵字

///</summary>

publicstring SearchText

{

get { return _SearchText; }

set

{

_SearchText = value;

if(PropertyChanged != null)

{

this.PropertyChanged(this, newPropertyChangedEventArgs("SearchText"));

}

}

}

///<summary>

///查詢結果

///</summary>

publicObservableCollection<User> ResultText

{

get { return _ResultText; }

set

{

_ResultText = value;

if(PropertyChanged != null)

{

this.PropertyChanged(this, newPropertyChangedEventArgs("ResultText"));

}

}

}

接下來還有按鈕事件的繫結，按鈕具有Command屬性，實現自定義命令需要繼承ICommand介面。在該介面中定義了一個event EventHandler CanExecuteChanged事件，當出現影響是否應執行該命令的更改時發生，bool CanExecute(object para)方法，定義用於確定此命令是否可以在其當前狀態下執行的方法。以及void Execute(object para)執行此命令時呼叫的方法。這樣就需要在ICommand檔案加下新增一個QueryUserCommand類，用於自定義命令，通過委託執行ViewModel中的SearchUserByUserName方法

///<summary>

///定義Action委託

///</summary>

privateAction _Handler;

publicQueryUserCommand(Action Handler)

{

this._Handler =Handler;//委託方法

}

///<summary>

///當出現影響是否應執行該命令的更改時發生。

///</summary>

publiceventEventHandlerCanExecuteChanged;

///<summary>

///定義用於確定此命令是否可以在其當前狀態下執行的方法。

///</summary>

///<paramname="para"></param>

///<returns></returns>

publicboolCanExecute(object para)

{

if (para != null)

{

CanExecuteChanged(para, newEventArgs());

}

returntrue;

}

///<summary>

///定義在呼叫此命令時呼叫的方法。

///</summary>

///<paramname="para"></param>

publicvoid Execute(object para)

{

_Handler(); //呼叫委託

}

所以在QueryUserViewModel類中，還需要新增一個按鈕的Command屬性，

///<summary>

///查詢命令

///</summary>

publicICommand SearchCmd

{

get { return_SearchCmd; }

         }

以及屬性執行的方法，和在建構函式關聯委託執行的方法_SearchCmd = newQueryUserCommand(SearchUserByUserName);

Model層

接下來就可以通過呼叫Model的資料來資料和命令的關聯了，Model層主要是通過對Web專案中資料的提取來獲得資料，而在UserInfoWebService.asmx類中提供了一個web方法GetUserByName，可以通過此方法的相應事件在Model層實現呼叫，所以接下來在Model層中新建一個UserHandle類，一下函式實現對Web方法的呼叫：

///<summary>

///獲取使用者

///</summary>

///<paramname="userName"></param>

publicvoidgetUserList(string userName)

{

userName = "%" + userName+ "%";

string sqlStr = "select* from t_user where user_name like '" + userName + "'";

UserInfoWebServiceSoapClientuserInfoClient = newUserInfoWebServiceSoapClient();

userInfoClient.GetUserByNameCompleted += newEventHandler<GetUserByNameCompletedEventArgs>(userInfoClient_GetUserByNameCompleted);

userInfoClient.GetUserByNameAsync(sqlStr);       

}

可以看到，編譯器自動給我們的Web方法添加了一耳光Completed結尾的事件，和一個執行函式以Async結尾，我們在這裡需要為Completed事件新增一個函式，用來傳遞執行查詢完成後資料的回傳到客戶端，名字為userInfoClient_GetUserByNameCompleted的函式，為了實現自動回傳到ViewModel層，需要定義一個委託和相應的事件，

///<summary>

///完成獲取使用者

///</summary>

///<paramname="sender"></param>

///<paramname="e"></param>

publicvoiduserInfoClient_GetUserByNameCompleted(object sender, GetUserByNameCompletedEventArgs e)

{

userList = e.Result;

getUserListEvent(userList);//觸發事件，傳遞獲取到的使用者

}

///<summary>

///定義處理獲取使用者完成後的委託

///</summary>

///<paramname="userList"></param>

publicdelegatevoidGetUserListEventHandle(ObservableCollection<User>userList);

///<summary>

///將委託和事件關聯

///</summary>

publiceventGetUserListEventHandlegetUserListEvent;

然後再ViewModel層的QueryUserViewModel類中的建構函式中新增相應的事件執行函式實現資料的收和反饋到介面：

userHandle.getUserListEvent += new UserHandle.GetUserListEventHandle(SetResult);

這樣整個機制就大體完成了，接下來就是介面的程式碼：

<UserControl

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" x:Class="MVVMDemo.View.QueryUser"

xmlns:vm="clr-namespace:MVVMDemo.ViewModel"

mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="400">

<UserControl.Resources>

<vm:QueryUserViewModel x:Key="QUVM"/>

</UserControl.Resources>

<Grid x:Name="LayoutRoot"Background="White" DataContext="{StaticResource QUVM}" >

<Button Content="查詢"HorizontalAlignment="Left" Margin="191,36,0,0"VerticalAlignment="Top" Width="75" Command="{Binding SearchCmd}"/>

<TextBox HorizontalAlignment="Left" Height="23" Margin="37,35,0,0" TextWrapping="Wrap" Text="{Binding SearchText, Mode=TwoWay}" VerticalAlignment="Top" Width="120"/>

<sdk:DataGrid HorizontalAlignment="Left" ItemsSource="{Binding ResultText}" Height="108" Margin="37,97,0,0"VerticalAlignment="Top" Width="229"AutoGenerateColumns="False"AlternatingRowBackground="BlanchedAlmond">

<sdk:DataGrid.Columns>

<sdk:DataGridTextColumn Header="ID" Binding="{Binding ID}" Width="50" ></sdk:DataGridTextColumn>

<sdk:DataGridTextColumn Header="Name" Binding="{Binding Name}" Width="100"></sdk:DataGridTextColumn>

</sdk:DataGrid.Columns>

</sdk:DataGrid>

</Grid>

</UserControl>

執行介面：

個人觀點

自認為對此開發模式最好部分就是通過繫結實現了前臺和後臺的分離，在實現上多采用事件和委託機制，對於不理解事件和委託的同學來說會理解整個架構的流程會比較困難，個人覺得整個系統框架寫得比較複雜，其中還有很多不規範和不完善以及冗餘的地方以後完善。