A powerful and customizable modal implementation for Blazor applications.
For information on getting Blazored Modal setup in your application, as well as the many customisation options, please checkout our docs.
A powerful and customizable modal implementation for Blazor applications.
Home Page: https://blazored.github.io/Modal/
License: MIT License
I have a page where I want to show multiple different modals and do something different with the return value depending on which type is used when calling Show.
I don't think this is possible right now. Am I correct in this assumptions.
If so, do you agree this is something nice to add? If you do I could see if I can make a PR for it.
As far as I can tell, at the moment when the modal is closed (not cancelled) it doesn't trigger the StateHasChanged at the top level?
There are probably a lot of cases where the logic performed on the modal will update the rest of the page, so I think it could be useful if there was an option to tell the modal to trigger a re-render?
I've got round this by wiring up a ModalClosed method, but it would be nice not to have to do this on every component that uses the modal.
Would it be possible to add a Parameter that tells the Modal whether it should re-render its the Modal
's parent and all its children (by parent I mean the component the modal is set up on and all of it's children, i.e. typically MainLayout.razor)?
I found this nugget in the Blazor WebAssembly:
Standalone deployment assets are published to the
bin/Release/{TARGET FRAMEWORK}/publish/{ASSEMBLY NAME}/dist
folder.
I've seen some Blazor libraries host a demo of their library on GitHub Pages. Could the Azure Pipelines be set to copy the assets from the WebAssembly build over to a gh-pages
branch? Would make it easier for people to see some of the features without having to clone the library.
Also need to add a .no-jekyll
file to the folder for GitHub Pages to host the demo page.
Hi!
Im try your sample ServerSideblazor. Method ModalClosed not fire when i close modal but it fire when i calling method Show second time. I
m using VS 2019 preview 6.
I have a Task DeleteCustomer if I call it directly on button click, the record was successfully deleted and list my html is updated. But when I call it on ModalClosed, refreshing list doesn't seem to work. The record is successfully deleted but not reflect on my Ui.
async Task DeleteCustomer(long Id)
{
await http.DeleteAsync($"api/customer/{Id}");
await LoadCustomer();
}
private async void ModalClosed(ModalResult modalResult)
{
if (!modalResult.Cancelled)
{
await DeleteCustomer(this.customerId);
}
Modal.OnClose -= ModalClosed;
}
I need to be able to disable the closing of the modal by clicking on the modal backdrop. can I send a PR?
grat component, thanks for your work @chrissainty, this blazor thing is awesome and the stuff you have here too.
Is there a way to have nested modals such that on closing the top most modal the second modal will show back up ?
It will be nice if the plugin will have fluent apis
eg.
ModalService
.AddTitle("Modal Title")
.AddBody("Modal Body") //string or typeOf ComponentBase
.AddFooter("Modal Footer")
.ShowCloseIcon(true)
.CloseIconTemplate("<i class='fa fa-close'/>")
.OnClose("EventCallback Here")
.Show()
we can add many options like
Header Class
Header Template
Footer Class
Footer Template etc.
Is there an OnClose Version where I can use async? As far as I can see currently there has to be a void return type.
I try to reload my list when the dialog was closed but not canceled, but that does not seem to work that way.
I am using the Modal approach with one of my pages and it works a treat. However, I'm trying to migrate to the "code behind" pattern, and the following method is now throwing an exception:
protected void ShowModalEdit(object someObject)
{
...........
parameters.Add("ID", idFromSomeObject);
Modal.OnClose += this.EditConfirmationModalClosed;
Modal.Show<MyPage>("Edit", parameters);
}
The type 'MyPage' cannot be used as type parameter 'T' in the generic type or method 'IModalService.Show(string, ModalParameters, ModalOptions)'. There is no implicit reference conversion from 'MyPage' to 'Microsoft.AspNetCore.Components.ComponentBase'.
In my razor page, I do have:
@inherits OwningComponentBase<MyService>
More details are available on a related StackOverflow post.
I have the code set up like the examples given:
_Imports.razor:
@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
@using Blazored
@using Blazored.Modal
@using Blazored.Modal.Services
MainLayout.razor:
@inherits LayoutComponentBase
<div class="header">
<div>
<LoginDisplay />
</div>
</div>
<hr class="accent" />
<div class="px-4 container mt-2">
@Body
</div>
<BlazoredModal />
_Host.cshtml:
@page "/"
@namespace TicketingSolutions.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="~/" />
<link href="~/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/css/site.css" rel="stylesheet" />
<link href="~/css/blazored-modal.css" rel="stylesheet" />
@*<link href="~/css/all.min.css" rel="stylesheet" />*@
</head>
<body>
<div id="app">
@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</div>
<script src="~/js/bootstrap.min.js"></script>
<script src="_framework/blazor.server.js"></script>
<script src="https://kit.fontawesome.com/a0cf32fa76.js" crossorigin="anonymous"></script>
@*<script defer src="~/js/all.min.js"></script>*@
</body>
</html>
Origin Component: (truncated for brevity)
@inject IModalService Modal
<td class="align-text-top calendar-click" @onclick="@(() => SubmitDate(date))">@Date</td>
private void SubmitDate(DateTime date)
{
var parameters = new ModalParameters();
parameters.Add("Date", date);
var options = new ModalOptions()
{
Position = "blazored-modal-center"
};
Modal.Show<Submit>("Submit Date", parameters);
}
Submit.razor (modal component)
@using TicketingSolutions.Models
@inject IModalService ModalService
<form>
(stuff)
</form>
@code {
[CascadingParameter] ModalParameters Parameters { get; set; }
private RepActivitySubmission repActivitySubmission { get; set; }
protected override void OnInitialized()
{
base.OnInitialized();
repActivitySubmission = new RepActivitySubmission();
}
private void Cancel()
{
ModalService.Cancel();
}
}
When I press the table cell in the originating component, nothing happens. When I add a breakpoint to the OnInitialized method, it runs, but nothing ever appears.
Thoughts?
How to pass values to parent component?
I am running dotnet 3.0.100-preview7-012821.
This is a serverside app.
The css is not being loaded, even when adding the <link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
line to _Host.cshtml.
Installing the nuget package does not add the blazored-modal.css file anywhere into the solution that I can see.
I have added the css file into my solution manually, which works.
I have successfully incorporated BlazoredModal into my project but every modal I show seems to be constrained in width and height. As a result, the content doesn't use all the screen real estate. I have looked at where the constraint might be but cannot find it. Any ideas?
Hi, I'm using MatBlazor as well as Blazored.Modal and I'm finding the Model does not sit over the top of the AppBar.
Investigating it seems that the AppBar has a z-index of 4 and the Modal has a z-index of 2.
I'll override the css for my app, but it might be worth the Modal having a higher z-index.
Hi Chris,
First, I must admit that I am new to blazor and asp.net.
I followed the installation guide, but in the end, I saw that the CSS is not included or at least not in 2.0.5.
When I added manually the css from the source here in site.css, it works fine.
Thanks for the great work!
Emiliyan
in blazor-modal class in html, width is always 50rem, which cuts contents on mobile (or forced to scroll).
Hi Chris,
Thanks for the ultra-fast update to 2.0.6. I have problems with the CSS again, but potentially, it is legitimate this time.
I put the link in the index.html, but the page reacts as there is no file behind.
I used a workaround to put the content of my Modal/src/Blazored.Modal/wwwroot/blazored-modal.css into my site.css. Works fine to me.
Hello,
Currently, the Title is a string that cannot be updated once the modal is open.
It would be great to change from a string to a RenderFragment.
That would allow us to update the title based on data loaded asynchronously from a restapi for example.
Thank you very much !
Hi All,
A quick setup step point: your step #1. Register Services - missed adding the instruction - Add 'using Blazored.Modal;' to the startup.cs file.
Is there a way to automatically set focus to a specific field upon show so the user can just start typing without first having to select a field?
System.NullReferenceException: Object reference not set to an instance of an object. at Microsoft.AspNetCore.Components.CascadingValue1.Microsoft.AspNetCore.Components.ICascadingValueComponent.Unsubscribe(ComponentState subscriber) at Microsoft.AspNetCore.Components.Rendering.ComponentState.RemoveCascadingParameterSubscriptions() at Microsoft.AspNetCore.Components.Rendering.ComponentState.DisposeInBatch(RenderBatchBuilder batchBuilder) at Microsoft.AspNetCore.Components.Rendering.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry) at Microsoft.AspNetCore.Components.Rendering.Renderer.ProcessRenderQueue()
I'm working on an app that utilizes your Modal, and frequently when closing the modal I get the above error message.
This occurs if I am listening for an onclose event or not, and also happens when I pass parameters or don't. Basically it can happen at any time. I was able to track it down to the 'StateHasChanged' event that gets fired in the CloseModal method.
Any action taken/modification on a passed parameter returns to the parent component even while using Modal.Cancel().
For example, if I have a List object that I pass to a modal as a cascading parameter, modify the list in the dialog, and hit cancel/call the Modal.Cancel() function, the action taken on the parameter still is applied and passed to the parent component.
Is this intended?
In case of prerendering CloseIcon become visible momentarily.
It will be nice if we wrap Modal Template in "if statement" only visible after show method calling.
Blazor Web Aassembly application. Blazor Version="3.1.0-preview1.19508.20.
After updating from version 2.1.1 to 2.20 or 2.30 every modal now looks like it's "in the background" clicking anywhere, even on the modal itself closes it.
Showing the modal:
void DeleteItem(int id)
{
_deletingId = id;
Modal.OnClose += ModalConsentClosed;
Modal.Show("Czy jestes pewny?", typeof(AreYouSure));
}
Modal is a simple form
@inject IModalService ModalService
<div class="simple-form">
<p>Na pewno chcesz usunąć?</p>
<button @onclick="@Delete" class="btn btn-danger px-3">Tak</button>
<button @onclick="@Cancel" class="btn btn-success px-3">Nie</button>
</div>
@code {
void Delete()
{
ModalService.Close(ModalResult.Ok(true));
}
void Cancel()
{
ModalService.Cancel();
}
}
Nyaamaste.
I'm using Blazored.Modal in a new project I'm working on, and I'm really liking the component so far. It's great that I'm able to tweak the CSS to fit my particular project's overall design.
I'd really like to see a new parameter to the Modal.Show()
method to specify an alternate CSS style to use. This should default to blazored-modal
in the project's CSS file, but can be replaced with a modal-large
or modal-medium-listview
. It's up to the developer to implement the alternate CSS styles in their code.
Examples of dialog styles:
Thank you for your awesome work!
Is it possible to not only disable the close button but also the whole header? I style my modals with bulma so I only need the modal-content. I can pass an empty title and disable the close button but there are still some padding pixel. I think an option to disable the whole header would be the easiest and least "hacky" solution.
regards
Marco
Hi there - many thanks for your efforts with this component so far. It's been really useful while I've been getting my project off the ground.
One thing I've used it for is for a confirm dialog - pops up, user clicks Yes or No, modal closes down and their choice is passed back to the onClose method via ModalResult. Works well, but if the result of the choice is a noticeably slow operation (100 DB writes, say) then the modal remains visible while the onClose method is running. I'd like to throw up a progress bar or something, but need to hide the modal first.
I've tried wrapping the modal in a @showForm bool and setting it to false, and calling StateHasChanged() in various places, but no joy so far.
Am I missing something obvious, or is this not possible?
I'd like to pass onClose to Show method like win forms show dialog
It will free programmers from handle subscribe/unsubscribe.
Also it useful if any error was thown before unsubscribe
Look like that:
Modal.Show<MessageDialog>("Dance", parameters, onClose: ShowResult);
I have prepared branch with this feature , but I can not push it, seems I have not rights.
If you give me right, I will prepare pull request with feature and samples
Also I fixed bug (m.b blazor bug)
If I show first modal then in onClose I show second modal with the same component type (but with another text), blazor do not refresh content inside modal window
Like this:
Modal.Show<MessageDialog>("Dance", parameters, onClose: ShowResult);
then
void ShowResult(ModalResult result)
{
var parameters = new ModalParameters();
parameters.Add("DialogParameters", new MessageDialog.DialogParameters()
{
Message = result.Cancelled ? "User calcel process" : result.Data.ToString(),
Buttons = new MessageDialog.ButtonType[] { MessageDialog.ButtonType.Ok }
});
Modal.Show<MessageDialog>("Result", parameters);
}
to fix that in ModelService I made :
var content = new RenderFragment(x => { x.OpenComponent(1, componentType); x.SetKey(Guid.NewGuid()); x.CloseComponent(); });
I added x.SetKey when build render fragment
Do you have to add some code to make modals scrollable?
I have fields that are longer than screen length and it looks like my modal is just fits some on the screen preventing me from getting to the submit or close button to get the modal off the screen.
There is a way to make the content of modal scrollable ?
I'm developing an input dialog (bootstrap).
In full screen is ok, but on resized/mobile screen the content is fixed and not scrollable like in bootstrap modal. The scrollbar is visible, but it scrolls the parent page, not the modal itself.
There is any preferred way to achieve scrollable/responsive modal content ?
Thank you Chris for this component!
Currently, when you close the modal you can't directly pass any data back to the component that invoked it. It would be nice for developers to be able to pass arbitrary information back to the calling component.
This would be useful in a scenario such as a modal component adding a record. Where the developer may wish to pass back if the operation was a success or not.
Probably an overload of the Close
method which took an object
and passed this back via the OnClose
event.
in this case on button click it will show the modal window but how can we send back event from modal to this page.
let's consider on button click a modal will open where we added a new movie now we need to refresh the page to show the newly added movie.
@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>
Is it possible to somehow wire up the Esc key to close the dialog?
Hi Chris
Sorry, another question:
The example code has these two methods wired up in the EditMovie
component:
void SaveMovie()
{
MovieService.Save(Movie);
}
void Cancel()
{
ModalService.Cancel();
}
The Cancel method is calling back to the ModalService.Cancel()
to close the modal again, but the SaveMovie
method doesn't appear to trigger the modal to close? Is there some magic wiring in the background that makes that happen automatically (I don't think there is, but just checking) or would I need to do something like this to make the form close:
void SaveMovie()
{
MovieService.Save(Movie);
ModalService.Close(ModalResult.Ok<Movie>(Movie));
}
If so, I think it might be worth adding that to the example? I'm can do a PR in with that change if that's useful?
We now have a load of new features after merging #44. But the readme needs updating to reflect them.
I'm using v2.3.0 of the Blazored.Modal and everything works fine if I set the environment variable: ASPNETCORE_ENVIRONMENT = "Development".
But once I set it to "Production", I get a "HTTP GET /_content/Blazored.Modal/blazored-modal.css responded 404".
Here's what I have in my ConfigureServices method in the Startup:
services.AddBlazoredModal();
Here's what I have in my _imports.razor
@using Blazored @using Blazored.Modal @using Blazored.Modal.Services
Here's what I have in the MainLayout.razor file:
<BlazoredModal />
Here's what I have in the _Host.cshtml file:
<link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
Here's my dotnet version: 3.0.100
I using Visual Studio Professional 2019 V16.3.10
Is there something additional that I have to do to make this work in production mode?
This was working pretty well.
Now, it adds a 'close icon' to MainLayout.razor (so always showing) and the 'modals' show off to the side of my windows instead of on top of them when I open them.
I went over the setup instructions to make sure I am implementing the latest.
What else am I missing?
Now its kinda tedious to pass options for each show of the modal.
In general I want the modals to always behave the same way so ideally there should be a way to configure once and forget.
Hi
this is my code
`void ShowModal()
{
ModalService.OnClose += ModalClosed;
ModalService.Show("Add Database", typeof(AddDatabase));
}
void ModalClosed()
{
Console.WriteLine("Modal has closed");
//await GetDatabases();
ModalService.OnClose -= ModalClosed;
}`
I cannot see message in console
Hello
could we have a simple example added which will present simple yes no functionality
I can see how can I pass parameter into modal object but in this case I would like to know how can I receive either YES or NO result NO would be also when user would cancel dialog
Thanks
Calling ModalService.Show() doesn't appear to do anything.
This project seems virtually identical to the article https://www.telerik.com/blogs/creating-a-reusable-javascript-free-blazor-modal which I tried to implement in a Razor Components project. If I put all the files directly in the project it worked but if they were in a Razor Component Library the OnInit method of the BlazoredModal page is never called and no event handlers are hooked up.
Am I doing something obviously wrong?
EDIT: I should mention I'm trying to use ASP.NET Core 3 Preview 3 for this. I think that's implied by the Razor Components but I thought I'd mention it just in case.
Using Blazor (Server) addressing .Net Core 3.1 preview 2 (3.1.100-preview2-014569)
Under the launchSettings.json, I have the following:
"profiles": {
"IIS Express": {
"commandName": "IISExpress",
"launchBrowser": true,
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
},
When I run the application, the modal window has the following classes:
<div class="blazored-modal-container blazored-modal-center blazored-modal-active">
<div class="blazored-modal-overlay"></div>
<div class="blazored-modal-wrapper">
<div class="blazored-modal">
<div class="blazored-modal-header">
However, when I comment out the line (to mimic a PROD environment)
// "ASPNETCORE_ENVIRONMENT": "Development"
I end up with:
<div class="blazored-modal-container ">
<div class="blazored-modal-overlay"></div>
<div class="blazored-modal-wrapper">
<div class="blazored-modal-header">
The differences are causing the modal window to display to the left of the page.
Hi,
I'm having an issue getting the modal close event to fire, i've even downloaded and modified Index.razor pages in the samples and it does not work in either BlazorSample or ServerSideblazor projects..
modified index.razor code below, once the strresult variable is displayed as "modal shown" it is not changed when closing or cancelling the modal.
Help very much appreciated this is a bit of a show stopper for me at the moment as i need to detect when the user has closed the modal.
Kind regards,
Dean.
Would it be possible to use the modal as a Prompt / Input-Dialog where the user can enter values that are returned?
Could it be possible to add a flag to show/hide the close icon in the modal?
I know, I know. IE11 is horrible, but sometimes we have to put up with it. I can totally understand if you don't want to sink any time into this, but if you have any advice on a starting point then I'm up for checking it out.
If I download the project, fire up the samples, server-side blazor, nothing works in IE11. Not a fault of the modal package, just blazor itself. If I then add daddoon's blazor.polyfill to the project then things start to work, but the modal styling is off:
The title bar is missing, and the overlay's starting position is...different.
Is there a technical reason why the Show(string, Type) syntax can't instead accept a generic parameter with a ComponentBase constraint for T? It seems like a nicer experience to do something like Modal.Show<EditMovie>("Title")
.
e.g.
Show<T>(....) where T : ComponentBase { }
I'd be more than happy to do some work on it and submit a pull request if this is an acceptable idea.
This was working great for my Blazor project. However, after installing the VS update my build fails. This is on the Blazor.MonoRuntime.targets line with a huge list of parameters and gives a return of '-532462766' so not real helpful.
To reproduce just create the basic template blazor project from VS, test it, then add this package.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.