[使用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。

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

Answer 1

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

这是因为您在href链接中添加了<a>，默认情况下它将进入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.Controller：

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.结果：