ASP.NET Core How to open PDF in a new tab?

user_13244704 0
Viewed 3375

In my controller I have the following action to create a PDF

public async Task<IActionResult> ExportMailingLabel(int CustomerID, int ProductID)
        {
            var mailingLabel = await NoticeService.CreateMailingLabel(CustomerID, ProductID);
            return File(mailingLabel.NoticeContents, "application/pdf", "MailingLabel.pdf");
        }

And In my view i have the following link,

<a asp-action="ExportMailingLabel" asp-controller="Product" asp-area="Product" asp-route-CustomerID="@Model.CustomerID" asp-route-ProductID="@Model.ProductID" class="btn btn-primary"><i class="fa fa-receipt"></i> View Mailing Label</a>

I need help when on click to open the PDF in a new Tab instead of displaying Open Dialog box.

I tried target="_blank" but i seems like it open a new tab but still shows open dialog box

asp.net-core
1 Answers

_target="blank" is a simple HTML tag once for all and I think that it works in all browsers as expected. You can use it with a static or dynamic file name as follows.

STATIC FILE NAME USAGE

Controller.cs

public async Task<IActionResult> ExportMailingLabel(int CustomerID, int ProductID) {
    var mailingLabel = await NoticeService.CreateMailingLabel(CustomerID, ProductID);
    return File(mailingLabel.NoticeContents, "application/pdf");//we don't send 3.parameter yet
}

View.cshtml

<a asp-action="ExportMailingLabel"
   asp-controller="Product"
   asp-route-CustomerID="@Model.CustomerID"
   asp-route-ProductID="@Model.ProductID"
   asp-route-FileName="MailingLabel.pdf" class="btn btn-primary" id="btnOpenDocument">
    <i class="fa fa-receipt"></i> View Mailing Label
</a>

@section Scripts
{
    <script>
        //We are opening the file with js instead of action when click to the button
        $('#btnOpenDocument').click(function (e) {
            e.preventDefault();
            window.open('@Url.Action("ExportMailingLabel"
                             ,"Product"
                             ,new {customerId=selectedCustomerId
                                  ,productId=selectedProductId
                                  ,fileName="MailingLabel.pdf" })'
                        ,"_blank");
        });
    </script>
}

DYNAMIC FILE NAME USAGE

Controller.cs

//We are adding a new route to action for file name
[HttpGet("[controller]/[action]/{customerId}/{productId}/{fileName}")]
public async Task<IActionResult> ExportMailingLabel(int CustomerID, int ProductID) {
    var mailingLabel = await NoticeService.CreateMailingLabel(CustomerID, ProductID);
    return File(mailingLabel.NoticeContents, "application/pdf", $"{CustomerID}_{ProductID}.pdf");        
}

View.cshtml

<a asp-action="ExportMailingLabel"
   asp-controller="Product"
   asp-route-CustomerID="@Model.CustomerID"
   asp-route-ProductID="@Model.ProductID"
   asp-route-FileName="@(Model.CustomerID)_@(Model.ProductID).pdf" class="btn btn-primary" id="btnOpenDocument">
    <i class="fa fa-receipt"></i> View Mailing Label
</a>

@section Scripts
{
    <script>
        //We are opening the file with js instead of action when click to the button
        $('#btnOpenDocument').click(function (e) {
            e.preventDefault();
            window.open('@Url.Action("ExportMailingLabel"
                             ,"Product"
                             ,new {customerId=selectedCustomerId
                                  ,productId=selectedProductId
                                  ,fileName=selectedCustomerId+"_"+selectedProductId+".pdf" })'
                        ,"_blank");
        });
    </script>
}

FileContentResult Class

user_136649390
Related