使用 PartialView 以模式 window 显示 PDF 文件

Question

在我的 Asp.Net 核心（MVC，核心 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');
    });
}

然后我可以用 link 调用它（打开），如下所示：

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

从控制器调用操作并打开具有其余模态代码的所需 PartialView。并且有效。

按照此 post 中的示例：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);
}

和分部视图（“_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

What I'm doing wrong that it doesn't open as a pop-up?

那是因为你在<a> link里加了href，默认会进入PdfPartial动作，如果你用就不用加了jQuery.

下面是一个简单的解决方法：

1.View:

<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.Result:

使用 PartialView 以模式 window 显示 PDF 文件

Display PDF file in modal window using PartialView

jquery

modal-dialog

asp.net-core