是否可以使用 Bootstrap 模态 window 在 Blazor 页面中使用由 HTML 组成的字符串变量？

Question

我有一个 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 而不是漂亮的 Bootstrap alert。

我尝试在页面上使用 @((MarkupString)resultMessage)，但它会将警报放在实际页面上，而不是在我的模态 window.

中

Answer 1

做这样的事情：

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

我没有运行代码，所以可能有一两个错字！

Answer 2

所以在谷歌搜索之后，我想出了一个适合我的方法：

resultMessage = is200Success ? @<div class="alert alert-success" role="alert">Query Saved</div> : @<div class="alert alert-danger" role="alert">Query Not Saved</div>;