Post
Ask Question

How to Use Seadragon Ajax Control in ASP.Net

 

Introduction

Seadragon is an interactive image viewing control. Using this tool you can pan and zoom images. The mouse is used to pan and zoom around the image.

Let's learn (step-by-step) how to use the Seadragon control of the AjaxControlToolkit.

Step 1: First of you need to download the AjaxToolKit from the AjaxToolkit official website.

Step 2: Now in the next step open Visual Studio.

Step 3: Now create a new website and add the downloaded AjaxToolkit into the toolbox as in the following:

  1. Create a new Tab in the toolbox by right-clicking into the toolbox.


     

  2. Provide the name of the Tab.

  3. Now right-click inside the Tab and select "Choose Items".


     

  4. Now one window will open, click on "Browse" and go to where the AjaxToolKit is available and add the "AjaxControlToolkit.dll" file, then click on the "OK" button.


     

Step 4: Now inside the form tag make a division using a div tag and add a ToolkitScriptManager using the following code or just drag and drop the ScriptManager from the Toolbox.

  1. <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">  

  2. </asp:ToolkitScriptManager>  

Step 5: To prepare for the next step you need to make an XML file for Seadragon using the "Deep Zoom Composer". The following is the procedure for doing that; you can make a XML file using Deep Zoom Composer.

  1. Download Deep Zoom Composer from Microsoft's offical website and install it.

  2. Now open Deep Zoom Composer and create a new project by clicking on "New project".


     

  3. Now provide the name and location of the project.

  4. Now you will see an import section; inside the import section you will see an "Add Image..." button, click on this button and select one image and add that image.


     

  5. Now click on the "Compose" Tab and Drag the image from the lower section of the deep Zoom Composer to the middle section.


     

  6. Now click on "Fit to screen" or simply press "Ctrl + O" to fit to the screen.

  7. Now click on the "Export" Tab and select "Output type" as Images, provide name, make the quality 100 and "Export as a composition (Single Image)" then click on "Export".

Step 6: Now Copy the exported folder and paste into the Solution Explorer of Visual Studio. 

Step 7: Now in the Visual Studio just drag and drop the "Seadragon" from the toolbox inside the division tag or use following code

  1. <asp:Seadragon ID="Seadragon1" runat="server">  

  2. </asp:Seadragon>  

Step 8: Now add the URL of the XML file using the SourceUrl property I have, now the code will look such as the following:

<asp:Seadragon ID="Seadragon1" SourceUrl="mydeepzoom/dzc_output.xml" runat="server" Width="600"Height="500">
</asp:Seadragon>

Step 9: Now all the work has been completed, just run the project and see the output.

Complete Code:
  
 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
   
 <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>  
 <!DOCTYPE html>  
   
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head runat="server">  
     <title></title>  
 </head>  
 <body>  
     <form id="form1" runat="server">  
     <div>  
         <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">  
         </asp:ToolkitScriptManager>  
         <center>  
             <h1>Hello C# Corner</h1>  
         <asp:Seadragon ID="Seadragon1" SourceUrl="mydeepzoom/dzc_output.xml" runat="server" Width="600" Height="500"></asp:Seadragon></center>  
     </div>  
     </form>  
 </body>

Output: 


 


Similar Articles