Blazor-эквивалент WPF ShowDialog ()?

Я пытаюсь перенести код из WPF в Blazor. Код WPF полагался на ShowDialog () для отображения модального диалогового окна и приостановки выполнения до закрытия модального окна. Существует ли эквивалент Blazor (на стороне сервера), который позволяет управлять потоком управления C #, например, на том, щелкнул ли пользователь «Подтверждение» или «Отмена» в модальном диалоговом окне?


c# blazor blazor-server-side
person D. Hile    schedule 31.07.2019    source источник
comment
Я написал его, но теперь оно устарело :( Посмотрите, если он выглядит полезным, я могу обновить его до текущей версии Blazor github.com/ctrl-alt-d/BlazorConfirm   -  person dani herrera    schedule 01.08.2019
comment
Спасибо, @daniherrera. Однако я специально стараюсь избегать реструктуризации кода после модального окна как продолжения «при успехе» и «при неудаче». Причина, по которой у меня есть это ограничение, - это тысячи способов, которыми моя существующая база кода полагается на конкретное поведение метода ShowDialog () WPF. Хорошо это или плохо, но у нас есть много экземпляров, которые концептуально похожи на: if (FileDialog.GetFilePath (путь строки)) WriteOutput (путь); или если (CouponDialog.BuyerHasCoupon (из купона купона)) {order.AddCoupon (); } order.PlaceOrder ();   -  person D. Hile    schedule 01.08.2019

Ответы (2)


arrow_upward
13
arrow_downward

Вы можете добавить кнопку

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

Это вызывает метод, который устанавливает значение как истинное.

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

И это значение обернуто вокруг кода, который использует модальный элемент управления начальной загрузки (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>
        }

У вас будет всплывающее окно, которое является "модальным"

person Michael Washington    schedule 31.07.2019
comment
Думаю, это выполнит его цель. Но когда он использует WPF, он, скорее всего, использует MVVM, и поэтому обычно у вас есть некоторый код в моделях представления, который говорит ShowMessage и который продолжается после этого диалога. Так что это небольшая разница в потоке кода. Может быть, это также разница, когда мы думаем о разделении взглядов и логическом разделении. - person Christoph Meißner; 01.08.2019

arrow_upward
0
arrow_downward

Прямо сейчас нет готового эквивалента, как в WPF. Но есть несколько хороших задокументированных примеров по этому поводу:

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

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

Единственный вопрос для меня - как оживить такой диалог, например с анимацией прилета / затухания и прочими вещами ...

person baer999    schedule 25.08.2019