We enhanced our data models with annotations. That refines the database schema and ensures that the correct data types, string lengths, and character types are stored. This is coupled with some validation tag helpers that display helpful messages to the user if the incorrect data is entered in each field.
Model annotations are included in the System.ComponentModel.DataAnnotations library. They are used to force a column to accept certain data patterns or display more efficiently. There are many of these annotations and we will focus on the following.
Field must contain a value:
Set minimum and maximum lengths:
Match input patterns for things like email addresses and zip codes:
Numeric or date limits:
Define a data type which determines the database column type:
Change the field label:
Change how the value is displayed:
The annotations were entered in the EF model class above each property field. Some annotations accept additional parameters like ErrorMessage.
Once the model is annotated, the database was recreated to allow EF to modify the table schema to match the model design. This ensures that data is validated on the server using ModelState.IsValid and again when it is persisted to the database.
We applied validation controls and client-side JavaScript to the edit page. Basic validation messages are displayed in a <span> tag using the tag helper asp-validation-for. This shows a default message if any of the model annotations are violated. If you specified a custom ErrorMessage in your annotation, that displays instead.
Some client-side scripts are needed to handle the validation logic in the browser. These are provided by ASP.NET but must be added to each page that needs them. This is done in a @section which matches the @RenderSection in the Pages/Shared/_Layout.cshtml file.
Instructions
Open the file Models/Continent.cs and review the annotations. Notice that several can be combined in one block.
Open the file Models/Country.cs and review the mix of annotations.
Open the file Pages/Countries/Edit.cshtml which has five <input> elements. It has the same validation <span> tags. Run the site and view the results in the browser. At first glance, the <input> tags look the same as they did before. But, this time errors and advice will be clearly displayed for the user.
Try creating a continent with numbers in the code
Try creating a continent with an empty name
Try creating a country with numbers in the code
Try creating a country with an empty continent
Try creating a country with a negative population
Try creating a country with a UN Date prior to 1945
Optionally, if you are familiar with browser developer tools, open them (F12) and inspect the validation <span> to see how it is configured. Look for the jQuery scripts inserted at the bottom of the page.