是否可以使用Bootstrap模式窗口在Blazor页面中使用由HTML组成的字符串变量

Question

我有一个Blazor页面，它使用Bootstrap 5的模式功能创建了一个弹出窗口。

在该模式中有一个与服务器通信的表单。如果操作成功，我会返回一个200响应。根据是否收到200，我希望显示不同的消息。

MyPage.rarzor

<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)，但它将警报放在了实际页面上，而不是在我的模式窗口内。

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