如何在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/