Syncfusion ASP.NET Core Pdfviewer – UI Sample Generator

NuGet: Syncfusion.EJ2.AspNet.Core

Generate Code for the User's Project (default)

Trigger keywords: "how to", "add pdfviewer", "code sample", "show me", "example", "snippet", "integrate", "component", "create sample", "ASP.NET Core sample".

Purpose: Generate minimal, copy-pasteable Razor + HTML code (.cshtml) that the user can integrate directly into their ASP.NET Core project.

Workflow: ⚠️ CRITICAL — Feature Support Policy (STRICT MODE):

FUNDAMENTAL RULE: Only generate code using APIs and properties that are EXPLICITLY listed in the reference files. ANY deviation is a VIOLATION.

• MANDATORY CHECKS BEFORE GENERATING ANY CODE:

  1. Search the reference files for the exact API/property name
  2. Verify it appears in the Method Reference, Properties, or Events tables
  3. If NOT found in ANY reference file, STOP immediately
  4. Do NOT generate or suggest undocumented APIs under any circumstances

• STRICT ENFORCEMENT - ZERO TOLERANCE:

  • NO custom properties - Only use properties from reference file tables
  • NO invented methods - Only use methods from reference file tables
  • NO workarounds with undefined APIs - Forbidden
  • NO assumptions about undocumented behavior - Forbidden
  • NO alternative implementations using guess-work - Forbidden
  • NO pretending support exists - Forbidden

• MANDATORY RESPONSE FOR UNSUPPORTED FEATURES:

  • If a requested scenario/feature/API is NOT listed in any reference file, you MUST respond with:

    "This feature is not supported in the current Syncfusion ASP.NET Core PDF Viewer implementation."
    

    Copy
  • Then list what IS supported from the appropriate reference file
  • Never suggest alternatives unless explicitly documented in reference files

• REFERENCE FILE HIERARCHY:

  • Each reference file contains complete, authoritative documentation for its domain
  • The tables (Method Reference, Properties, Events) are the SOURCE OF TRUTH
  • Content outside these tables in reference files is explanatory only
  • Do NOT extend beyond what appears in the reference file tables

• AUDIT YOUR GENERATION:

  • Before providing any code, verify EVERY API used appears in a reference file table
  • Document which reference file each API comes from
  • If you cannot cite a reference file table entry, DELETE that code

• This is a CRITICAL REQUIREMENT. Violations compromise the skill's integrity and reliability.

Step 1 — Generate Code from Reference Files Only (REQUIRED)

• Read the relevant references/*.md file(s) for the requested feature
• Cross-reference EVERY API, property, and method against these tables
• MANDATORY: Before generating ANY code, verify that reference files exist and are accessible
• Read the appropriate reference file(s) for the requested feature:
  • Use read_file tool on relevant references/*.md files
  • Confirm file contains Methods/Properties/Events tables
  • Verify tables are complete and readable
• If reference file is missing or cannot be read:
  • STOP code generation
  • Respond: "Reference file for this feature is not available. Please ensure all reference files are present in the references/ directory."
  • List the missing reference file name
• This is a BLOCKER step: Cannot proceed without reference file validation
• If an API/property does NOT appear in the reference file table, DO NOT USE IT
• Do NOT invent, guess, or suggest any API, method, property, class, or namespace not explicitly present in the reference files

Reference File Routing Guide

All templates and operation snippets live in references/*.md. Each file is a focused snippet or template the agent will combine when generating samples.

Flow: Always start with getting-started.md, then merge matched features into its anchors (PROPS, EVENTS, UI_BUTTONS, HANDLERS). If no keyword matches, return only the basic sample.

Checklist Before Generating Code

• Count the settings properties: 1-3? → Use inline | 4+? → Use separate razor code block
• Is the component prop simple enough? Yes → Keep inline | No → Extract to separate razor code block
• Are Default values set for properties explicitly? Yes → Remove | No → Keep it

🎯 Core Setup & Configuration

Context Menu

Navigation Features

Core Viewing and Interaction

Toolbar Configuration

Annotations and Markup

Forms Management

Text Operations

Document Operations

⚙️ Advanced Features

Quick Start Example

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <ejs-pdfviewer id="pdfviewer" style="height:600px"
        documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
        annotationAdd="annotationAdded" >
    </ejs-pdfviewer>
</div>

⚙️ SETTINGS CONFIGURATION BEST PRACTICES

When generating code with settings (toolbarSettings, annotationSettings, annotationSelectorSettings, arrowSettings, rectangleSettings, etc.), follow these guidelines to prevent unnecessary imports and over-engineering:

Rule 1: Simple Settings → Define as Razor inline code

Use this approach when:

• Configuring only 1-3 properties
• Settings are straightforward without custom types

Example (DO THIS):

<ejs-pdfviewer
    annotationSelectorSettings="@(new {
        selectionBorderColor = "blue",
        resizerBorderColor = "red",
        resizerFillColor = "#4070ff",
        resizerSize = 8,
        selectionBorderThickness = 1,
        resizerShape = "Circle",
        selectorLineDashArray = new int[] { 5, 6 },
        resizerLocation = "Corners|Edges",
        resizerCursorType = "grab"
    })">
</ejs-pdfviewer>

Benefits:

• ✅ Simple and readable
• ✅ Less code clutter
• ✅ Type checking still works

Rule 2: Complex Settings → Define as Razor code blocks outside HTML

Use this approach when:

• Configuring 4+ properties OR multiple related settings
• Using enums or complex configurations
• Need to reuse the same configuration across multiple components
• Settings are complex enough to warrant separate definition

Example (DO THIS ONLY FOR COMPLEX CASES):

@{
    var annotationSelectorSettings = new {
        selectionBorderColor = "blue",
        resizerBorderColor = "red",
        resizerFillColor = "#4070ff",
        resizerSize = 8,
        selectionBorderThickness = 1,
        resizerShape = "Circle",
        selectorLineDashArray = new int[] { 5, 6 },
        resizerLocation = "Corners|Edges",
        resizerCursorType = "grab"
    };
}
<ejs-pdfviewer annotationSelectorSettings="@annotationSelectorSettings">
</ejs-pdfviewer>

Rule 3: NEVER Over-Engineer Simple Cases

❌ DO NOT DO THIS (Over-engineered):

@{
    var toolbarSettings = new Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings  { ShowTooltip = true };
}
<ejs-pdfviewer
    toolbarSettings="@toolbarSettings"
>
</ejs-pdfviewer>

✅ DO THIS INSTEAD (Simple & Clean):

<ejs-pdfviewer 
    toolbarSettings="@(new Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings  { ShowTooltip = true })">
</ejs-pdfviewer>