Exploring .NET MAUI: Popups, Messages, and Data Validation

Through this article series, you've created several .NET MAUI pages, performed navigation, used data binding, and worked with the MVVM and DI design patterns. As you created your view models, you've set information and exception message properties. In this article, you'll build reusable components to display information, error, and validation messages on your pages. To validate

- Paul D. Sheriff

user input, you're going to use data annotation attributes such as [Required] and [Range]. With just a little generic code, you can add validation to your .NET MAUI applications and display the error messages from these data annotation attributes. Sometimes you require a pop-up dialog to ask the user a question, get a little piece of data, or maybe just provide some information to the user. There are a few different dialogs you can use in .NET MAUI and you'll start this article by exploring these.

Display Your Own Page as a Modal Dialog

Any page you create may be used as a modal dialog by calling the PushModalAsync() method on the Navigation object. For this application, before a user can log in, they must read and accept a privacy policy, as shown in Figure 1. This policy page is displayed as a modal dialog. After the user accepts the terms, the Login button becomes enabled so the user can continue using the application. If they don't accept the policies, they're never allowed to log in. To build this functionality, create a privacy policy page and the corresponding view model, as well as a log in view model, and an application settings class to hold the Boolean of whether or not the user accepted the policies.

Create the Privacy Policy View Model

You're not going to add all the functionality for enabling or disabling the Login button yet. First, let's learn how to display a modal dialog and return to the calling page by clicking on a button. Right mouse-click on the Maui-ViewModelClasses folder and add a new class named PrivacyPolicyViewModel. Replace the entire contents of this new file with the code shown in Listing 1. At this point, you don't need a corresponding view model class in the ViewModelLayer project as you are just creating the functionality to call pages in the front-end application.