6 Forms & Validation – Part 2: Beyond the basics

In this chapter, we’re going to be building on the work we did in chapter 5 by extending our Trail form with some more advanced features. Right now, our form uses some basic styling for validation. However, we’re using the Bootstrap CSS framework which contains some much fancier validation styling. Wouldn’t it be great if we could take advantage of those classes instead of having to write our own? Well, the good news is we can! And we’re going to be learning how in the first section of this chapter.

Blazing Trails shows the rough time it takes for a hiker to walk a trail. This is a really helpful feature for users but currently our form doesn’t allow this value to be entered. This is because we store that value as the total time in minutes, even though we display it as hours and minutes. We want the users to be able to enter the time in hours and minutes, they shouldn’t have to work out total time in minutes just because that’s how the system stores the value. This is a perfect opportunity to implement a custom form component.

6.1   Customizing validation CSS classes

6.1.1   Creating a FieldCssClassProvider

6.1.2   Using custom FieldCssClassProviders with EditForm

6.2   Building custom input components with InputBase

6.2.1   Inheriting from InputBase<T>

6.2.2   Styling the custom component

6.2.3   Using the custom input component

6.3   Working with files

6.3.1   Configuring the InputFile component

6.3.2   Uploading files when the form is submitted

6.4   Updating the form to allow editing

6.4.1   Separating the trail form into a stand-alone component

6.4.2   Refactoring AddTrailPage.razor

6.4.3   Adding the edit trail feature

6.4.4   Testing the edit functionality

6.5   Summary