CODEWITHSUNDEEP
c#blazorblazor-server-side
D. Hile
D. Hile

Reputation: 81

Blazor equivalent of WPF ShowDialog()?

I'm attempting to migrate some code from WPF to Blazor. The WPF code relied on ShowDialog() to display a modal dialog and suspend execution until the modal was closed. Is there a (server-side) Blazor equivalent that allows C# flow of control to be based, for example, on whether the user clicked Acknowledge vs Cancel in a modal dialog?

Upvotes: 8

Views: 12509

Answers (3)

Ivaylo Milanov
Ivaylo Milanov

Reputation: 180

The best way to port a WPF or WinForms application to Blazor is to use Nevron Open Vision for Blazor:

https://www.nevron.com/products-open-vision.aspx

It allows you to develop User Interfaces that run on Blazor and WPF/WinForms from a single code base! No HTML or JS knowledge is required either - you simply code your UI in C#.

Upvotes: -1

baer999
baer999

Reputation: 982

Right now, there is no out-of-the-box equivalent like in WPF. But some good documentented samples regarding this:

https://www.telerik.com/blogs/creating-a-reusable-javascript-free-blazor-modal

https://www.syncfusion.com/blazor-components/blazor-modal-dialog

The only question for me is how to animate this kind of Dialog, e.g. with fly in / fade in animation and such things...

Upvotes: 0

Michael Washington
Michael Washington

Reputation: 3075

You can add a button

<button class="btn btn-primary"
  @onclick="AddNewForecast">
  Add New Forecast
</button>

That calls a method that sets a value to be true

bool ShowPopup = false;
void AddNewForecast()
{
    // Open the Popup
    ShowPopup = true;
}

And that value is wrapped around code that uses the bootstrap modal control (class="modal"):

        @if (ShowPopup)
        {
            <!-- This is the popup to create or edit a forecast -->
            <div class="modal" tabindex="-1" style="display:block" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h3 class="modal-title">Edit Forecast</h3>
                            <!-- Button to close the popup -->
                            <button type="button" class="close"
                                    @onclick="ClosePopup">
                                <span aria-hidden="true">X</span>
                            </button>
                        </div>
                        <!-- Edit form for the current forecast -->
                        <div class="modal-body">
                            <input class="form-control" type="text"
                                   placeholder="Celsius forecast"
                                   @bind="objWeatherForecast.TemperatureC" />
                            <input class="form-control" type="text"
                                   placeholder="Fahrenheit forecast"
                                   @bind="objWeatherForecast.TemperatureF" />
                            <input class="form-control" type="text"
                                   placeholder="Summary"
                                   @bind="objWeatherForecast.Summary" />
                            <br />
                            <!-- Button to save the forecast -->
                            <button class="btn btn-primary"
                                    @onclick="SaveForecast">
                                Save
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        }

You will have a popup that is "modal"

Upvotes: 15

Related Questions