But first, we want to make a small change to our PostService. We want the ability to show all the categories that belong to a post when viewing that post. In-order to do that, we need to make a small change to the GetAsync method.
We have included the Include method. We pass in a parameter to use the PostCategories property from our Post class. Additionally, we have included the ThenInclude method. For this, we pass in a parameter to use the Category property from our PostCategory class. This is so we get the categories that belong to a post.
Razor Components
Now that we have everything in place, we can go ahead and develop our Razor components. The first thing we are going to produce is our NavMenu Razor component.
NavMenu Razor Component
We can use the @inject keyword to inject a service that belongs to dependency injection. For the NavMenu, we will be injecting the CategoryService.
We override the OnParametersSetAsync in our Razor component to get all the categories. This is stored in the Categories property. These categories are then displayed.
Category Razor Component
Next, we build up our category page. It's a similar story to what we did with NavMenu. But, we try and override the OnInitializedAsync method to populate our categories. However, we soon find that this doesn't work as we intended.
When clicking through categories, we find our category information isn't being updated. That is because OnInitializedAsync isn't being fired more than once. Because we are staying on the Category Razor component to navigate between category pages, we don't need to initialise it again. But we want to update our category information when we click on a category page.
We use the @page keyword twice. This Razor component will be populated when we hit the home page, or when we hit the category page. With the category page, we pass in a route value of "id" which is an integer.
We need to match that route value with a property of the same name. In our code section, we have created an Id property, attributing a [Parameter] attribute around it.
When overriding the OnParametersSetAsync method, we store the category information. In addition, we get the posts for that category to be displayed. In the instance where we don't have a category, we display all the posts.
Post Razor Component
Our final task is to build up our post page. This will show our post in detail and will list all the categories associated with that post.
Similar to category, we use the @page keyword to pass in a route value of "id" which is an integer.
<!-- PostPage.razor -->
@page "/post/{id:int}"
In our code section, we have created an Id property, attributing a [Parameter] attribute around it. This matches our "id" route value.
When overriding our OnParametersSetAsync method, we get the post and store it in the property. We inject and use the PostService to get this information, using the Id from our parameter.
When displaying the post, we list through all the categories that the post belongs to. Then we display the title, published date and content for that post.
See The Working Application
Watch the Blazor application running! See how we navigate through each category from the navigation menu. In addition, see all the posts for a category being displayed. Then, watch as we click on a particular post, which shows the full article.
Suggestions
So we've gone ahead and built up a small blog in Blazor. If you have any suggestions as to any other areas of Blazor you wish for me to cover, let me know. You can contact me on the link below.
About the author
David Grace
Senior .NET web developer | ASP.NET Core | C# | Software developer