Question

我正在使用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);

Answer 1

您没有在客户端代码中正确引用标签对象。在呈现的HTML上，您的标签的ID将是Body_lblAlertHeader

的行

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

在浏览器中使用F12（开发工具）。他们现在都拥有它，但Chrome可能是最好的（imo）。确保你没有收到任何控制台错误，如果你在消息或标题字符串中有撇号，你的JQuery / JavaScript就会破坏。当JavaScript中断时，它通常会炸毁所有前面的JavaScript代码。

Answer 2

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

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

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

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

Bootstrap模式弹出窗口，用于显示服务器端代码

2 个答案: