Updating Web Controls Manually

Perform the following steps to create a project that updates the viewed images manually in the LEADTOOLS WebImageViewer and WebThumbnail Web Controls on the client side :

1. Start Visual Studio 2008.

2. Choose File->New->Web Site… from the menu.

3. In the New Web Site dialog box, choose "ASP.NET Web Site" in the Templates List, and choose either "Visual C#" or "VB" in the Language drop-down list box.

4. In the Location drop-down list box choose "File System", enter "C:\Inetpub\wwwroot\UpdatingWebControlsManually" into the Project Name field, and then click OK.

   If desired, type a new location for your project or select a directory by clicking Browse and browsing to the correct directory, and then click OK.

5. In the Solution Explorer pane, right-click on the project node, and select "Add Reference…" from the context menu. In the Add Reference dialog box click the Browse tab and browse to the "<LEADTOOLS_INSTALLDIR>\Bin\Dotnet\Win32" folder and select the following DLL:

   • Leadtools.Web.dll.

   Now click OK to close the Add Reference dialog box.

6. In the Solution Explorer pane right-click on the "Default.aspx" file and choose "View Designer" from the context menu.

7. Go to the toolbox (View->Toolbox) and drag and drop an instance of the LEADTOOLS WebImageViewer and WebThumbnailViewer controls onto the web form. If you do not have the WebImageViewer and WebThumbnailViewer controls in your toolbox, select "Tools->Choose Toolbox Items..." from the menu. Click Browse, select "Leadtools.Web.dll" from "<LEADTOOLS_INSTALLDIR>\Bin\Dotnet\Win32". Click Open and then OK.

8. Go to the toolbox (View-Toolbox) and from the HTML tab drag and drop one Input(Button) control onto the web form.

9. Change the properties of the dropped button as follows:

1. In the Solution Explorer pane right-click on the "Default.aspx" file and choose "View Designer" from the context menu and double click on _btnFlip to handle its onclick event in javascript.

2. Switch to "Default.aspx" code view (Right-click default.aspx in the solution explorer then select View Code) and add the following lines at the beginning of the file:

   VB

   Imports Leadtools.Codecs 
   Imports Leadtools.Web.Controls 

   C#

   using Leadtools.Codecs; 
   using Leadtools.Web.Controls; 

3. Update the Page_Load event handler to be as follows:

   VB

   Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 
      If (Not IsPostBack) Then 
         ' Display the thumbnails in one column. 
         WebThumbnailViewer1.LayoutDirection = LayoutDirection.Vertical 
         ' Adds all the pages of the image "eye.gif" 
         WebThumbnailViewer1.Add("Resources\eye.gif", 1, -1) 
         ' Select the first page 
         WebThumbnailViewer1.SelectedIndex = 0 
                          
         ' Loads the same  
         WebImageViewer1.OpenImageUrl("Resources\eye.gif", 0) 
      End If 
   End Sub 

   C#

   protected void Page_Load(object sender, EventArgs e) 
   { 
      if(!IsPostBack) 
      { 
         // Display the thumbnails in one column. 
         WebThumbnailViewer1.LayoutDirection = LayoutDirection.Vertical; 
         // Adds all the pages of the image "eye.gif" 
         WebThumbnailViewer1.Add(@"Resources\eye.gif", 1, -1); 
         // Select the first page 
         WebThumbnailViewer1.SelectedIndex = 0; 
                       
         // Loads the same  
         WebImageViewer1.OpenImageUrl(@"Resources\eye.gif", 0); 
      } 
   } 

4. Add the following JavaScript methods to the end of "Default.aspx" after the closing tag of form (</form>) and before the closing tag of body ():

   <script type="text/javascript"> 
      function _btnFlip_onclick() 
      { 
         var cmd = new FlipCommand(); 
         WebImageViewer1.ApplyCommand(cmd); 
      } 
                       
      WebImageViewer1.ImageDataChanged = function() 
      { 
         WebThumbnailViewer1.Update(WebImageViewer1); 
      } 
                    
      WebThumbnailViewer1.SelectedIndexChanged = function() 
      { 
         var thumbInfo = WebThumbnailViewer1.getThumbnailInfo(WebThumbnailViewer1.getSelectedIndex()); 
         var url = thumbInfo.url; 
         if(thumbInfo.cacheFileName != "") 
            url = thumbInfo.cacheFileName; 
         WebImageViewer1.OpenImageUrl(url, thumbInfo.page - 1); 
      } 
      </script> 

5. Your web.config file has to tell the server how to handle the Leadtools.Web.Handlers.ImageGenerator requests.

   Drilling down through the file's schema, you will need to add the Handlers section inside the <system.web> </system.web> tag (if it is not already there), so that it looks like the following:

   <httpHandlers> 
      <add verb="*" path="*.leadgen" type="Leadtools.Web.Handlers.ImageGenerator, Leadtools.Web"/> 
   </httpHandlers> 

6. Also, you have to set up the IIS to handle the requests for ".leadgen", IIS has two different ApplicationPools: Classic .NET AppPool (uses "Classic" Managed pipelinemode) and DefaultAppPool (uses "Integrated" Managed pipelinemode) the WebSite can be configured to run with both as following:

   1. Classic .NET AppPool: In the IIS manager navigate to your Site, click the "Handlers Mappings". From the Actions panel(at the right of the screen) click on "Add Script Map...", In the Add Script Map dialog box that appears Enter "*.leadgen" into the Requested path edit box, then click the Browse button beside the Executable edit box and browse to the path of the dll "aspnet_isapi.dll" (you can find it in the "C:\Windows\Microsoft.NET\Framework\v2.0.50727" folder), enter a descriptive name in the Name edit box (ex: LeadClassicHandler). Note: If you are using Leadtools.Web.dll X64 version you need to add the "aspnet_isapi.dll" from the Framework64 (you can find it in the "C:\Windows\Microsoft.NET\Framework64\v2.0.50727" folder). Click OK to close the dialog.

   2. DefaultAppPool: Drilling down through the file's schema, you will need to add the handlers section inside the <system.webServer> </system.webServer> tag (if it is not already there), so that it looks like the following:

   <handlers> 
      <add name="LeadIntegratedHandler" verb="*" path="*.leadgen" type="Leadtools.Web.Handlers.ImageGenerator, Leadtools.Web" preCondition="integratedMode,runtimeVersionv2.0"/> 
   </handlers> 

7. From the path "<LEADTOOLS_INSTALLDIR>\Bin\Dotnet\Win32" copy "Leadtools.Codecs.Gif" and "Leadtools.Codecs.Png" DLL to the project's Bin folder.

8. Inside the project folder create a folder named "CacheFolder" to contain all the processed images.

9. Inside the project folder create 2 folders named "CacheFolder" and "Resources", then copy all the java script files found in the "<LEADTOOLS_INSTALLDIR>\Examples\DotNet\Resources\Web" folder to the "Resources" new folder.

10. Also you need to copy the image "eye.gif" found in "C:\Users\Public\Documents\LEADTOOLS Images\" folder to this new folder.

11. Run the project and play with it.

Note: For X64 dlls please note that you can't debug them on the Localhost in the VisualStudio(WebServer.exe) since it is a 32-bit application, so you only can use them by hosting the Site on IIS, you can make your development with 32-bit dlls and replace them with X64 dlls when you finish your application. Note: For ASP.Net MVC 3 projects please note that the "leadgen" requests need to be ignored to let the IIS map them to Leadtools.Web, to do this you need to update the Global.asax.cs for the ASP MVC 3 project as following: routes.IgnoreRoute("{controller}/generator.leadgen");