Using C1 MVC PdfViewer

This topic describes how to view a Pdf file in your MVC application using C1 PdfViewer template. The C1 PdfViewer template provides two different options to preview PDF file on the web browser. Users can preview the Pdf files that are stored on local system using the Pdf in current project option or can view the Pdf files that hosted on WebApi service URL using Pdf in other Pdf service option.

ASP.NET
ASP.NET Core

Under Views, right-click the PDFViewer folder, and then select Add | New Item... to open the Add New Item dialog.
Under Installed | Templates, select Visual C# | Web | C1 PdfViewer View Page to open the C1 MVC PdfViewer dialog.
In the C1 MVC PdfViewer dialog, select Pdf in current project option.
In the Pdf file field, click Browse... to locate a Portable Document File(.pdf) file on your system. In our case, we have used a sample pdf document.

Click OK to create Index.cshtml view page.

Index.cshtml	Copy Code
<head> <title>C1 MVC PdfViewer</title> @Html.C1().Styles() @Html.C1().Scripts().FlexViewer() </head> <body> @(Html.C1().PdfViewer().FilePath(@"~\Content\PdfFilesRoot\Selection.pdf")) </body>

From the Solution Explorer, right click the folder Views and select Add | New Folder.
Name the new folder. Provide the same name as the name of your controller, minus the suffix Controller (in our example: PDFViewer).
Right-click the PDFViewer folder, and then select Add | New Item... to open the Add New Item dialog.
Under Installed | Templates, select .NET Core | C1 PdfViewer View Page (ASP.NET Core) to open the C1 MVC PdfViewer dialog.
In the Service URL, enter the Web API Service URL to access the Pdf file.
In the Pdf file field, enter the name of the Pdf file that you want to access from the service URL.

Click OK to create Index.cshtml view page.

Index.cshtml	Copy Code
<head> <title>C1 MVC PdfViewer</title> <c1-styles /> <c1-scripts> <c1-flex-viewer-scripts /> </c1-scripts> </head> <body> <c1-pdf-viewer file-path="PDF/Selection.pdf" service-url="http://localhost:4615/PDFWebAPI"></c1-pdf-viewer> </body> </html>

Index.cshtml

Copy Code

<head>
    <title>C1 MVC PdfViewer</title>
    <c1-styles />
    <c1-scripts>
        <c1-flex-viewer-scripts />
    </c1-scripts>
</head>
<body>
    <c1-pdf-viewer file-path="PDF/Selection.pdf" service-url="http://localhost:4615/PDFWebAPI"></c1-pdf-viewer>
</body>
</html>