Question

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

如何以模型弹出方式将其打开

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

Answer 2

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

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

或者，如果你想在一个新的模态窗口中打开它，你可以使用jQuery UI Dialog小部件，你可以不引人注意地AJAX化这个链接（在应用它一个唯一的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;
    });
});

以弹出方式打开视图

2 个答案: