作为弹出窗口打开视图答案

【问题标题】：Open a view as a pop up作为弹出窗口打开视图
【发布时间】：2011-12-25 06:41:10
【问题描述】：

Controller.cs 是：

 public ActionResult ViewRequest(int id)
        {
            Job job = Jobs.GetJob(id);

            return View(job);
        }

它的观点是：

@model model.Job
<fieldset>
    <legend>Job</legend>


    <div class="display-label">Name</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Name)
    </div>

</fieldset>
    @Html.ActionLink("Download", "Download", new { id = model.Id }) |

如何在模型弹出窗口中打开它

【问题讨论】：

标签： asp.net-mvc-3

【解决方案1】：

在链接中添加一个类：

@Html.ActionLink("Download", "Download", new { id = model.Id }, 
                                         new{ @class = "dialog"} )

并在某处添加此脚本：

<script type="text/javascript">
    $(function (){
        $('a.dialog').click(function() {
            var url = $(this).attr('href');
            var dialog = $('<div style="display:none"></div>').appendTo('body');
            dialog.load(url, {}, 
                function (responseText, textStatus, XMLHttpRequest) {
                dialog.dialog({
                    close: function(event, ui) {
                        dialog.remove();
                    }
                });
            });
            return false;
        });
    });
</script>

必需的 CSS/JS

jQuery UI：https://jqueryui.com/

【讨论】：

您好，我尝试了代码，但出现以下错误：TypeError: dialog.dialog is not a function 你能帮帮我吗？
你加载了包含的jQueryUI吗？
这是我能想到的唯一原因。仔细检查它是否包含在内。它必须包含在父视图中，而不是您需要在对话框中加载的视图。
感谢您的考虑，我的代码如下： html: @Html.ActionLink("Create Personnel", "Create", "Personnel", null, new {@class= "btn btn-成功对话框", returnUrl = HttpContext.Current.Request.RawUrl })
我捆绑了 JqueryUi 和其他一些，并将它们呈现在我的父布局中

【解决方案2】：

如果您希望在新的浏览器窗口中打开 url，您可以将target="_blank" HTML 属性附加到锚点：

@Html.ActionLink(
    "view request in a new window", 
    "ViewRequest", 
    new { id = model.Id }, 
    new { target = "_blank" }
)

或者，如果您想在新的模态窗口中打开它，您可以使用jQuery UI Dialog 小部件，您可以不显眼地对该链接进行 AJAXify（在应用唯一 ID 之后）：

@Html.ActionLink(
    "view request in a new window", 
    "ViewRequest", 
    new { id = model.Id }, 
    new { id = "linkId" }
)

然后在一个单独的 javascript 文件中：

$(function() {
    $('#linkId').click(function() {
        $.get(this.href, function(result) {  
            $(result).dialog();
        });
        return false;
    });
});

或者如果您想在单击链接时立即打开对话框并在执行 AJAX 调用时提供一个小反馈：

$(function() {
    $('#linkId').click(function() {
        $('<div>Loading ...</div>').load(this.href).dialog();
        return false;
    });
});

【讨论】：