MVVM（Model-View-ViewModel）实例讲解

来源：互联网发布：ubuntu php编译编辑：程序博客网时间：2024/04/30 02:51

MVVM模式大家应该不陌生吧，陌生的快来看看，可是WPF/Silverlight开发中，必备的设计模式。
MVVM模式解决了，我们在开发WPF/Silverlight应用程序过程中产生的业务层、表示层比较混乱问题，使表示层和业务层完全分离。
早在2005年，John Gossman写了一篇关于Model-View-ViewModel模式的博文，这种模式被他所在的微软的项目组用来创建Expression Blend。

从上图可以看出来，View表示层就是我们通常的XAML，用来表示前台界面，ViewModel视图模块层的作用用来连接业务逻辑和视图层的关键部分，通常我们发出的命令或者事件都是通过这层传送给业务逻辑层的，Model就是我们的实际数据，业务逻辑代码等。

下面我们用一个Silverlight简单例子来讲解MVVM模式

这个程序就是实现简单查询，输入ID号，查询符合结果的内容

新建一个Silverlight项目，并按照下图新建目录

MVVM项目目录

Command我们用来存放查询用的命令，Model我们用来存放数据，View我们用来存放显示查询的UserControl，ViewModel我们用来存放查询的ViewModel

我们先建立Model层用来存储访问要查询的数据

