从一个登录页面浅淡MVVM（二）

如上图，增加了一个 LoginViewModel.cs 文件，放在 ViewModels 目录中，这个文件就是 LoginPage 的 ViewModel 。

一个 UI 对应一个 ViewModel ，这就是 MVVM 的要求，在 ASP.NET MVC 2 中，便是类似这样的。

下面是这个 ViewModel 的部分代码： 

LoginViewModel.cs的字段与属性

   
     

    
      
    
      [System.Diagnostics.DebuggerStepThroughAttribute()]
public class LoginViewModel : System.ComponentModel.INotifyPropertyChanged
{
 #region 字段
 private string ValidationCodeField;

 private string GivenValidationCodeField;

 private string MessageField;

 private bool IsDoneField;

 private LoginProxy.LoginServiceClient client;
 #endregion
 
 #region 属性
 public User Data
 {
 get; private set;
 }

 [Required]
 [StringLength(4, MinimumLength = 4)]
 [Display(Name = "校验码", Description = "不区分大小写")]
 [RegularExpression("^[a-zA-Z0-9]*$", ErrorMessage = "只能输入字母、数字")]
 public string ValidationCode
 {
 get
 {
 return this.ValidationCodeField;
 }
 set
 {
 if ((object.ReferenceEquals(this.ValidationCodeField, value) != true))
 {
 this.ValidateProperty("ValidationCode", value);
 if (!object.Equals(value, this.GivenValidationCodeField))
 {
 throw new NotSupportedException("请按照给定校验码输入");
 }
 this.ValidationCodeField = value;
 this.RaisePropertyChanged("ValidationCode");
 }
 }
 }
 public string GivenValidationCode
 {
   
     
   
     

    
      　　　　...
 }
 /// <summary>
 /// 用于代表消息，包括异常
 /// </summary>
 public string Message
 {
   
     
   
     

    
      　　　　... //在 setter 中 RaisePropertyChanged()
 }
 /// <summary>
 /// 用于表示登录是否成功
 /// </summary>
 public bool IsDone
 {
 ....//在 setter 中 RaisePropertyChanged()
 }
 #endregion

 #region 构造函数
 public LoginViewModel()
 {
 this.Data = new User();
 }
 #endregion
 
   
     
   
     

    
      .......

}

   
     
 

 

在 ViewModel 中，把第一阶段中用到的 User 、ValidationModel 、LoginProxy.LoginServiceClient 全部整合

到了一起，并且增加了 Message 和 IsDone 两个属性，旨在通过 Binding 能在 UI 中呈现出 ViewModel 中的状态变化。

对Message和IsDone的控制

   
     

    
      
    
      this.client.LoginCompleted += (sender, e) =>
{
 if (e.Error == null)
 {
 if (e.Result == 1)
 {
 // 登录成功
 this.HandleMessage("登录成功");
 this.IsDone = true;
 }
 else if (e.Result == 0)
 {
 // 用户名或密码错误
 this.HandleMessage("用户名或密码错误");
 }
 else if (e.Result == 4)
 {
 // 校验码失效
 this.HandleMessage("校验码失效");
 }
 }
 else
 {
 // 处理异常
 this.HandleException(e.Error);
 }
};

/// <summary>
/// 简单的消息处理
/// </summary>
/// <param name="msg"></param>
void HandleMessage(string msg)
{
 this.Message = string.Format("消息：{0}", msg);
}
/// <summary>
/// 简单的异常处理
/// </summary>
/// <param name="ex"></param>
void HandleException(Exception ex)
{
 this.Message = string.Format("异常：{0}" , ex.Message);
}
   
     

 

同时对UI公开了取得校验码和登录的两个异步方法

对View公开的方法

   
     

    
      
    
      #region 公开的方法
public void GenerateValidationCodeAsync()
{
 if (this.NeedInitializeClient())
 {
 this.InitializeClient();
 }
 this.client.GenerateValidationCodeAsync();
}

public void LoginAsync()
{
 if (this.NeedInitializeClient())
 {
 this.InitializeClient();
 }
 this.client.LoginAsync(this.Data, this.ValidationCode);
}
#endregion
   
     

 

 在 View 部分，Xaml 中的变化不大，只是绑定路径变化了，

