RazorPages

Steps for using TWPdfViewer component in Razor Pages

In your HTML section of the page, you will need to add 2 CSS links.
File location: Pages\Shared\_Layout.cshtml
HTML example
Copy
```
<head>
  
  @RenderSection("Head", required: false)
</head>
```
File location: Pages\{YOUR_PAGE}.cshtml (e.g. Index.cshtml)
HTML example
Copy
```
@section Head {
  <link rel="stylesheet" href="/_content/Terminalworks.PdfViewer.AspNetCore/css/tw-pdf-viewer.css" />
  <link rel="stylesheet" id='tw-web-theme' href="/_content/Terminalworks.PdfViewer.AspNetCore/css/themes/white-shapes/tw-pdf-viewer-theme.css" />
}
```
tw-pdf-viewer.css is a general CSS of TWPdfViewer and we recommend that you don't change it.
tw-pdf-viewer-theme.css is theme specific.
You can read more about changing theme at Changing the theme

Add needed Javascript as shown in the example below

File location: Pages\Shared\_Layout.cshtml

HTML example

<head>
  <!-- your other head content -->
  @RenderSection("Scripts", required: false)
</head>

File location: Pages\{YOUR_PAGE}.cshtml (e.g. Index.cshtml)

HTML example

Copy

<body>
  <!-- your other body content -->
  @section Scripts {
    <script src='/_content/Terminalworks.PdfViewer.AspNetCore/js/pdf.js'></script>
    <script src='/_content/Terminalworks.PdfViewer.AspNetCore/js/tw_viewer.js'></script>
  }
</body>

Add the component to your page
File location: Pages\{YOUR_PAGE}.cshtml (e.g. Index.cshtml)
XML
Copy
```
@using PdfViewer = Terminalworks.PdfViewer.AspNetCore

<component
  type="typeof(PdfViewer)"
  param-Id="@("twPdfViewer1")"
  render-mode="Static"
  param-IsStatic='@("Yes")'
/>
```
For examples how to set initial parameters look at Viewer options

Other Resources

How to apply license?

MVC - installation instructions

Blazor - installation instructions

WebAssembly - installation instructions