1
2
3
4
5
publicclass DataItem
{
    publicint ID { get;set; }
    publicstring Name { get;set; }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
publicstatic class DataDemo
{
    privatestatic Collection<DataItem> _DataList = null;
 
    publicstatic Collection<DataItem> DataList
    {
        get
        {
            if(_DataList == null)
            {
                _DataList = InitDataList();
            }
            return_DataList;
        }
    }
 
    privatestatic Collection<DataItem> InitDataList()
    {
        Collection<DataItem> lists = newCollection<DataItem>();
        for(inti = 0; i < 100; i++)
        {
            DataItem item = newDataItem();
            item.ID = i + 1;
            item.Name = "例子"+ (i + 1);
            lists.Add(item);
        }
        returnlists;
    }
}

接下来，我们新建UserControl用来表示查询的页面（View）

1
2
3
4
5
6
7
8
9
10
11
12
<UserControlx:Class="MVVMDemo.View.QueryData"
 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:local="clr-namespace:MVVMDemo.ViewModel"
 mc:Ignorable="d"Height="256"Width="256">
    <Gridx:Name="LayoutRoot">
        <Buttonx:Name="btnSearch"Height="24"HorizontalAlignment="Left"Margin="164,8,0,0"VerticalAlignment="Top"Width="84"Content="搜索"/>
        <TextBoxx:Name="txtKeyword"Height="24"HorizontalAlignment="Left"Margin="8,8,0,0"VerticalAlignment="Top"Width="152"TextWrapping="Wrap"d:LayoutOverrides="HorizontalAlignment"/>
        <TextBoxx:Name="txtResult"HorizontalAlignment="Left"Margin="8,36,0,8"Width="240"TextWrapping="Wrap"d:LayoutOverrides="VerticalAlignment"/>
    </Grid>
</UserControl>

到这里我们已经建好了Model,View层，接下来，我们建立ViewModel

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
publicclass QueryDataViewModel : INotifyPropertyChanged
{
    #region 变量
    /// <summary>
    /// 查询的数据
    /// </summary>
    privateCollection<DataItem> _DataList = null;
    /// <summary>
    /// 查询命令
    /// </summary>
    privateICommand _QueryCommand = null;
    /// <summary>
    /// 搜索关键字
    /// </summary>
    privatestring _SearchText = string.Empty;
    /// <summary>
    /// 搜索结果
    /// </summary>
    privatestring _SearchResult = string.Empty;
    #endregion
 
    #region 属性
    /// <summary>
    /// 搜索关键字
    /// </summary>
    publicstring SearchText
    {
        get{ returnthis._SearchText; }
        set
        {
            this._SearchText = value;
            if(this.PropertyChanged != null)
                this.PropertyChanged(this,newPropertyChangedEventArgs("SearchText"));
        }
    }
    /// <summary>
    /// 搜索结果
    /// </summary>
    publicstring SearchResult
    {
        get{ returnthis._SearchResult; }
        set
        {
            this._SearchResult = value;
 
            if(this.PropertyChanged != null)
                this.PropertyChanged(this,newPropertyChangedEventArgs("SearchResult"));
        }
    }
    /// <summary>
    /// 查询命令
    /// </summary>
    publicICommand QueryCommand
    {
        get{ return_QueryCommand; }
    }
    #endregion
 
    #region 构造函数
    publicQueryDataViewModel(Collection<DataItem> dataList)
    {
        this._DataList = dataList;
        _QueryCommand = newQueryDataCommand(this);
    }
    #endregion
 
    #region 方法
    /// <summary>
    /// 查询数据
    /// </summary>
    publicvoid QueryData()
    {
        if(!string.IsNullOrEmpty(this.SearchText))
        {
            DataItem dataItem = null;
            foreach(DataItem item inthis._DataList)
            {
                if(item.ID.ToString() == this.SearchText)
                {
                    dataItem = item;
                    break;
                }
            }
            if(dataItem != null)
            {
                this.SearchResult = string.Format("ID:{0}\nName:{1}", dataItem.ID, dataItem.Name);
            }
        }
    }
    #endregion
 
    #region INotifyPropertyChanged 成员
 
    publicevent PropertyChangedEventHandler PropertyChanged;
 
    #endregion
}

这是一个很简单的ViewModel，我们定义了两个属性，SearchText表示查询关键字，SearchResult表示查询结果，QueryCommand表示查询命令，后面我们会和View绑定。
QueryDataCommand还没有实现，接下来我们创建QueryCommand

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
publicclass QueryDataCommand : ICommand
{
    privateQueryDataViewModel _QueryDataViewModel;
 
    publicQueryDataCommand(QueryDataViewModel queryDataViewModel)
    {
        this._QueryDataViewModel = queryDataViewModel;
    }
 
    #region ICommand 成员
 
    publicbool CanExecute(objectparameter)
    {
        returntrue;
    }
 
    publicevent EventHandler CanExecuteChanged
    {
        add { }
        remove { }
    }
 
    publicvoid Execute(objectparameter)
    {
        this._QueryDataViewModel.QueryData();
    }
 
    #endregion
}

到目前为止，ViewModel已经建立完成。
我们将ViewModel绑定到View
View的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
publicpartial class QueryData : UserControl
{
    privateQueryDataViewModel _QueryDataViewModel = null;
 
    /// <summary>
    /// 构造函数
    /// </summary>
    publicQueryData()
    {
        InitializeComponent();
 
        this._QueryDataViewModel = newQueryDataViewModel(MVVMDemo.DataDemo.DataList);
        base.DataContext = this._QueryDataViewModel;
        this.btnSearch.Click += newRoutedEventHandler(btnSearch_Click);
    }
 
    /// <summary>
    /// 点击事件
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    voidbtnSearch_Click(objectsender, RoutedEventArgs e)
    {
        if(this._QueryDataViewModel != null)
        {
            this._QueryDataViewModel.SearchText = this.txtKeyword.Text;
            this._QueryDataViewModel.QueryCommand.Execute(null);
        }
    }
}

因为Silverlight没有Command，我们只能采用这个方法调用Command，wpf则可以在xaml里面直接绑定这个命令
前台xaml我们把输入框，后结果框绑定
输入框

1
2
输入框 Text="{Binding SearchText,Mode=TwoWay}"
结果框 Text="{Binding SearchResult,Mode=OneWay}"

我们把View放到页面上

1
2
3
4
5
6
7
8
9
10
<UserControlx:Class="MVVMDemo.MainPage"
 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:local="clr-namespace:MVVMDemo.View"
 mc:Ignorable="d"Height="256"Width="256">
    <Grid>
        <local:QueryData></local:QueryData>
    </Grid>
</UserControl>

到目前为止，MVVM最简单的例子已经建立完成。我们发现表示层和业务逻辑层从此实现了分离，同时，我们在单元测试上也可以剥离表示层进行。

原创文章，转载请注明：转载自.NET开发者

本文链接地址: MVVM（Model-View-ViewModel）实例讲解