使用 PartialView 在模态窗口中显示 PDF 文件

Question

在我的 Asp.Net Core（MVC，core 2.2）中，我在整个网站中使用了一种通用的模式弹出窗口。

在布局页面中，我有模态的基本代码：

<div class="modal fade" id="modalGeneric" role="dialog"></div>

function showGenericModal(event) {
    var src = event.target || event.srcElement;

    // find the parent that contains proper decorations
    var url = $(src).closest("*[data-url]").data('url');

    // trigger an HTTP GET
    $.get(url, function (data) {
        // fill content and show modal
        $('#modalGeneric').html(data);
        $('#modalGeneric').modal('show');
    });
}

然后我可以使用如下链接调用它（打开）：

<a class="ml-1" data-toggle="tooltip" title="Predogled" 
    href="@Url.Action("PdfPartial", "ZavarovalnePolice", new { id = item.Id })"      
    onclick="showGenericModal(event);">
</a>

这会从控制器调用一个动作并打开所需的包含其余模式代码的 PartialView。它有效。

按照这篇文章中的示例：How to display .pdf file in modal window? 我想在我的模态弹出窗口中显示 PDF。

所以，我将这两个动作添加到我的控制器中：

public IActionResult PdfPartial(int id)
{
    ViewBag.Id = id;
    return PartialView("_PartialDocumentPreview");
}

public async Task<IActionResult> ShowModalDocument(int id)
{
    var file = _docs.GetDocument(id);

    file.Contents = await _docs.Download(doc);

    var contentDisposition = new System.Net.Mime.ContentDisposition
    {
        FileName = file.Title,
        Inline = true
    };

    Response.Headers.Add("Content-Disposition", contentDisposition.ToString());

    var memory = new MemoryStream(file.Contents);
    return File(memory.ToArray(), System.Net.Mime.MediaTypeNames.Application.Pdf);
}

和 PartialView（“_PartialDocumentPreview”）：

<div class="modal-dialog" >
    <div class="modal-content">
        <div class="modal-header">          
    </div>
    <div class="modal-body">
        <div id="PdfModal">
            <embed  src="@Url.Action("ShowModalDocument", "ZavarovalnePolice", 
            new { id = @ViewBag.Id })" type="application/pdf" 
            style="width:100%; height:100%"/>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline-warning" 
            data-dismiss="modal">Close</button>
    </div>
    </div>
</div>

PDF 打开，但不是在模式弹出窗口中，而是作为一个新页面（带有一个类似的 URL：https://localhost:123/ZavarovalnePolice/PdfPartial/1。

我做错了什么，它没有作为弹出窗口打开？

编辑（根据下面答案中的@Rena 建议）- 我刚刚将 href 更改为 data-url 并且可以正常工作：

<a class="ml-1" data-toggle="tooltip" title="Predogled" 
    data-url="@Url.Action("PdfPartial", "ZavarovalnePolice", new { id = item.Id })"    
    onclick="showGenericModal(event);">
</a>

Answer 1

我做错了什么，它没有作为弹出窗口打开？

那是因为你在你的<a>链接中添加了href，默认会进入PdfPartial动作，如果你使用jQuery就不需要添加它。

这是一个简单的解决方法，如下所示：

1.查看：

<div class="modal fade" id="modalGeneric" role="dialog"></div>
<a class="ml-1" data-toggle="tooltip" title="Predogled" href="#">show the pdf</a>
@section Scripts{
    <script>
        $(function () {
            var url ="@Url.Action("PdfPartial", "ZavarovalnePolice", new { id = 1 })";
            console.log(url);
            $('.ml-1').click(function () {
                $.ajax({
                    url:url,
                    type: "GET",
                    dataType: "html",
                    success: function (data) {
                        console.log(data);
                        $('#modalGeneric').html(data);
                        $('#modalGeneric').modal('show');
                    }
                })
            });
        });           
    </script>
}

2.控制器：

public IActionResult PdfPartial(int id)
{
    ViewBag.Id = id;
    return PartialView("_PartialDocumentPreview");
}

public async Task<IActionResult> ShowModalDocument(int id)
{
    string filePath = "~/file/test.pdf";
    var contentDisposition = new System.Net.Mime.ContentDisposition
    {
        FileName = "test.pdf",
        Inline = true
    };
    Response.Headers.Add("Content-Disposition", contentDisposition.ToString());
    return File(filePath, System.Net.Mime.MediaTypeNames.Application.Pdf);
}

3.pdf 使用默认 css 样式会弹出这么小，您可以在主视图而不是部分视图中添加如下 css 样式：

<style>
.modal-dialog {
    height: 90%; /* = 90% of the .modal-backdrop block = %90 of the screen */
}
.modal-content {
    height: 100%; /* = 100% of the .modal-dialog block */
}
#PdfModal {
    height: 100%;
}

4.结果：