syncfusion-content · SyncfusionBuild · Jul 29, 2025 · Jun 4, 2025 · Jul 18, 2025 · Jul 29, 2025
diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/show-hide-annotation.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/show-hide-annotation.md
@@ -0,0 +1,74 @@
+---
+layout: post  
+title: Show and Hide Annotations in EJ2 ASP.NET MVC PdfViewer | Syncfusion  
+description: Learn how to dynamically show and hide annotations in the Syncfusion ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Show and Hide Annotations
+publishingplatform: ##Platform_Name##
+documentation: ug  
+---
+
+# Show and Hide Annotations in PDF Viewer
+
+### Overview
+
+This guide demonstrates how to implement functionality to dynamically show and hide annotations in a PDF document loaded in the Syncfusion PDF Viewer using ASP.NET MVC. This feature is particularly useful in scenarios where you need to present a clean view of the document or toggle between annotated and non-annotated views.
+
+### How to Show and Hide Annotations
+
+**Step 1:** Set Up the PdfViewer in Your ASP.NET MVC Project
+
+First, follow the steps provided in the [getting started guide](https://ej2.syncfusion.com/aspnetmvc/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample.
+
+**Step 2:** Add Toggle Button and Implementation
+
+Add a button to toggle annotation visibility and implement the necessary JavaScript functions to handle the show/hide functionality:
+
+{% tabs %}
+{% highlight html tabtitle="Standalone" %}
+
+@using Syncfusion.EJ2
+@{
+    ViewBag.Title = "Home Page";
+}
+<div>
+    <div class="button-container" style="margin-bottom: 10px;">
+        <button id="hideBtn" class="e-btn e-primary">Hide Annotations</button>
+        <button id="unhideBtn" class="e-btn e-primary">Show Annotations</button>
+    </div>
+    <div style="height:500px;width:100%;">
+        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ResourceUrl("https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib").Render()
+    </div>
+</div>
+
+<script type="text/javascript">
+    var exportObject;
+
+    // Function to hide annotations
+    function HideAnnotations() {
+        var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
+        pdfviewer.exportAnnotationsAsObject().then(function(value) {
+            exportObject = value;
+            pdfviewer.deleteAnnotations();
+        });
+    }
+
+    // Function to unhide annotations
+    function UnHideAnnotations() {
+        var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
+        if (exportObject) {
+            pdfviewer.importAnnotation(JSON.parse(exportObject));
+        }
+    }
+
+    // Add event listeners to buttons
+    document.getElementById('hideBtn').addEventListener('click', HideAnnotations);
+    document.getElementById('unhideBtn').addEventListener('click', UnHideAnnotations);
+</script>
+
+{% endhighlight %}
+{% endtabs %}
+
+This implementation provides a clean, efficient way to toggle the visibility of annotations in your PDF documents. It's particularly useful for presentation scenarios or when you need to focus on the document content without the distraction of annotations.
+
+[View sample in GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples/tree/master/How%20to)
diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/show-hide-annotation.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/show-hide-annotation.md
@@ -0,0 +1,67 @@
+---
+layout: post  
+title: Show and Hide Annotations in EJ2 ASP.NET CORE PdfViewer | Syncfusion  
+description: Learn how to show and hide annotations in the Syncfusion ASP.NET CORE PDF Viewer component of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: PDF Viewer
+publishingplatform: ##Platform_Name##
+documentation: ug  
+---
+
+# Show and Hide Annotations in PDF Viewer
+
+### Overview
+
+This guide demonstrates how to dynamically show and hide annotations in the Syncfusion PDF Viewer component in an ASP.NET Core application. This functionality is useful when you want to provide users with the ability to toggle the visibility of annotations within PDF documents.
+
+###  How to Show and Hide Annotations
+
+**Step 1:** Set up the PDF Viewer in your ASP.NET Core project
+
+First, create a basic PDF Viewer implementation in your ASP.NET Core application.
+
+**Step 2:** Add a toggle button and implement the show/hide functionality
+
+Add a button that allows users to toggle the visibility of annotations within the PDF document.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+@page "{handler?}"
+@using ShowHideAnnotations.Pages
+@model IndexModel
+@{
+ViewData["Title"] = "Home page";
+}
+<div class="text-center">
+    <button id="hideBtn">Hide Annotations</button>
+    <button id="unhideBtn">Show Annotations</button>
+    <ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
+</ejs-pdfviewer>
+</div>
+<script type="text/javascript">
+    var exportObject = null;
+    document.addEventListener('DOMContentLoaded', function() {
+    var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
+        function HideAnnotations() {
+            pdfviewer.exportAnnotationsAsObject().then(function(value) {
+            exportObject = value;
+        pdfviewer.deleteAnnotations();
+    });
+    }
+    function UnHideAnnotations() {
+        if (exportObject) {
+        pdfviewer.importAnnotation(JSON.parse(exportObject));
+        }
+    }
+    document.getElementById('hideBtn').addEventListener('click', HideAnnotations);
+    document.getElementById('unhideBtn').addEventListener('click', UnHideAnnotations);
+    });
+</script>
+
+{% endhighlight %}
+{% endtabs %}
+
+This implementation provides a clean, efficient way to toggle the visibility of annotations in your PDF documents. It's particularly useful for presentation scenarios or when you need to focus on the document content without the distraction of annotations.
+
+[View sample in GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples/tree/master/How%20to/ShowHideAnnotations)
diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html
@@ -2027,6 +2027,7 @@
 		<li><a href="/ej2-asp-core/pdfviewer/how-to/find-text-async">Find Text using findTextAsync</a></li>
 		<li><a href="/ej2-asp-core/pdfviewer/how-to/extract-text-completed">Extract Text Completed</a></li>
 		<li><a href="/ej2-asp-core/pdfviewer/how-to/enable-text-selection">Dynamically Enable or Disable Text Selection</a></li>
+		<li><a href="/ej2-asp-core/pdfviewer/how-to/show-hide-annotation">Show and Hide Annotations</a></li>
 		</ul>
 		</li>
 		<li>Troubleshooting

diff --git a/ej2-asp-mvc-toc.html b/ej2-asp-mvc-toc.html
@@ -1987,6 +1987,7 @@
 		<li><a href="/ej2-asp-mvc/pdfviewer/how-to/find-text-async">Find Text using findTextAsync</a></li>
 		<li><a href="/ej2-asp-mvc/pdfviewer/how-to/extract-text-completed">Extract Text Completed</a></li>
 		<li><a href="/ej2-asp-mvc/pdfviewer/how-to/enable-text-selection">Dynamically Enable or Disable Text Selection</a></li>
+		<li><a href="/ej2-asp-mvc/pdfviewer/how-to/show-hide-annotation">Show and Hide Annotation</a></li>
 		</ul>
 		</li>
 		<li>Troubleshooting