Silverlight中使用MVVM(4)—演练

本来打算用MVVM实现CRUD操作的,这方面例子网上资源还挺多的,毕竟CRUD算是基本功了,因为最近已经开始学习Cailburn框架了,感觉时间

挺紧的,这篇就实现其中的更新操作吧。

       

功能很明确,当我们更改DataGrid中的CheckBox时,将源中当前发生变化的数据项在界面上显示出来。我们仍然在前面项目的基础上实现这个功能

首先我们需要给实体Person类添加一个Bool的属性,因为这里我们只对这个属性值操作,所以对于age,name属性也就无必要实现更改通知了

        public class Person:INotifyPropertyChanged
      {
        public int age { get; set; }
        public string name { get; set; }
        private bool _isBoy;
        public bool IsBoy
        {
            get { return _isBoy; }
            set { _isBoy = value;
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs("IsBoy"));
            }
            }
        }
        public event PropertyChangedEventHandler PropertyChanged;
      }

我们仍然从Persons中获取数据集合,这里我们因为操作时源集合将发生变化,所以这里我们继承了ObservableCollection<T>类

         public class Persons:ObservableCollection<Person>
        {
        public Persons() : base()
        {
        }
        public new event PropertyChangedEventHandler PropertyChanged;
        public new void Add(Person person)
        {
            //添加项时自动绑定,并且向上传递发生改变的属性
            ((INotifyPropertyChanged)person).PropertyChanged += (obj, e) =>
            {
                if (PropertyChanged != null)
                {
                    PropertyChanged(obj, new PropertyChangedEventArgs(e.PropertyName));
                }
            };
            base.Add(person);
        }
        }

这里的Persons类通过new关键字隐藏了ObservableCollection<Person>原来的事件和方法,在Persons类中这里我们还需要

添加一个获取源数据的集合

       public Persons GetPerson()
        {
            //获取数据源集合
            Persons getAllpersons = new Persons();
            for (int i = 1; i < 4; i++)
            {
                getAllpersons.Add(new Person() {age=i,name="Student"+i,IsBoy=true});
            }
            return getAllpersons;
        }

现在对于Model我们已经完成了工作,下面就是修改ViewModel了,这个部分其实没有太大的变化

        public Persons GetPersons { get; set; }
        public PageViewModel()
        {
            GetPersons = new Persons().GetPerson();
            //数据源发生变化时的操作
            GetPersons.PropertyChanged += (obj, e) =>
            {
                Person person = (Person)obj;
                MessageBox.Show(string.Format("CurrentDetailes:{0},{1},{2}",person.name,person.age,person.IsBoy));
            };
        }

我们对于这个GetPersons这个源集合进行了一个操作,就是当它的属性发生变化时执行一个动作,这里我们只是用对话框将当前项显示出来

对于UI,我们仍然只是用之前的Xaml

        <data:DataGrid ItemsSource="{Binding GetPersons}"  AutoGenerateColumns="True" Height="200" HorizontalAlignment="Left" Name="dataGrid1"  />

最后我们将View和Model都放入MainPage页面中

        <UserControl.Resources>
        <vm:PageViewModel x:Key="model"></vm:PageViewModel>
        </UserControl.Resources>
        <Grid x:Name="LayoutRoot" Background="White" DataContext="{StaticResource model}">
        <viw:PageView></viw:PageView>
        </Grid>

好了,这样我们的功能就实现了。不过在这里我们还是可以考虑一点东西的,真实情况是我们的实体类不会只是一个,那么我们就要重复为每一个实体类实现
ObservableCollection<T> 类了,这时可能你已经想到用泛型了,我们把集合用泛型实现.

对于Persons类,我们将其改为泛型集合

       public class ViewModelCollection<T> : ObservableCollection<T>
       {
        public ViewModelCollection() : base()
        {
        }
        public new void Add(T item)
        {
            ((INotifyPropertyChanged)item).PropertyChanged += new PropertyChangedEventHandler(ViewModelCollection_PropertyChanged);
            base.Add(item);
        }
        public new event PropertyChangedEventHandler PropertyChanged;
        void ViewModelCollection_PropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(sender, new PropertyChangedEventArgs(e.PropertyName));
            }
        } }

ViewModel中:

        public ViewModelCollection<Person> GetPersons{get;set;}
        public PageViewModel()
        {
            GetPersons = GetMan();
            //数据源发生变化时的操作
            GetPersons.PropertyChanged += (obj, e) =>
            {
                Person person = (Person)obj;
                MessageBox.Show(string.Format("CurrentDetailes:{0},{1},{2}", person.name, person.age, person.IsBoy));
            };
        }
         public static ViewModelCollection<Person> GetMan()
        {
            //获取数据源集合
            ViewModelCollection<Person> getAllpersons = new ViewModelCollection<Person>();
            for (int i = 1; i < 4; i++)
            {
                getAllpersons.Add(new Person() { age = i, name = "Student" + i, IsBoy = true });
            }
            return getAllpersons;
        }

整体上的是一致的,只不过之前,因为实体类单一,所以我一直将数据源固定在Model模块中的,那么用泛型之后,我就将这个获取数据源的行为就移动到对应的ViewModel中了,这样实现更为优雅一些。

其实通过这个循序渐进的过程,很容易让人感觉的到,从开始到现在除非我们需求的改变,很少修改UI,几乎大部分重构或者修改都是在ViewModel中实
现,这个也的确让人体会到UI与逻辑分离带来的方便之处,同时经过MVVM的分离形式,我感觉对于程序的调试也比先前容易定位。

