Отображение PDF-файла в модальном окне с использованием PartialView

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

и я могу затем вызвать его (открыть) по следующей ссылке:

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

, которая вызывает действие из контроллера и открывает требуемый PartialView, который имеетОстальная часть модального кода. И это работает.

Следуя примерам из этого поста: Как отобразить .pdf файл в модальном окне? Я хочу показать 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

Что я делаю неправильно, что оно не открывается как всплывающее окно?

Это потому, что вы добавляете 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.Результат: