From c70b293da716b51ef1c5928c4dded1abfcce8e8e Mon Sep 17 00:00:00 2001
From: SF4524LogeshKumar <logeshkumar.dhamodharan@syncfusion.com>
Date: Wed, 4 Jun 2025 11:20:49 +0530
Subject: [PATCH] 845073: Show and Hide Annotation UG Docs

---
 .../how-to/show-hide-annotation.md            | 85 +++++++++++++++++
 .../how-to/show-hide-annotation.md            | 92 +++++++++++++++++++
 ej2-asp-core-toc.html                         |  1 +
 ej2-asp-mvc-toc.html                          |  1 +
 4 files changed, 179 insertions(+)
 create mode 100644 ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/show-hide-annotation.md
 create mode 100644 ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/show-hide-annotation.md

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
new file mode 100644
index 0000000000..f202fc2d56
--- /dev/null
+++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/show-hide-annotation.md
@@ -0,0 +1,85 @@
+---
+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:
+
+```html
+@using Syncfusion.EJ2;
+@{
+    ViewBag.Title = "Home Page";
+}
+<div class="text-center">
+    <button id="toggleBtn" onclick="toggleAnnotations()">Hide Annotations</button>
+    <div style="height:600px">
+        @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/Home/")).Render()
+    </div>
+</div>
+
+<script type="text/javascript">
+    var exportObject = null;
+    var annotationsVisible = true;
+    
+    // Function to run when page loads
+    document.addEventListener('DOMContentLoaded', function () {
+        // Get viewer instance
+        var viewer = document.getElementById('pdfviewer').ej2_instances[0];
+        // Load the PDF document
+        if (viewer) {
+            viewer.documentPath = "Annotations.pdf";
+            // You can also add any initialization code here
+            console.log("PDF viewer initialized and document loading started");
+        }
+    });
+    
+    function toggleAnnotations() {
+        var viewer = document.getElementById('pdfviewer').ej2_instances[0];
+        if (annotationsVisible) {
+            // Hide annotations by exporting and deleting them
+            viewer.exportAnnotationsAsObject().then(function (value) {
+                exportObject = value;
+                var count = viewer.annotationCollection.length;
+                for (var i = 0; i < count; i++) {
+                    // Always delete the first item as the collection shrinks
+                    viewer.annotationModule.deleteAnnotationById(viewer.annotationCollection[0].annotationId);
+                }
+                annotationsVisible = false;
+                document.getElementById('toggleBtn').textContent = 'Show Annotations';
+            });
+        } else {
+            // Restore annotations
+            if (exportObject) {
+                var exportAnnotObject = JSON.parse(exportObject);
+                viewer.importAnnotation(exportAnnotObject);
+            }
+            annotationsVisible = true;
+            document.getElementById('toggleBtn').textContent = 'Hide Annotations';
+        }
+    }
+</script>
+```
+### Conclusion
+
+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)
\ No newline at end of file
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
new file mode 100644
index 0000000000..f500c10c3b
--- /dev/null
+++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/show-hide-annotation.md
@@ -0,0 +1,92 @@
+---
+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.
+
+##### Conclusion
+
+By implementing the show and hide annotations functionality in the Syncfusion PDF Viewer, you can provide users with a more flexible document viewing experience. This approach maintains the original annotations data while giving users control over their visibility, which is particularly useful in document review, presentation, and analysis scenarios. The toggle mechanism demonstrates how to effectively use the PDF Viewer's annotation APIs to create enhanced user interactions with PDF documents.
+
+[View sample in GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples/tree/master/How%20to/ShowHideAnnotations) Implementation Steps
+
+**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.
+
+```html
+@page "{handler?}"
+@using ShowHideAnnotations.Pages
+@model IndexModel
+@{
+    ViewData["Title"] = "Home page";
+}
+<div class="text-center">
+    <button id="toggleBtn" onclick="toggleAnnotations()">Hide Annotations</button>
+    <ejs-pdfviewer id="pdfviewer" style="height:600px" serviceUrl="/Index" documentPath="">
+    </ejs-pdfviewer>
+</div>
+
+<script type="text/javascript">
+    var exportObject = null;
+    var annotationsVisible = true;
+    
+    // Function to run when page loads
+    document.addEventListener('DOMContentLoaded', function() {
+        // Get viewer instance
+        var viewer = document.getElementById('pdfviewer').ej2_instances[0];
+        // Load the PDF document
+        if (viewer) {
+            viewer.documentPath="Data/Annotations.pdf";
+            // You can also add any initialization code here
+            console.log("PDF viewer initialized and document loading started");
+        }
+    });
+    
+    function toggleAnnotations() {
+        var viewer = document.getElementById('pdfviewer').ej2_instances[0];
+        
+        if (annotationsVisible) {
+            // Hide annotations by exporting and deleting them
+            viewer.exportAnnotationsAsObject().then(function(value) {
+                exportObject = value;
+                var count = viewer.annotationCollection.length;
+                for (var i = 0; i < count; i++) {
+                    // Always delete the first item as the collection shrinks
+                    viewer.annotationModule.deleteAnnotationById(viewer.annotationCollection[0].annotationId);
+                }
+                annotationsVisible = false;
+                document.getElementById('toggleBtn').textContent = 'Show Annotations';
+            });
+        } else {
+            // Restore annotations
+            if (exportObject) {
+                var exportAnnotObject = JSON.parse(exportObject);
+                viewer.importAnnotation(exportAnnotObject);
+            }
+            annotationsVisible = true;
+            document.getElementById('toggleBtn').textContent = 'Hide Annotations';
+        }
+    }
+</script>
+```
+
+### Conclusion
+
+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)
\ No newline at end of file
diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html
index 1247293820..743c3fcd68 100644
--- a/ej2-asp-core-toc.html
+++ b/ej2-asp-core-toc.html
@@ -1999,6 +1999,7 @@
 		<li><a href="/ej2-asp-core/pdfviewer/how-to/extract-text-option">Extract Text Option</a></li>
 		<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/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
index c860bb9ddf..ecc6f2d232 100644
--- a/ej2-asp-mvc-toc.html
+++ b/ej2-asp-mvc-toc.html
@@ -1958,6 +1958,7 @@
 		<li><a href="/ej2-asp-mvc/pdfviewer/how-to/extract-text-option">Extract Text Option</a></li>
 		<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/show-hide-annotation">Show and Hide Annotation</a></li>
 		</ul>
 		</li>
 		<li>Troubleshooting