ImageGear for .NET
Adding Event Handlers
ImageGear for .NET User Guide > Getting Started > ImageGear for .NET Visual Studio 2012 Tutorials > ImageGear for .NET ASP.NET Tutorial > Adding Event Handlers
  1. Open the created Default.aspx page in Source mode:



  2. Navigate to the <head> section of the page and add the new script section:
     
    Copy Code 
    <head runat="server">
    <title>ASP.NET Tutorial</title>
    <script type="text/javascript">
    </script>
</head>

  3. Add the new script method to the new script section:
     
    Copy Code 
    <script type="text/javascript">
    function Button1_onclick() {
        $find('PageView1').fitImage(ImageGear.Web.UI.FitType.FullImage);
    }
</script>

  4. In the body section, navigate to the <input id=”Button1”> and bind onclick event with created method:
     
    Copy Code 
    <input id="Button1" type="button" value="Show Full Image"
onclick="Button1_onclick()" />

  5. In the script section, add one more method like:
     
    Copy Code 
    function Button2_onclick() {
    $find('PageView1').rotate(90);
}

  6. Bind method with onclick event of Button2 input element:
     
    Copy Code 
    <input id="Button2" type="button" value="Rotate Right" onclick="Button2_onclick()" />

  7. For the script section, add the following code:
     
    Copy Code 
    function Button3_onclick() {
    var mark = new ImageGear.Web.UI.Mark(ImageGear.Web.UI.MarkType.Ellipse);
    mark.set_rectangle(new ImageGear.Web.UI.Rectangle(Math.random() * 800, Math.random() * 800, 800, 350));
    mark.set_fillColor('#ffc0cb');
    mark.set_lineWidth(10);
    mark.set_lineColor('#008020');
    mark.set_opacity(127);
    $find('PageView1').get_artPage().addMark(mark);
}

  8. Bind method with appropriate event of Button3 element:
     
    Copy Code 
    <input id="Button3" type="button" value="Draw Ellipse" onclick="Button3_onclick()" />

  9. To add action to the fourth button, add the following code to the script section:
     
    Copy Code 
    function Button4_onclick() {
 var _ctrlView = $find('PageView1');
 if (_ctrlView.get_pageIsOpen() == true) {
     _ctrlView.closePage();
 }
 _ctrlView.openPage({ documentIdentifier: 'FileImageDataProvider1:myImage.tif', pageNumber: 2,
  viewFitType: ImageGear.Web.UI.FitType.ActualSize });
}

    Then, bind this method with Button4 event:

     
    Copy Code 
    <input id="Button4" type="button" value="Data Provider 1" onclick="Button4_onclick()" />

    You will need to find the myImage.tif file from the .\ImageGear.NET v21\Samples\ASP.NET\CSharp\ ASP.NET Tutorial folder installed sample or use another image but change myImage.tif in the above code to the image name being used. The pageNumber value may need to be changed to 0 if the image is a single page document.

  10. To animate the fifth button, add the code:
     
    Copy Code 
    function Button5_onclick() {
 var _ctrlView = $find('PageView1');
 if (_ctrlView.get_pageIsOpen() == true) {
     _ctrlView.closePage();
 }
 _ctrlView.openPage({ documentIdentifier: 'FileImageDataProvider2:ccitt.tif', pageNumber: 2,
   viewFitType: ImageGear.Web.UI.FitType.ActualSize });
}

    To the script section, and bind this method with Button5 click event:

     
    Copy Code 
    <input id="Button5" type="button" value="Data Provider 2" onclick="Button5_onclick()" />

    Find the ccitt.tif as done in Step 9 above or use a different document image, but make the corresponding code changes for the name and pageNumber as in Step 9 appropriately.

  11. Two image storage folders will need to be created in the application directory where your Default.aspx page is located. The two folders must match the Data Provider attributes in the web.config file. In the previous tutorial section, Creating a Page Using the Project Item Template, Step 8 had a step to configure the ImageGear Web Settings. If the Data Provider setup was not attempted there, either copy the web.config file from the ASP.NET Tutorial sample found in the ImageGear.NET v21\Samples\ASP.NET\CSharp location or edit the web.config and replace the current ImageGear.Web.DataProviders.ImageProvider section with this version:
     
    Copy Code 
    <ImageGear.Web.DataProviders.ImageProvider default="FileImageDataProvider1" parseToken=":">
    <providers>
      <add name="FileImageDataProvider1"
           type="ImageGear.Web.DataProviders.FileImageDataProvider,ImageGear21.Web.Services"
           storageRootPath="~/viewerImages/"
           maxImageSizeToCache="512"
           cachingTimeLimit="5" cachingEnable="false" />
      <add name="FileImageDataProvider2"
           type="ImageGear.Web.DataProviders.FileImageDataProvider,ImageGear21.Web.Services"
           storageRootPath="~/viewerImages2/"
           maxImageSizeToCache="512"
           cachingTimeLimit="5" cachingEnable="false" />
    </providers>
</ImageGear.Web.DataProviders.ImageProvider>

  12. Copy the document image myImage.tif and ccitt.tif or whatever image documents you used into the two folders respectively. If other images were used, make sure the appropriate images are copied into the viewImages and viewerImages2 folders. Button 4 will select the image in viewerImages and button 5 will select the image in viewerImages2. The JavaScript openPage method has documentIdentifier concatenating a file provider name with a document identifier with a ":" separating the  provider name from the file name. As illustrated in the JavaScript, FileImageDataProvider1 is used with button 4, and FileImageDataProvider2 with button 5. The storageRootPath attribute associated with those file providers indicates the directory to be used to locate the file names being requested.

    The parseToken attribute defined in the ImageProvider section determines what character or set of characters that define the separation between the data provider name and the document identifier. In this example, the ":" is used for the separation character. If the parseToken attribute is not provided, the "!" character is the default separator.


  13. Save your changes, and then run the application by right-clicking on Default.aspx in the Visual Studio Solution window and selecting View in Browser.



  14. You can drag a rectangle on the image to zoom in (because the MouseTool property is set to RectangleZoom) and click the buttons to show the full image and rotate it.

 

 

©2014. Accusoft Corporation. All Rights Reserved.

Send Feedback