时间戳

首页 > 解决方案 > 引导对话框基于 ajax 调用在正文中显示 HTML 内容

jquery - 引导对话框基于 ajax 调用在正文中显示 HTML 内容

问题描述

我有以下引导模式对话框：

<div class="modal fade" id="resultModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Update</h4>
        </div>
        <div class="modal-body wrap">            


        </div>
        <div class="modal-footer">
             <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
        </div>
    </div>
</div>
</div>

注意 modal-body 是如何为空的。

我有以下调用，它获取我喜欢在正文 () 中显示的 HTML 数据：

 $.ajax({
                url: '@Url.Action("GetContent", "Sys")',
                type: 'POST',
                data: { siteID: @Model.SiteID},
                dataType: "html",
                cache: false,
                 success: function (data) {                 
                     //  I like to show content of data inside of the dialog box body. 
                     $('#resultModal').modal({
                         backdrop: 'static',
                         keyboard: false,
                         show: true,
                     });

                },
                error: function (xhr, status) {

                },
            });

我喜欢做的是在对话框主体内显示 HTML 中的数据内容。

标签： jqueryajaxtwitter-bootstrap

解决方案

让我对您的代码有几个假设（它适用于代码段，但您必须确保在您的应用程序中正确处理它）：

  • 模态体的选择器是它的类，改变模态ID（在这个例子中：#resultModal .modal-body。根据需要更改）
  • 您要渲染的 AJAX 数据填充整个data参数（您可以提取数据的相应部分以满足您的需要）。

That said: we want to show the data inside the modal body. Therefore we need to take the data, and use it to render the text or the HTML of the element (use the former if You're worried about injection, the latter if the content is known to You and You can trust it).

By taking the invocation snippet You provided, we can write the following code (I shall highlight the modified portion by surrounding it with a comment):

$.ajax({
            url: '@Url.Action("GetContent", "Sys")',
            type: 'POST',
            data: { siteID: @Model.SiteID},
            dataType: "html",
            cache: false,
             success: function (data) {
                 /* ************* */
                 // I shall assume that the data is not safe
                 $('#resultModal .modal-body').text(data);
                 // Were the data safe, You could swap the preceeding line with the following
                 // $('#resultModal .modal-body').html(data);
                 /* ************* */
                 //  I like to show content of data inside of the dialog box body. 
                 $('#resultModal').modal({
                     backdrop: 'static',
                     keyboard: false,
                     show: true,
                 });

            },
            error: function (xhr, status) {

            },
        });

Hope it helps!

推荐阅读