диалоговое окно начальной загрузки показывает содержимое HTML в теле на основе вызова ajax

Question

У меня есть следующее модальное диалоговое окно начальной загрузки:

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

Обратите внимание, что модальное тело пусто.

У меня есть следующий вызов, который получает данные в формате 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 внутри тела диалогового окна.

Answer 1

Позвольте мне сделать пару предположений о вашем коде (он относится к фрагменту, но вы должны убедиться, что он правильно обрабатывается в вашем приложении):

• селектор для теламодал - это его класс, измените модальный идентификатор (в этом примере: #resultModal .modal-body. Измените соответствующим образом)
• данные AJAX, которые вы хотите визуализировать, заполняют весь параметр data (вы можете извлечь соответствующую частьданных в соответствии с вашими потребностями).

При этом мы хотим показать данные внутри модального тела.Поэтому нам нужно взять данные и использовать их для визуализации текста или HTML-элемента (используйте первый, если вы беспокоитесь о внедрении, второй, если контент известен вам и вы можете ему доверять).

Взяв предоставленный вами фрагмент вызова, мы можем написать следующий код (я выделю измененную часть, окружив ее комментарием):

$.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) {

            },
        });

Надеюсь, это поможет!