Skip to content
A JavaScript free modal library for Blazor and Razor Components applications
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
samples/BlazorSample Upgraded packages to Blazor 0.9.0 Mar 9, 2019
src/Blazored.Modal Fixed repo link in csproj Mar 12, 2019
.gitignore
Blazored.Modal.sln
LICENSE
README.md Update README.md Mar 9, 2019
azure-pipelines.yml Update azure-pipelines.yml for Azure Pipelines Mar 12, 2019

README.md

Blazored Modal

This is a JavaScript free modal implementation for Blazor and Razor Components applications.

Build Status

Nuget

Important Notice For ASP.NET Core Razor Components Apps

There is currently an issue with ASP.NET Core Razor Components apps (not Blazor). They are unable to import static assets from component libraries such as this one.

You can still use this package, however, you will need to manually add the CSS to your apps wwwroot folder. You will then need to add a reference to it in the head tag of your apps index.html page.

Alternatively, there is a great package by Mister Magoo which offers a solution to this problem without having to manually copy files.

Getting Setup

You can install the package via the nuget package manager just search for Blazored.Modal. You can also install via powershell using the following command.

Install-Package Blazored.Modal

Or via the dotnet CLI.

dotnet add package Blazored.Modal

1. Register Services

First, you will need to add the following line to your applications Startup.ConfigureServices method.

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

2. Add Imports

Second, add the following to your _ViewImports.cshtml

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

@addTagHelper *, Blazored.Modal

3. Add Modal Component

Third and finally, you will need to add the <BlazoredModal /> component in your applications MainLayout.cshtml.

Usage

Displaying the modal

In order to show the modal, you have to inject the IModalService into the component or service you want to invoke the modal. You can then call the Show method passing in the title for the modal and the type of the component you want the modal to display.

For example, say I have a component called Movies which I want to display in the modal and I want to call it from the Index component on a button click.

@page "/"
@inject IModalService Modal

<h1>Hello, world!</h1>

Welcome to Blazored Modal.

<button onclick="@(() => Modal.Show("My Movies", typeof(Movies)))" class="btn btn-primary">View Movies</button>

Passing Parameters

If you need to pass values to the component you are displaying in the modal, then you can use the ModalParameters object. Any component which is displayed in the modal has access to this object as a [CascadingParameter].

Index Component

@page "/"
@inject IModalService Modal

<h1>My Movies</h1>

<ul>
    @foreach (var movie in Movies)
    {
        <li>@movie.Name (@movie.Year) - <button onclick="@(() => ShowEditMovie(movie.Id))" class="btn btn-primary">Edit Movie</button></li>
    }
</ul>

@functions {

    List<Movies> Movies { get; set; }

    void ShowEditMovie(int movieId)
    {
        var parameters = new ModalParameters();
        parameters.Add("MovieId", movieId);

        Modal.Show("Edit Movie", typeof(EditMovie), parameters);
    }

}

EditMovie Component

@inject IMovieService MovieService

<div class="simple-form">

    <div class="form-group">
        <label for="movie-name">Movie Name</label>
        <input bind="@Movie.Name" type="text" class="form-control" id="movie-name" />
    </div>

    <div class="form-group">
        <label for="year">Year</label>
        <input bind="@Movie.Year" type="text" class="form-control" id="year" />
    </div>

    <button onclick="@SaveMovie" class="btn btn-primary">Submit</button>
</div>

@functions {

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

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

    void LoadMovie(int movieId)
    {
        MovieService.Load(movieId);
    }

    void SaveMovie()
    {
        MovieService.Save(Movie);
    }

}

Modal Closed Event

If you need to know when the modal has closed, for example to trigger an update of data. The modal service exposes a OnClose event which you can attach to.

@page "/"
@inject IModalService Modal

<h1>My Movies</h1>

<button onclick="@ShowModal" class="btn btn-primary">View Movies</button>

@functions {

    void ShowModal()
    {
        Modal.OnClose += ModalClosed;
        Modal.Show("My Movies", typeof(Movies));
    }

    void ModalClosed()
    {
        Console.WriteLine("Modal has closed");
        Modal.OnClose -= ModalClosed;
    }

}
You can’t perform that action at this time.