Welcome to Part 3 of the Blazor Server in .NET 6 blog series! Hopefully you’ve already gotten the chance to dive into Part 1 and 2. In this blog, we will run through an installation of Radzen Blazor, a free component library for Blazor developed by Radzen Ltd. There are a few other component libraries out there, including MudBlazor, SyncFusion, Telerik, and MatBlazor, among others.
First, you will want to install the
Radzen.Blazor NuGet package.
Updating the CharacterInfo Component in the Radzen Panel
In order to update the
CharacterInfo component, you’ll want to remove the code inside the
CharacterInfo.razor file and add the code shown below. The
RadzenPanel component has three templates including
SummaryTemplate. Additional documentation for all components can be found on the Radzen Blazor website.
One of the nice things about blazor components is that the tags can be seen with IntelliSense. If you add a space after
AllowCollapse, you will see all the properties that the
RadzenPanel uses. This works for any other component as well.
When you run the application again and navigate to our characters page you should see the Panel and Card components with our character information inside. I would encourage you to play around with some of the component’s features, as they have properties to collapse the Panel in addition to some other nice features.
Adding the Radzen Dialog
We all know how nice it can be to have a clean pop-up experience. Many sites I have seen use clunky pop-up modals that don’t look right or are all different, as they look to be individually built for each use.
RadzenDialog gives us a way to standardize our dialog with an easy-to-use component. This is not a fix-all for dialog boxes, but it is a good step in the right direction, especially if you are coming from using
.NET MVC PartialViews. Take the following steps to add the
- First, we are going to create our own dialog service as a middleman between the components and the
RadzenDailog. Create a class called
CbDialogService. This will hold an instance of the
DialogServiceas a private property that will be injected using DI.
- Add the
CbDialogServiceto the DI container. You can do so with or without an interface at the moment, however, you may eventually want an interface for the
- Add the
RadzenDialogcomponent to the
MainLayout.razorfile. The styling for the Dialog is configured to work as I have put it in the picture below.
CbDialogService, we are going to add a method that allows us to pass a component to the dialog service, while also setting some dialog options to use. This is a way to keep consistent form styling throughout our single-column forms. Our method passes in a Generic T of
Type ComponentBase, which makes sure that the class we pass in is a component. This is required by the
DialogService to function properly. Then, we await the
DialogService to open our component in a Modal!
If your component contains parameters that you need to pass in, that can be done in the form of a
Dictionary<string, object>. This also works for passing actions or methods down to other components in your modal. I will demonstrate in a later blog how to pass a delegate down to a component in the
DialogService. Although this shouldn’t be needed often, as you will want to encapsulate your functionality inside the component, as opposed to passing the function in when we use event-based components!
Now, let’s inject the
CbDialogService into our
BaseComponent so every component in our app has access to the
Next, let’s add the
AddCharacterForm component. We will do this the same way that we have done our other components with a
.razor file and a base class in the code behind file.
We will need a
CharacterModel that will store the values for our new character and a submit method that will eventually save our character. After that, close the dialog service.
.razor file for the
AddCharacterForm, we can use the
RadzenTemplateForm component to create a basic form layout. In the figure below, I have used the
RadzenTextBox components for consistency and styling.
In order to use the Blazor two-way data binding, we need to add the
@bind-Value attribute to the
RadzenTextBox components. This will bind the value to our character model in the code behind file.
Back on the Characters page, we need to add a method to show the
AddCharacterForm in a dialog box. We can use the
CbDialogService.OpenSingleColumForm method that we just created to open our form in a pop-up dialog box. We can do this by passing the Form component as the Type argument.
We can also add some styling to the Characters page using bootstrap by adding a new Button component. The
ButtonStyle.Success will add the green styling and the Click property will pass the
ShowAddNewCharacterForm method, so that when our button is clicked we will see our new form!
When you run the application you should see the button you just added on the characters page, and clicking it should pop up the AddCharacterForm component.
The save button should only close the dialog box as we haven’t added any saving logic to the application yet.
In part 3 of the Keyhole Blazor Server in .NET 6 series, we installed a free component library called Radzen.Blazer, updated the CharacterInfo component to easily display a Create Character modal, and added the RadzenDialog as a way to standardize our dialog with an easy-to-use component. In the next blog, we will be adding events in our blazor components. See you in Part 4!