Implementing an “Are you sure?” pop-up in MVVM

Note: I don’t recommend this approach any more, as the code here is not testable. Please read Implementing a testable “Are you sure?” pop-up in MVVM for a testable approach

A common scenario is to have a button on a view that is bound to a command on the viewmodel. You can also have an ABCCommandCanExecute() method on the VM that tells the view whether or not the button can be clicked.

This is all fine until you want to ask the user to confirm the action that will be performed when they click the button. For example “Are you sure you want to reformat your hard disk, dial up all the people in your contact list and reformat their hard disks, and then destroy the world?” It’s kind of rude to do this without confirmation first.

The problem is that when you use WPF binding to bind the VM’s command method to the button’s Command property, you lose control over the execution process, and so can’t inject a message box into the flow.

You could call the message box from the VM code, but this breaks the MVVM pattern, and is a really bad idea if you don’t want people sneering at you in the street. It also stops you unit testing your code, which is inconvenient, but nowt by comparison to the derisive looks.

What you can do is not bind the command method, and handle it all in the button’s click event. If the user confirms their desire to destroy the world, you just call the command method on the VM manually. However, doing this loses the benefits of the ABCCommandCanExecute() method. As this feature is pretty neat, we don’t want to lose it if we don’t have to.

Thankfully, we don’t. After that long and drawn-out preamble, we are proud to present a surprisingly simple solution to the problem (drum roll please)…

This is based on the (apparently reliable) fact that a button’s click event is called before the command is sent to the VM, giving us chance to get in the way.

We create a Boolean property (capital B in deference to the dear, departed George Boole, inventor of most of modern mathematical logic – the good bits anyway!) that will specify whether or not the command is to be executed. Here is some sample code for the VM…

public bool WasISure { get; set; }

Pretty complex stuff eh? Now, in the code-behind of the view, we have code like this…

private void button1_Click(object sender, RoutedEventArgs e) {
  bool wasISure = (MessageBox.Show("Are you sure?",
                                   "Confirm", MessageBoxButton.YesNo)
                                        == MessageBoxResult.Yes);
  ((MainViewModel)this.DataContext).WasISure = wasISure;
}

The code above assumes that your VM is called MainViewModel, and is bound to the DataContext of your view. If not, you just substitute your own code for getting hold of the VM.

When the user clicks the button, the click event is raised first, and this shows the message box. The result (ie confirmation or refusal to destroy the world) is shoved into the VM’s Boolean property, where it can be used by the command method to determine whether or not it is to execute…

private void DestroyTheWorldCommand() {
  if (WasISure) {
    // destroy the world here
  }
}

That’s it really! A great long piece of waffle for a few lines of code (more for those modern types who insist on putting their opening braces on a new line, but still not many). Best of all, it doesn’t break the fab MVVM pattern, allowing you to hold your head up high next time you go down the pub and brag about how clever you are.

Be First to Comment

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.