Building Forms With Validation (Part 2)

 

Custom Validation Class Attributes

By utilizing the edit form, input components, and DataAnnotationValidator, the framework will automatically apply classes to the components based on their validity. The default classes are .valid and .invalid. In .NET 5, we now have the opportunity to personalize these class names.

When utilizing Bootstrap, the standard class names are .is-valid and .is-invalid, and these class names should also include .form-control to ensure the appropriate styling. The next component we will develop will assist us in applying the correct Bootstrap styles to all our form elements. We need to create our own FieldCssClassProvider to personalize the classes that Blazor will employ.

Now, we will build a component that we can just put inside of our EditForm and access EditContext :

• In the MyBlogServerSide project, right-click on the Components folder and select Add class, and name the class CustomCssClassProvider.

• Open the new file and add the code.

Now, we have a component that will make our form controls look like Bootstrap controls.

Building An Admin Interface

To build a simple admin interface, we need to be able to do the following:

• List categories
• Edit categories
• List tags
• Edit tags
• List blog posts
• Edit blog posts

Since we are dealing with either a Category or a Tag, our component must be generic to allow us to call different APIs based on the object type:

• In the MyBlogServerSide project, right-click on the Components folder and select Add | Razor component, then name the component ItemList.razor.

• Open the newly created file and in the code section, add a code in which we need two parameters- a list where we can add all the items, and an ItemTemplate instance that we can use to change how we want the item to be shown.

• We also need a couple of events. Add two events- the first is when we delete a tag or a category. We will send an event to the parent component where we can add the code needed to delete the item. The second one is when we select an item so that we can edit the item.

• Now it's time to add the UI.

Listing and Editing Categories

It's now time to create a component for listing and editing our categories:

• In the MyBlogServerSide project, right-click on the Pages folder, select Add | New folder, and name the folder Admin.

• Right-click on the Pages/Admin folder and select Add | Razor component, then name the component CategoryList.razor.

• At the top of the component, add code.

• The next step is to add a form where we can edit the categories.

• Now add our ItemList component under the code we added in the previous step.

• Add the final code to the code section.

• Run the project and navigate to /admin/categories.

• Try to add, edit, and delete a category.

Listing and Editing Tags

Now we need to create a component to list and edit Tags:

• Right-click on the Pages/Admin folder and select Add | Razor component, then name the component TagList.razor.

• At the top of the component, replace add code.

• The next step is to add a form where we can edit the tags.

• Now it's time to add our ItemList component under the code we added in the previous step.

• Add the final code under the code section.

• Run the project and navigate to /admin/tags.

• Try to add, edit, and delete a tag.

Listing and Editing Blog Posts

• Right-click on the Pages/Admin folder, select Add | Razor component, and name the component BlogPostList.razor.

• At the top of the BlogPostList.razor file, add code. Then, replace the code section with final code.

A widely used method for composing blog posts is Markdown, which our blog platform will accommodate. Given that Blazor is compatible with all .NET Standard DLLs, we can incorporate a pre-existing library named Markdig. This is the same engine that Microsoft utilizes for their documentation site. Let’s follow these steps:

• Under the MyBlogServerSide project, right-click on the Dependencies node in the Solution Explorer and select Manage NuGet Packages.

• Search for Markdig and click Install.

• Right-click on the components folder and select Add | Class, then name the component InputTextAreaOnInput.cs.

• Open the new file and add code.

• Right-click on the Pages/Admin folder, select Add | Razor component, and name the component BlogPostEdit.razor.

• At the top of the BlogPostEdit.razor file, replace the code.

• Now we need to add the form.

• We also need to add our SavePost method.

• Now it's time to show the preview.

• We will also add some variables.

• Now it is time to set up Markdig.

• We also need to add code to load the data (blog post, categories, and tags).

• Run the site, navigate to /admin/blogposts, click on a blog post to edit it, and test the new Markdown support.

• Now, we need to make sure that the blog post page shows a converted HTML version of the Markdown. Open /Pages/Post.razor and add @using Markdig using statement at the top of the file.

Conclusion

Now we have an admin interface up and running so that we can start writing blog posts.