非常非常简单的MVVM问题

Question

I am trying to make my very first Silverlight App ever, but I can't get the LogOn function to work, can you help me? This should properly be super simple for all of you, I will show you my two files: LogOn.xaml.cs and LogOnViewModel.cs

Apparently the problem is that UserId gets not set early enough to be availble in LogOn.xaml.cx when I need it, can you help me make it work, that would lift my moment quite a bit :-)

public partial class LogOn : PhoneApplicationPage
{
    public LogOn()
    {
        InitializeComponent();
        this.DataContext = LogOnViewModel.Instance;
    }

    private void btnLogOn_Click(object sender, RoutedEventArgs e)
    {
        if ((!string.IsNullOrEmpty(txtEmailAddress.Text)) && (!string.IsNullOrEmpty(txtPassword.Password)))
        {
            txbLogonMessage.Text = "";
            LogOnViewModel.Instance.UserLogin(txtEmailAddress.Text, txtPassword.Password);

            if (LogOnViewModel.Instance.UserId > 0)
                NavigationService.Navigate(new Uri("/_2HandApp;component/Views/Main.xaml", UriKind.Relative));
            else
                txbLogonMessage.Text = "Login was unsuccessful. The user name or password provided is incorrect. Please correct the errors and try again. ";
        }
    }
}


public sealed class LogOnViewModel : INotifyPropertyChanged
{
    public static LogOnViewModel Instance = new LogOnViewModel();
    //public static int userId;

    private SHAServiceClient WS;

private int userId;
    public int UserId
    {
        get
        {
            return userId;
        }

        set
        {
            userId = value;
            this.RaisePropertyChanged("UserId");
        }
    }


private LogOnViewModel()
    {
        WS = new SHAServiceClient();
        WS.UserLoginCompleted += new EventHandler<UserLoginCompletedEventArgs>(WS_UserLoginCompleted);
    }

    void WS_UserLoginCompleted(object sender, UserLoginCompletedEventArgs e)
    {
        if (e.Error == null)
        {
            this.UserId = e.Result;
        }
    }


    public void UserLogin(string email, string password)
    {
        WS.UserLoginAsync(email, password);
    }

/* Implementing the INotifyPropertyChanged interface. */
    public event PropertyChangedEventHandler PropertyChanged;
    private void RaisePropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler propertyChanged = this.PropertyChanged;
        if ((propertyChanged != null))
        {
            propertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

Answer 1

The cause of the problem is what has been highlighted by @flq. You're making an asynchronous call, meaning that you won't get the expected result right away (in your case, the UserId being assigned), but instead, you can subscibe to the Completed event (or provide a callback) to handle things when the asynchronous task finishes.

Now, the "MVVM way" to do this (or at least what I would do) is as follows: first of all, go get MVVM Light! it's a lightweight MVVM framework which would be very helpful. You should have your ViewModel class implement the ViewModelBase base class from MVVMLight, this would provide the change notification and messaging as well as other useful stuff. Then, you should encapsulate the login functionality in a command to be able to wire up it up from xaml, for that you can use MVVMLight's RelayCommand . Once the login is complete, you can just send a message to your view letting it know that (in a pretty decoupled way), and the view can simply initiate the navigation.

Here's the bits of code for that:

public class LogOnViewModel : ViewModelBase
{
    private SHAServiceClient WS;
    public LogOnViewModel()
    {
       WS = new SHAServiceClient();
       WS.UserLoginCompleted += new EventHandler<UserLoginCompletedEventArgs>(WS_UserLoginCompleted);
       LoginCommand = new RelayCommand(UserLogin);
    }
    private int userId;
    public int UserId
    {
       get { return userId; }
       set
       {
          userId = value;
          RaisePropertyChanged(()=>UserId);
       }
    }
    private int password;
    public int Password
    {
       get { return password; }
       set
       {
          password = value;
          RaisePropertyChanged(()=>Password);
       }
    }
    private int username;
    public int Username
    {
       get { return username; }
       set
       {
          username = value;
          RaisePropertyChanged(()=>Username);
       }
    }
    private int loginErrorMessage;
    public int LoginErrorMessage
    {
       get { return loginErrorMessage; }
       set
       {
          loginErrorMessage = value;
          RaisePropertyChanged(()=>LoginErrorMessage);
       }
    }
    void WS_UserLoginCompleted(object sender, UserLoginCompletedEventArgs e)
    {
       if (e.Error == null)
       {
          this.UserId = e.Result;
          // send a message to indicate that the login operation has completed
          Messenger.Default.Send(new LoginCompleteMessage());
       }
    }
    public RelayCommand LoginCommand {get; private set;}
    void UserLogin()
    {
       WS.UserLoginAsync(email, password);
    }
}

for the xaml:

<TextBox Text="{Binding Username, Mode=TwoWay}"/>
<TextBox Text="{Binding Password, Mode=TwoWay}"/>
<Button Command="{Binding LoginCommand}"/>
<TextBlock Text="{Binding LoginErrorMessage}"/>    

in the code behind:

public partial class LogOn : PhoneApplicationPage
{
    public LogOn()
    {
        InitializeComponent();
        this.DataContext = new LogOnViewModel();
        Messenger.Default.Register<LoginCompletedMessage>(
                            this,
                            msg=> NavigationService.Navigate(
                                    new Uri("/_2HandApp;component/Views/Main.xaml",
                                    UriKind.Relative) );
    }
  ....
}

You can see that there is a little bit more (but straightforward) code in the ViewModel and less in the code behind. This also took advantage of DataBinding which is in the heart of MVVM.

Hope this helps :)

PS: the LoginCompletedMessage class is just an empty class in this case (used just to define the type message), but you can use it to send more info (maybe you still want to have the UserId sent)

Answer 2

Well, you're calling an async version of a login WS.UserLoginAsync , which means the execution moves on and indeed there is no user id when you check for it.

You aren't really doing MVVVM here, but anyway, let's go with the flow. Have an event on your "Viewmodel" that is raised when the login process is finished ( WS_UserLoginCompleted ). You can handle it and trigger Navigation in an event-handler of that event.