Call us: (407) 567-0096
Open a ticket
Chat with us
USA flag German flag Spanish flag

RazorPages

Steps for using TWPdfViewer component in Razor Pages

  1. 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>
  <!-- your other head content -->
  @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

  2. Add needed Javascript as shown in the example below

    File location: Pages\Shared\_Layout.cshtml

    HTML example
    Copy
    <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>

  3. 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

See Also
Copyright © 2026 Terminalworks. All Rights Reserved