Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 503
D. Hile Avatar asked Jul 31 '19 21:07

D. Hile


2 Answers

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"

like image 72
Michael Washington Avatar answered Sep 29 '22 09:09

Michael Washington


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#.

like image 21
Ivaylo Milanov Avatar answered Oct 01 '22 09:10

Ivaylo Milanov