blazored / modal Goto Github PK

View Code? Open in Web Editor NEW

764.0 28.0 185.0 15.86 MB

A powerful and customizable modal implementation for Blazor applications.

Home Page: https://blazored.github.io/Modal/

License: MIT License

HTML 19.31% C# 74.07% CSS 4.60% JavaScript 2.02%

blazor blazored modal modal-dialog csharp modals razor nuget hacktoberfest

modal's People

Contributors

Stargazers

Watchers

Forkers

nukedbit stamo-gochev qcjxberin cherridge tomredox catlan sepppenner cojegede laslavtchev daniel-rck kabirutd yoss-dev peterblazejewicz jonathansapp nomadsource troepolik sondt sprotty ardeshirv zhaofangzhijia neville-nazerane soojpark91 newmancodes dcblakesley aduboisesoft grofab95 steveteece robbert-jansen c0g1t8 brux88 tomlii flasher64 kevinmiles codingjames tusanesen excelkobayashi waheedasghar32 aluthecrow umbrellait-anatoliy-usachev engelnady mykelbengineer liero tossnet ultraspacex danieljfrench fredrik0277 craveski vlcmstne tapstach dfkeenan lastexile-ch nathankolpa rdelangelhmx dystudio tharaven403 gislisig iancarr1412 lukepat rezasfl agwillow shameer-ali ondrejdobecka sddkorg aixasz kvillines jeffj4cnb stephanalexis jeromepeterdevera rickiswright archiegao joeymckenzie chandradev819 deelye lillianya codywanless ruskov2050 junior-ts ebsilva mma1979 devbox10 kababiyikemir itran mamoonseth georgeemr kgajadhar cloudtidings md41 3rdrock-dev g1reddy40git lanicon abmendoza029 gravllift samiroliveira hhyyrylainen nedoalaimo henrymgalvan ivodulac valu8 anantjaiswal339 adel-alekhtiar

modal's Issues

Online demo of Blazored.Modal using assets from build process

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.

I'm unable to make this work in a Razor Components project

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.

ModalResult contain Modal Type

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.

Close dialog on Esc?

Is it possible to somehow wire up the Esc key to close the dialog?

Feature: disable closing modal by clicking on the backdrop

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.

Modal not appearing

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?

css not loaded

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.

IE11 Support?

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.

Should/could the modal Close cause a complete page re-render? (Feature Request)

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)?

Fire event back to calling page component.

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>

Responsible modal support for mobile

in blazor-modal class in html, width is always 50rem, which cuts contents on mobile (or forced to scroll).

Add way to configure default ModalOptions

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.

Scrollable Content

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.

https://imgur.com/vf6DFB0

There is any preferred way to achieve scrollable/responsive modal content ?
Thank you Chris for this component!

Occasional error when closing modal

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.

it seems close event is not working!

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

Update the readme

We now have a load of new features after merging #44. But the readme needs updating to reflect them.

Causing Build Failure since VS 2019 Preview Ver 16.3.0 Preview 1.0

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.

Hiding the close icon

Could it be possible to add a flag to show/hide the close icon in the modal?

After updating to 2.20 modals are "In the background"

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();
    }
}

Below is how modals look after updating:

How to pass values to parent component?

RenderFragment for the Title

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 !

Modal close event not working - core 3/3.1

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.

Issues after upgrading to VS V 16.3 Preview 2.0 and BlazoredModal 2.06

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?

Use with the Code-Behind pattern

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.

Scrollable Modal [Question]

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.

Please let me know if I am doing something wrong

Styling changes when moving from Development to Production environment

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.

Is there a way to have nested modals ?

Is there a way to have nested modals such that on closing the top most modal the second modal will show back up ?

Preview 8 - Client Side - CSS not loading

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.

Wrap BlazoredModal.razor template in "if" statement

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.

Add a change log

Requires using Blazored.Modal in Startup.cs

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.

Using as confirm delete

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;
}

Yes No Dialog Example

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

Modal Css not being included

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

Controlling Width and Height of Modal

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?

Possible Return Value

Would it be possible to use the modal as a Prompt / Input-Dialog where the user can enter values that are returned?

Modal.Show() parameter for setting alternate styling

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:

A "message box" dialog - small, with distinct and actionable buttons like Yes, No, OK, Cancel or such.
An input window, capable of hosting one or more input boxes - again, small dialog
A list including various options that can be selected - small or medium window
A search form capable of showing a large amount of information - like a customer search/lookup form - large window

OnClose not firing

Hi!
Im try your sample ServerSideblazor. Method ModalClosed not fire when i close modal but it fire when i calling method Show second time. Im using VS 2019 preview 6.

Does the example close the form after the Save?

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?

HTTP GET /_content/Blazored.Modal/blazored-modal.css responded 404 in Production Mode (ASPNETCORE_ENVIRONMENT = "Production")

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?

Cleaner Method Call

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.

Feature Request: Add FluentApi

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.

z-index too low

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.

Allow pass onClose to Show method

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

Disable modal header

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

Ability to pass data back from the modal

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.

Modal visible during onClose

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?

Async call on Close

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.

Cancelling a Modal w/ Parameters still returns the changes on the passed parameter

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?

Auto focus form control?

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?