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.
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.
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
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
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/.
Calling the API when Navigating to the Characters Page
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.
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.
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
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 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.
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.
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.
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.
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
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.
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!
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!
Series Quick Links
- Blazor Server in .NET 6 – Part One
- Blazor Server in .NET 6 – Part Two
- Blazor Server in .NET 6 – Part Three
- Blazor Server in .NET 6 – Part Four