Bootstrap Modal Popup 显示来自服务器端代码的动态内容答案

【问题标题】：Bootstrap Modal Popup to display dynamic content from server side codeBootstrap Modal Popup 显示来自服务器端代码的动态内容
【发布时间】：2015-12-21 22:49:33
【问题描述】：

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

我将要显示的文本传递给一个 Jquery 函数（也在母版页上），它会改变模式上的文本。

传递简单的文本消息（例如“Hello World”）可以正常工作，但如果我想显示更复杂的内容（例如 html 代码或从错误异常中输出文本），则模式不会出现。没有错误消息，什么都没有。

任何想法/cmets 将不胜感激。

母版页上的模式代码

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

【问题讨论】：

标签： c# jquery asp.net twitter-bootstrap-3

【解决方案1】：

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

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

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

【讨论】：

感谢您，我已按照建议更新了标题标签。查看开发工具后，我收到“未终止的字符串常量”错误。我查看了 VS 即时窗口中的 alertHeading 和 alertMessage 的值，没有撇号，只有“函数”中有撇号以表明输入的值是字符串。
现在可以使用了，谢谢。您的帖子和以下内容最终帮助我找到了解决方案，需要使用 JavaScriptSerializer 对其进行编码。 stackoverflow.com/questions/6450235/…

【解决方案2】：

在你的 showAlert 函数中，首先打开模式

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

打开后，使用showed.bs.modal事件，该事件在modal打开后触发。这意味着它会在modal打开后填充动态内容

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

【讨论】：