的确,MVVM模式如果再结合一些主流的框架,可以完成许多丰富的功能,当然这已经是另一个话题了,这里仅仅实现了更新功能,关于MVVM模式的CRUD的完整实现可以参考网上的资源,也可以参考这篇文章

代码下载:UpdateByMVVM
VS2010+SL3

Silverlight中使用MVVM(4)—演练,码迷,mamicode.com

时间: 2024-10-09 22:57:03

Silverlight中使用MVVM(4)—演练的相关文章

Silverlight中使用MVVM(1)--基础

Silverlight中使用MVVM(1)--基础 Silverlight中使用MVVM(2)-提高 Silverlight中使用MVVM(3)-进阶 Silverlight中使用MVVM(4)-演练 这是我第一篇关于设计模式方面的文章,以前除了对单例模式等几个常用的模式有所研究之外,对设计模式不是太重视,总觉得要到一定的程度才需要接触, 最近的项目中使用了MVVM模式,所以这段时间查阅了大量这方面模式的文章,理论上的东西大家都说的比较好,这里我也不大谈MVVM模式的优势了,只是 美中不足的是大

Silverlight中使用MVVM(2)-(提高)

在第一篇文章中的示例中,我们已经简单的了解了应用MVVM模式的流程,我的本意是你已经了解了一点MVVM的概念,然后又没有一个较好的例子学习,可以跟着我一起学习MVVM模式,所以这个部分,都是没有理论知识的,当然整个例子学完后,我们会回过头探讨一下,将其总结出来. 现 在我们主要在前面的示例上进行扩展,前面的示例中我们主要是将一个源对象绑定到DataGrid中的,接下来我们继续使用MVVM模式,将 DataGrid选择行的变化体现界面中,其实通过这个需求变化,你会发现UI与逻辑分离带来的优势,尽管

Silverlight中使用MVVM(3)—进阶

这篇主要引申出Command结合MVVM模式在应用程序中的使用 我们要做出的效果是这样的 就是提供了一个简单的查询功能将结果绑定到DataGrid中,在前面的基础上,这个部分相对比较容易实现了 我们在PageViewModel中添加两个属性 private string _searchText; //查询关键字 public string SearchText { get { return _searchText; } set { _searchText = value; if (Propert

Silverlight实用窍门系列:47.Silverlight中元素到元素的绑定,以及ObservableCollection和List的使用区别

问题一:在某一些情况下,我们使用MVVM模式的时候,对于某一个字段(AgeField)需要在前台的很多个控件(A.B.C.D.E)进行绑定,但是如何能够让我们后台字段名改变的时候能够非常方便的改变所有使用了这个字段的控件呢? 回答:使用Element to Element Binding,将AgeFiled绑定到A控件,然后再让B.C.D.E控件绑定A控件的使用AgeField字段的属性. 例如:字段(AgeField)的数据是年龄大小,A.B.C.D.E控件分别是Ellipse.Label.S

js架构设计模式——理解javascript中的MVVM开发模式

理解javascript中的MVVM开发模式 http://blog.csdn.net/slalx/article/details/7856769 MVVM的全称是Model View ViewModel,这种架构模式最初是由微软的MartinFowler作为微软软件的展现层设计模式的规范提出,它是MVC模式的衍生物,MVVM模式的关注点在能够支持事件驱动的UI开发平台,例如HTML5,[2][3] WindowsPresentation Foundation (WPF), Silverligh

angular中的MVVM模式

在开始介绍angular原理之前,我们有必要先了解下mvvm模式在angular中运用.虽然在angular社区一直将angular统称为前端MVC框架,同时angular团队也称它为MVW(Whatever)框架,但angular框架整体上更接近MVVM模式.下面是Igor Minar发布在Google+ https://plus.google.com/+IgorMinar/posts/DRUAkZmXjNV的文章内容: MVC vs MVVM vs MVP. What a controver

转 。。理解javascript中的MVVM开发模式

MVVM的全称是Model View ViewModel,这种架构模式最初是由微软的MartinFowler作为微软软件的展现层设计模式的规范提出,它是MVC模式的衍生物,MVVM模式的关注点在能够支持事件驱动的UI开发平台,例如HTML5,[2][3] WindowsPresentation Foundation (WPF), Silverlight 和 t ZK framework,Adobe Flex. 对这种模式的实现,大部分都是通过在view层声明数据绑定来和其他层分离的,这样就方便了

ArcGIS API for Silverlight中加载Google地形图(瓦片图)

原文:ArcGIS API for Silverlight中加载Google地形图(瓦片图) 在做水利.气象.土地等行业中,若能使用到Google的地形图那是再合适不过了,下面就介绍如何在ArcGIS API for Silverlight中加载Google地 形图.先上一个图,初步制作,待后续继续改进 ArcGIS API for Silverlight 中的ArcGISTiledMapServiceLayer图层,继承自TiledMapServiceLayer.如果想实现自己的缓存地图图 层

[Win10]1 WPF和WP8 Silverlight中的导航问题

一.Frame.Page框架的相关介绍 1.Frame类: 继承层次结构 System.Object   System.Windows.Threading.DispatcherObject     System.Windows.DependencyObject       System.Windows.Media.Visual         System.Windows.UIElement           System.Windows.FrameworkElement