Handling User Input and Validation

User input forms the core of any interactive application. The way we manage this input, validate it, and respond to it directly influences the user experience of our application. While backend validation of user input is indispensable to maintaining data integrity, providing immediate and useful feedback on the frontend is equally important for a good user experience. In this chapter, we’re going to dig into the crucial topic of managing user input and validation within a .NET MAUI application utilizing the MVVM design pattern.

This chapter is organized into the following sections:

• Implementing input validation on ViewModels
• Visualizing validation errors with triggers
• Prompts and alerts
• Confirming or canceling navigation

With the aim of making our application more dynamic and interactive, this chapter will focus on handling user input effectively – ensuring a smooth and seamless user experience. Let’...

Technical requirements

In this chapter, we’ll further enrich the Recipes! app with more features. To stay in sync, all the resources and code snippets are available on GitHub: https://github.com/PacktPublishing/MVVM-pattern-.NET-MAUI/tree/main/Chapter09. If you’re looking to actively code alongside the chapter, it’s best to kick off from the Start folder. The finalized version can be found in the Finish folder.

Implementing input validation on ViewModels

Input validation can be implemented in various ways and at different points within the life cycle of user interaction. It could happen as soon as a user changes a property, providing immediate feedback on the validity of the data entered. On the other hand, it might be performed only when the user initiates a certain action, such as clicking a button, thereby offering a more cumulative validation experience. Deciding on when and how to implement validation often depends on the specific requirements of your project. It’s a balance between the need for immediate feedback and maintaining a smooth, uninterrupted user flow. There’s no one-size-fits-all solution, and the strategy can vary based on the complexity of the data, the form of user interaction, and the overall design of your application.

Implementing validation on the frontend offers several advantages: it provides users with immediate feedback, ensuring a more responsive...

Visualizing validation errors with triggers

Triggers help us customize how UI elements work and look without building new controls from scratch.

While there are different types of triggers, we’ll focus on data triggers. These kick in when a property (on the ViewModel) changes, allowing us to adjust elements of a UI control dynamically, based on what the user does.

Types of triggers

There are different types of triggers in .NET MAUI: PropertyTrigger, DataTrigger, EventTrigger, and so on… They all allow you to change the appearance of a UI control declaratively in XAML based upon a trigger. They only differ in what triggers the change: a property value, a bound value, an event. You can learn more about them at https://learn.microsoft.com/dotnet/maui/fundamentals/triggers.

In essence, a DataTrigger provides a way to declaratively set up UI changes in response to data changes, directly within your XAML, without having to write procedural code in your code-behind...

Prompts and alerts

Direct feedback and clear communication are paramount when it comes to a solid user experience. As users navigate your application and interact with various inputs, there are moments where a subtle notification or a direct prompt can make all the difference. Prompts and alerts serve as these essential tools, guiding users through their journey, ensuring they’re informed and make intentional decisions.

Showing prompts and alerts is something that is platform-specific. Luckily .NET MAUI has got us covered as they provide simple and intuitive APIs for this. On the other hand, in an MVVM scenario, displaying a prompt or alert is mostly triggered from a ViewModel, which should be framework-independent. The solution, of course, is creating an interface for this functionality that a ViewModel can talk to. On the MAUI side of things, we can easily implement this interface and register it in our DI container so the implementation gets injected into the ViewModels...

Confirming or canceling navigation

As users interact with our application, there may be moments when they’re about to navigate away from a page containing unsaved changes or important input. To prevent potential data loss, it’s essential to prompt for confirmation before allowing such navigation. Let’s see how we could build this by leveraging the NavigationService that we built in the previous chapter:

1. Let’s start by adding the following interface called INavigatable to the Navigation folder of the Recipes.Client.Core project:

   public interface INavigatable
   {
       Task<bool> CanNavigateFrom(NavigationType navigationType);
   }

   ViewModels that want to control whether the user is able to navigate can implement this interface. This is analogous to the other interfaces we introduced in the context of navigation, such as the INavigatedFrom, INavigatedTo, and INavigationParameterReceiver interfaces.

2. Extend the INavigationInterceptor...

Summary

In this chapter, we delved deep into enhancing user experience through effective validation, prompts, and alerts. We explored the power of ObservableValidator for validation logic and learned the nuances of showing errors both as a collective list and inline, right next to input fields. With triggers, we learned how to customize UI elements without reinventing the wheel. We also explored using an IDialogService leveraging alerts and prompts, which is essential in contexts where user feedback or confirmations, such as during critical actions or navigations, are required. As we move forward, we’ll pivot to a vital aspect of many modern apps: making remote API calls.

Further reading

To learn more about the topics that were covered in this chapter, take a look at the following resources:

• ObservableValidator: https://learn.microsoft.com/dotnet/communitytoolkit/mvvm/observablevalidator
• Triggers: https://learn.microsoft.com/dotnet/maui/fundamentals/triggers
• Behaviors: https://learn.microsoft.com/dotnet/maui/fundamentals/behaviors
• .NET MAUI Community Toolkit Behaviors: https://learn.microsoft.com/dotnet/communitytoolkit/maui/behaviors/
• .NET MAUI popups: https://learn.microsoft.com/dotnet/maui/user-interface/pop-ups