如何在 ajax 调用的 iframe 中加载部分视图？

Question

我正在开发 MVC 4 并尝试使用 $.ajax 调用在 iframe 中加载部分视图，如下所示：

$(document).ready(function () {

    $("#btnInsert").click(
    function(e) {
        e.preventDefault();
        var loc = window.location.href;
        loc = (loc.substr(loc.length - 1, 1) == "/") ? loc + "Home" : loc;
        console.log(loc + "/Insert");

        $.ajax({
            type: "GET",
            url: loc+ "/Insert",
            success: function (msg) {
                console.log(msg);
                //$('FrameforPopUp.html').html(msg);
                //$("#ShowNextView").css(
                $("#ShowNextView").html(msg);
                //$("ShowNextView").src
                showView(msg);
                $("#ShowNextView").attr("disabled", "enabled");
                //if (msg.d)
                //    showView(msg.d);
                //else
                //    alert("Data is invalid")
            },
            error: function () {
                alert("An unexpected error has occurred during processing.");
            }
        });
    });

    function showView(resultView) {
        $("#ShowNextView").dialog({          //resultView
            modal: true,
            width: "auto",
            height: "auto",
            position: "center",
            resizable: false,
            closeOnEscape: true,
            open: function (ev, ui) {
            }
        });
    }

我的框架如下：

<iframe id="ShowNextView" style="visibility:hidden;">

但它没有显示带有弹出窗口的 iframe.. 我希望该 iframe 加载“插入”视图并在 btnInsert 单击上的 ajax 调用后将其显示在弹出窗口中。请帮忙？

Answer 1

这就是您可以将 HTML 内容写入 iframe 的方式。

$("#btnInsert").click(function (e) {
    // ...
    $.ajax({
        type: "GET",
        url: loc + "/Insert",
        success: function (msg) {
            showView(msg);
        },
        error: function () {
            alert("An unexpected error has occurred during processing.");
        }
    });

});

function showView(resultView) {
    $('<div>').append('<iframe id="ShowNextView"></iframe>').dialog({
        modal: true,
        width: "auto",
        height: "auto",
        position: "center",
        resizable: false,
        closeOnEscape: true,
        open: function (ev, ui) {
            $(this).find('#ShowNextView').contents().find('body').html(resultView);
        }
    });
}

并且还从 HTML 中删除 <iframe id="ShowNextView" style="visibility:hidden;">。

演示： http://jsfiddle.net/ssqxyvjc/