Blazor Server in .NET 6 - Part Five

Welcome to the final part of our series: Blazor Server in .NET 6.

This final part of the blog series will cover how to use dropdowns and data binding using both lists and enums. I will showcase how to add an HttpService that uses the built-in .NET HttpClient class to make calls to the D&D 5e API! This will be a short introduction to setting up an HttpService, making a get call to the API, and viewing the results as a string.

And to conclude, I will exhibit how to add a dropdown with the available race options that our character can choose from. When a race is selected we want to call the D&D 5e API to get that race information to display to the user with more information. Let’s get started!

Adding an Armor Enum to our CharacterModel

First, we are going to tackle using the dropdown and how to use data binding using both lists and enums. Add an ArmorType enum file and add a property to the CharacterModel for the armor type.

AddCharacter Form

Next, we are going to add a List ArmorTypes as a property to the AddCharacterForm.razor.cs file. In the constructor, we are going to get the values of the enum using the Enum.GetValues() Method.

Adding Character Form

In the AddCharacterForm.razor component, add a RadzenDropdown component specifying the ArmorTypes to the Data property. This will display the list in our dropdown. The TValue will tell the dropdown what type of value will be in the dropdown. This could be a string or even an object allowing you to use a dropdown of objects and display a list of names in those objects. The @bind-Value will bind the value of the dropdown to the CharacterModel.ArmorType in the code behind the file.

That’s it! You have added a list of enums to the dropdown and bound it to your CharacterModel.

Next, I will showcase how to add an HttpService that uses the built-in .NET HttpClient class to make calls to the D&D 5e API! This will be a short introduction to setting up an HttpService, making a get call to the API, and viewing the results as a string.

Create an HttpService

The first thing we are going to do is add a class in the Services folder called HttpService. Using dependency injection, inject the HttpClient into this class and set it as a private readonly property called _httpClient.

Next, add a readonly string to the class that has the base URL for the D&D API. The base URL is https://www.dnd5eapi.co/api/.

Creating an HttpService

Calling the API when Navigating to the Characters Page

In the HttpService add a method for calling the “races” endpoint with “elf” as the index you want to pass. This information can be found in the API documentation.

In the documentation, there are other races we have access to and we will use that information later on in this post. The method right now should look something like this.

The GetStringAsync method allows us to get a response from the server and view it as a string. Later we will use the GetJsonAsync method to serialize the response into an object that we create.

We will add both the HttpClient and the HttpService to the DI container. If you don’t know how to do this please visit Part 2 of this series. Inject the HttpService into the BaseComponent so that we have access to the service in all our components.

In the OnInitializedAsync method await the GetRaceByType method in your HttpService. Use a breakpoint and step through the code in order to view the result of the API call. It should look like this in JsonView.

In the OnInitializedAsync method await the GetRaceByType method in your HttpService

Use a breakpoint and step through the code in order to view the result of the HttpService API call. It should look like this in JsonView

As you can see, we have data! In the last part of this blog, we will add a Race class to our Character Builder application and allow a user to see information about the different races when creating a new character!

Adding a RaceModel Object

First, we’re going to add the RaceModel with additional Race information that can be found in the documentation of the D&D 5e API. If you look at the documentation you will see that I have not included all the information that they provide.

When looking at the API documentation we can see that they are using “_” characters that we don’t want to have to use in our object. In this case, we can use the JsonPropertyName data annotation to tell the JsonSerializer that each property can be mapped using a different name than the actual property name.

Adding a RaceModel Object

Adding a RaceType Enum

Since we will want to display our races differently than they need to be used in our API call, let’s add a description data annotation to each race in the enum that will be used.

Adding a RaceType enum

Add Enum Extensions to use the Description Attribute

In order to easily get the value of the Description data annotation, let’s add a static method that we can access from any Enum.

We will create a static class called EnumExtensions that will contain any methods we want to add to our enums. I have found that this is a really easy way to contain helper methods.

Adding Enum Extensions to use the Description Attribute

Add RaceType Dropdown

Go ahead and add both the <code>RaceType</code> and <code>RaceModel</code> to the <code>CharacterModel</code>.

Next, we are going to update the <code>HttpService</code> to use the <code>RaceType</code> to get the Race from the API.

Update the HttpService Code to use the RaceType to get the race from the API

Now we are going to add a method in the <code>AddCharacterForm.racor.cs</code> class that will make use of the <code>RaceType</code> when getting information to the API.

Add a dropdown to the AddCharacterForm component that to display and select a race. This is going to look different than the last dropdown that we created.

Using the InputSelect Component we still need to select a TValue, which is the value of the item we select in the dropdown. Instead of using the @bind-Value to use 2-way data binding, we will split that up into ValueChanged and ValueExpression. The Value expression is a lambda expression that identifies the bound value. The ValueChanged is an event callback that passes in the selected value as a parameter to a delegate. We will run our OnRaceChanged method passing in the selected value in the ValueChanged event callback.

Run the application putting a breakpoint on the HttpService

Finally, run the application putting a breakpoint on the HttpsService. Create a new character and select a different race from the dropdown. You should see the selected race’s information returned from the API!

Synopsis

In the final part of the Blazor Server in .NET 6 blog series, we covered how to use data binding and dropdowns with lists and enums. This included a short introduction to setting up an HttpService, making a get call to the API, and viewing the results as a string. For further clarity, I also included a demonstration on how to add an HttpService that uses the built-in .NET HttpClient class to make calls to the D&D 5e API!

Finally, I presented a way to add a dropdown with the available race options that our character can choose from. That concludes my five-part educational series on Blazor Server in .NET 6. I hope you enjoyed it and learned a little something you can take with you. Thanks for tuning in!