Quick Update

Wow, didn’t just January fly by! I just wanted to give you all a quick update since my last post, Announcing Blazored and Blazored Toast.

We’ve had the first official preview release of server-side Blazor. This is really cool and I’ve been having a play around with that and will probably write a post about it very soon.

I’ve also been busy working like mad on developing Blazored. I’ve moved over my old LocalStorage and Localisation packages to the new Blazored org. Both of these packages are now available via NuGet as Blazored.LocalStorage and Blazored.Localisation. I’ll delist the old packages soon, to avoid any confusion. I’ve also written an article for Telerik, Creating a Reusable, JavaScript-free Modal Blazor Modal. Plus, I’m currently working on a pretty big change for the blog, but you’ll get to find out more about that soon! :)

Blazored Modal is here

Please note: There have been several breaking changes since this post was written. Please check out https://modal.blazored.com/ or https://github.com/Blazored/Modal for the most up to date instructions for using the modal.

Introducing Blazored Modal. This package is inspired from the article I wrote above but I’ve extended the functionality and made a few tweaks and improvements. It’s the fourth package available from Blazored and there are a lot more on the way. Anyway, I’m sure you’re all itching to try it out so let me take you through getting setup and using Blazored Modal.

Getting Started

The first thing you will need to do is install the package from NuGet. You can do this in a number of ways.

In Visual Studio you can right click on Dependencies and click Manage NuGet Packages. Then just search for Blazored.Modal and install from there.

If you prefer you can also use the command line either via the Package Manager using the following command:

Install-Package Blazored.Modal

Or via the dotnet CLI using this command:

dotnet add package Blazored.Modal

Once you have the package installed, you need to do a few things to get it setup.

Register services

First, you need to add the Blazored Modal services. To do this just use the AddBlazoredModal extension method in your Startup.cs ConfigureServices method.

public void ConfigureServices(IServiceCollection services)
{
    services.AddBlazoredModal();
}

Add imports

Second, you must add a few lines to you root _ViewImports.cshtml.

@using Blazored.Modal
@using Blazored.Modal.Services

@addTagHelper *, Blazored.Modal

Add BlazoredModal component

The third and final step is to add the <BlazoredModal /> component to your apps MainLayout.cshtml.

@inherits BlazorLayoutComponent

<BlazoredModal />

<!-- Other code omitted for brevity -->

If you are using the package in a Blazor Server app then you will need to add a link to the CSS in your _Hosts.cshtml file.

<link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet"/>

That’s it! Everything is now setup and you can start to use the modal. Let’s look at that next.

Usage

The modal is triggered via the IModalService, you don’t interact directly with the modal component. The interface exposes 2 things, the ShowModal method and the OnClose event.

There are two overloads of the ShowModal method, one takes a title, and the type of the component to display. The other takes the same 2 arguments plus a ModalParameters instance. The second overload is used when you need to pass values to the modal.

You can attach a handler to the OnClose event if required. This will be triggered once the modal closes in case you wish to perform any actions, such as a data reload.

Showing a modal with no parameters

If you wish to show a component which requires no parameters, you can call the first overload of the ShowModal method.

For example, if I had a component which displayed a list of movies called MovieList. And I wanted to show it from a page component called Movies. I would need to inject the IModalService into the Movies component. I could then add a button which invokes the modal.

@page "/movies"
@inject IModalService Modal

<button @onclick="@(() => Modal.Show("Movie List", typeof(MovieList)))"

Showing a modal and passing parameters

While the above is great for simple scenarios, there is usually a need to pass some information to whatever component the modal is rendering.

Keeping with the movie theme, if I wanted to edit the details of a movie I might want to pass up the current instance of the movie or at least the ID of it. That would look something like this.

@page "/movies"
@inject IModalService Modal

<button @onclick="@(() => EditMovie(11))">Edit Movie</button>

@code {

    void EditMovie(int Id) 
    {
        var parameters = new ModalParameters();
        parameters.Add("MovieId", Id);
        Modal.Show("Edit Movie", typeof(EditMovie), parameters);
    }

}


// EditMovie Component

@code {

    [CascadingParameter] ModalParameters Parameters { get; set; }
    
    int MovieId { get; set; }

    protected override void OnInitialized()
    {
        MovieId = Parameters.Get<int>("MovieId");
        LoadMovie(MovieId);
    }
    
}

Reacting to modal closed

The last feature is the ability to react to the modal having closed. This is achieved by attaching a handler to the OnClose event of the ModalService. This is currently a little limited as no data can be passed back, but in a future update you will be able to pass data back via this event.

Following on from the previous example, if I wanted to refresh my main Movies component when the modal closes, then I could do this.

@page "/movies"
@inject IModalService Modal

<button @onclick="@(() => EditMovie(11))">Edit Movie</button>

@code {

    void EditMovie(int Id) 
    {
        var parameters = new ModalParameters();
        parameters.Add("MovieId", Id);
        Modal.Show("Edit Movie", typeof(EditMovie), parameters);
        Modal.OnClose += RefreshMovies
    }

    void RefreshMovies()
    {
        // Reload movie data
        // Unregister from event
        Modal.OnClose -= RefreshMovies
    }

}

Wrapping up

I hope you like Blazored Modal, this is obviously a very early version and I plan on adding a more features over time, as with all the Blazored libraries.

If you have any questions or any ideas for things you would like to see then please get in touch on GitHub, Twitter or in the comments.