У меня есть страница Blazor, которая создает всплывающее окно с использованием модальных функций Bootstrap 5.

В этом модальном окне есть форма, которая взаимодействует с сервером. Если действие выполнено успешно, я получаю ответ 200. В зависимости от того, получаю ли я 200, я хочу показать другое сообщение.

MyPage.razor

<div>

    <!-- ... -->

    <div class="modal fade" id="id" tabindex="-1" aria-labelledby="label" aria-hidden="true">

        <!-- ... -->

        @resultMessage

        <!-- ... -->

    </div>

    <!-- ... -->

</div>

@code {
    private String resultMessage;

    public void doSomething(){
        resultMessage = is200Success ? "<div class=\"alert alert-success\" role=\"alert\">Query Saved</div>" : "<div class=\"alert alert-danger\" role=\"alert\">Query Not Saved</div>";
    }
}

Однако когда появляется сообщение, оно выглядит так:

<div class="alert alert-success" role="alert">Query Saved</div>

Это означает, что я вижу HTML, а не красивое предупреждение о загрузке.

Я попытался использовать @((MarkupString)resultMessage) на странице, но он поместил предупреждение на фактическую страницу, а не в мое модальное окно.

0
Brian 6 Май 2021 в 16:30

2 ответа

Лучший ответ

Итак, после еще нескольких поисков в Google я придумал, что работает для меня:

resultMessage = is200Success ? @<div class="alert alert-success" role="alert">Query Saved</div> : @<div class="alert alert-danger" role="alert">Query Not Saved</div>;
0
Brian 7 Май 2021 в 20:16

Сделайте что-нибудь вроде этого:

<div>
    <!-- ... -->
    <div class="modal fade" id="id" tabindex="-1" aria-labelledby="label" aria-hidden="true">
        <!-- ... -->
        @if (showMessage) 
            {
            <div class="@css" role="alert">
            @message
            </div>
            }
        <!-- ... -->
    </div>
    <!-- ... -->
</div>

@code 
{
private String resultMessage;

private bool showMessage = false;
privare bool success = true;
private string message = success ? "Query Saved": "Query Not Saved";
private string css = success ? "alert alert-success": "alert alert-danger";

public void doSomething(){
    success = is200Success;
    showMessage = true;
}
}

Я не запускал код, поэтому может быть одна или две опечатки!

0
MrC aka Shaun Curtis 6 Май 2021 в 13:53