如何在新的弹出窗口中从 javascript 打开 MVC 4 视图？

Question

我有一个 MVC 视图页面，其中有一个 HTML ActionLink，单击该操作链接时，我想打开一个新的弹出窗口而不关闭前一个窗口。在这个新的弹出窗口中，我想显示一个 MVC 视图，但我无法做到这一点。

现在我正在使用以下代码来做到这一点：

<script type="text/javascript">
$(function () {
    $('a.edit').click(function () {
        var url = $(this).attr('href');
        window.showModalDialog(url, "#1", "dialogHeight:600px;dialogHeight:400px;dialogWidth:700px;dialogTop:300px;dialogLeft:400px;edge:Raised;center:Yes;help:No;Resiable:No;Status:No;");
    });
    return false;
});

@Html.ActionLink("Answer", "getanswer", new {controller="Question"}, new {target="_blank",@class="edit"})

但问题在于，它不是作为弹出窗口打开，而是在新的选项卡窗口中打开。所以我无法找到我做错的地方。

我也尝试了 window.open 而不是 window.showModalDialog 但我得到了相同的结果。

所以如果有人能找到我做错了什么或者如何解决这个问题，请帮助我解决。

Answer 1

@Html.ActionLink 在 DOM 中创建 HTML：

 <a href="question/getanswer" target="_blank" class="edit">Answer</a>

这当然是触发并在新标签页中打开链接。

您可能试图通过返回 false 来阻止此事件的发生，但您没有在正确的位置返回 false，目前您从 document.ready 事件完成中返回 false，您应该删除 return false;...尝试：

$('a.edit').click(function () {
        var url = $(this).attr('href');
        window.showModalDialog(url, "#1", "dialogHeight:600px;dialogHeight:400px;dialogWidth:700px;dialogTop:300px;dialogLeft:400px;edge:Raised;center:Yes;help:No;Resiable:No;Status:No;");
        return false;
    });

或者这样更好：

$('a.edit').click(function (e) {
        var url = $(this).attr('href');
        window.showModalDialog(url, "#1", "dialogHeight:600px;dialogHeight:400px;dialogWidth:700px;dialogTop:300px;dialogLeft:400px;edge:Raised;center:Yes;help:No;Resiable:No;Status:No;");
        e.stopPropagation;
    });

如果以上方法不足以解决问题，请暂时停止使用@Html.ActionLink 并替换为：

<div href="@Url.Action("getanswer", "Question")" class="edit" style="cursor: pointer">Answer</div>

然后将 jQuery 选择器从 a.edit 更改为 .edit

现在，可以肯定的是，您将阻止链接在新选项卡中打开，并且您可以更正确地聚焦和调试 jQuery 点击绑定。