Bootstrap Modal Popup显示服务器端代码中的动态内容

本文关键字：动态 代码 Modal Popup 显示 服务器端 Bootstrap | 更新日期: 2023-09-27 18:27:46

我正在使用C#、Bootstrap和Jquery的组合构建一个web表单项目。如果我想在屏幕上向用户显示任何类型的消息，我会在主页上调用一个空的模态。

我将要显示的文本传递给Jquery函数（也在母版页上），该函数会更改模态上的文本。

传递简单的文本消息（如"Hello World"）可以很好地工作，但如果我想显示更复杂的内容，如html代码或错误异常的输出文本，那么模态就不会出现。没有错误消息，只是什么都没有。

如有任何想法/意见，我们将不胜感激。

主页上的模式代码

<div id="modalAlert" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                &times;</button>
                <h1 class="modal-title">
                    <asp:Label ID="lblAlertHeader" runat="server" Text="Heading"></asp:Label>
                </h1>
            </div>
            <div class="modal-body">
                <div id="modalAlertBody">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

主页上的功能

function ShowAlert(heading,message) {
$('#modalAlert').modal({ backdrop: 'static', keyboard: false, show: true });
    $('#lblAlertHeader').text(heading);
    $('#modalAlertBody').html(message);
}

子页面上的服务器端代码

string alertHeading = "Alert Heading";
string alertMessage = "Alert Message";
string function = string.Format("ShowAlert('{0}','{1}');", alertHeading, alertMessage);
ClientScript.RegisterStartupScript(this.GetType(), "alert", function, true);

Bootstrap Modal Popup显示服务器端代码中的动态内容

您在客户端代码中没有正确引用标签对象。在渲染的HTML上，标签的ID将是类似Body_lblAlertHeader 的东西

您可以在运行时使用$('#<%=lblAlertHeader.ClientID%>').text(heading);来获得正确的ID。

在浏览器中使用F12（开发工具）。这些天他们都有，但Chrome可能是最好的（imo）。确保您没有收到任何控制台错误，如果消息或头字符串中有撇号，JQuery/JavaScript就会中断。当JavaScript中断时，它通常会轰炸掉之前的所有JavaScript代码。

在showAlert函数中，首先将模态打开为

$("#modelAlert").modal({ 
      background: 'static',
      keyboard: false,
      show: true});

打开后，使用shown.bs.modal事件，该事件在modal打开后激发。这意味着它将在模态打开后填充动态内容

 $( '#modalAlert').on
      ('shown.bs.modal' , function() {
     // put here your dynamic           messages.
    });
相关文章：