如 txtUserName 的从 Text="{Binding UserName... 变为 Text="{Binding Data.UserName...

 

而在 cs 变分，代码明显变少了：

LoginPage.cs

   
     

    
      
    
      public partial class LoginPage : Page
{
 LoginViewModel loginVM;

 public LoginPage()
 {
 InitializeComponent();
 this.loginVM = new LoginViewModel();
 this.loginVM.PropertyChanged += new System.ComponentModel.PropertyChangedEventHandler(loginVM_PropertyChanged);
 this.Loaded+=new RoutedEventHandler(LoginPage_Loaded);
 }

 void loginVM_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
 {
 if (e.PropertyName == "IsDone")
 {
 if (this.loginVM.IsDone)
 {
 // 登录成功，执行跳转
 }
 }
 else if (e.PropertyName == "Message")
 {
 // 可以在 UI 上将 Message 也和 TextBlock 等进行绑定，以显示消息
 MessageBox.Show(this.loginVM.Message);
 }
 }


 void LoginPage_Loaded(object sender, RoutedEventArgs e)
 {
 this.loginVM.GenerateValidationCodeAsync();
 this.DataContext = this.loginVM;
 }

 private void btnChangeValidationCode_Click(object sender, RoutedEventArgs e)
 {
 this.loginVM.GenerateValidationCodeAsync();
 }

 // 对 validationSummary1 进行判断的这段代码是否该移入 ViewModel 中？
 // 如果移进去了，则会造成 ViewModel 依赖于 UI，
 // 如果仅是把 validationSummary1、LayoutRoot 作为参数传递，对于复杂的UI，可能要传递多个这样的参数
 private void btnLogin_Click(object sender, RoutedEventArgs e)
 {
 if (this.validationSummary1.HasErrors)
 {
 this.validationSummary1.Focus();
 return;
 }
 else
 {
 // 扩展方法，校验各个控件的数据绑定
 this.LayoutRoot.Children.ValidateSource();
 if (this.validationSummary1.HasErrors)
 {
 this.validationSummary1.Focus();
 return;
 }
 }

 this.loginVM.LoginAsync();
 }
}

   
     

这里通过 LoginViewModel.PropertyChanged 来呈现 ViewModel 中的状态变化，这只是一种示意，

如果你愿意，也可以在 ViewModel 中增加一些 event 等来实现。

 

这里，我拿不定主意的是 btnLogin_Click() 里面的 Validate 代码，该不该把这些代码移入 ViewModel 中，

是不是该让 ViewModel 依赖于 View ？个人觉得 ViewModel 还是不要依赖于 View 的为好。

 

从职责的角度来看，我更偏向于把 Validation 和 Binding 统一看成是在 View 中实现的，但是这样就会在

View 中书写一些代码（或者也许是有办法能在Xaml中指定，但是我还不知道？），尽管如此，在第三阶段中，

还是尝试了把 Validation 看作是 ViewModel 的职责，在 ViewModel 中增加属性，把 Validation 彻底放

在 ViewModel 中 ---- 这样做仅是为了让 View 的代码更少。

 

Silverlight 4.0 为 ButtonBase 控件增加了 Command 依赖项属性，这样可以在 Xaml 中进行更多的绑定，

更彻底的分离 View 和 ViewModel。

 

补充，还有一点，刚刚在其他的博主的文章中看到：

　　View Model有以下三个部分组成

　　1、属性：一个事物，它的类型可以是一个字符型，也可以是一个对象。实现接口INotifyPropertyChanged,那么任何UI元素绑定到这个属性，不管这个属性什么时候改变都能自动和UI层交互。

　　2、集合：事物的集合，它的类型一般是ObservableCollection，因此，任何UI元素绑定到它，不管这个集合什么时候改变，都可以自动的与UI交互。

　　3、Commands:一个可以被触发的事件，并且可以传递一个类型为Object的参数。但是前提是要实现接口ICommand。

来自于 http://www.cnblogs.com/888h/archive/2010/12/24/1915214.html

 

我不知道这种描述是不是官方的，如果是，那我这个例子中的 ViewModel 中就没有 集合 了，难道这样就不能作为 ViewModel 了？

对此补充的补充：博主天神一已过来发表了意见，也回答了这个问题，在此对天神一表示感谢！

 

三、MVVM模式，并使用Command