Web Controls Tutorial

Updating Web Controls Manually

The following steps show how to add fast, interactive image viewing to your Asynchronous JavaScript and XML (AJAX) web applications. The steps in this tutorial create a project that updates viewed images manually in the LEADTOOLS WebImageViewer and WebThumbnail Web Controls on the client side :

Start Visual Studio 2008.
Choose File->New->Web Site from the menu.
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.
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.
In the Solution Explorer pane, right-click 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.
In the Solution Explorer pane, right-click the "Default.aspx" file and choose "View Designer" from the context menu.
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.
Go to the toolbox (View->Toolbox) and from the HTML tab drag and drop one View->Toolbox control onto the web form.
Change the properties of the dropped button as follows:

Control Property New Value

Button1 IDValue _btnFlipFlip
In the Solution Explorer pane, right-click the "Default.aspx" file and choose "View Designer" from the context menu and double-click _btnFlip to handle its onclick event in javascript.
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; 
```

Control	Property	New Value
Button1	IDValue	_btnFlipFlip

Update the Page_Load event handler to be as follows:

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

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); 
   } 
}

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>

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> 
```
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 "Add Script Map...". In the Add Script Map dialog box that appears, enter "*.leadgen" into the Requested path edit box, then click Browse 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 web-controls-tutorials edit box (for example, 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> 
```
From the path "<LEADTOOLS_INSTALLDIR>\Bin\Dotnet\Win32" copy the "Leadtools.Codecs.Gif" and "Leadtools.Codecs.Png" DLLs to the project's Bin folder.
Inside the project folder create a folder named "CacheFolder" to contain all the processed images.
Inside the project folder create 2 folders named "CacheFolder" and "Resources", then copy all the javascript files found in the "<LEADTOOLS_INSTALLDIR>\Examples\DotNet\Resources\Web" folder to the "Resources" new folder.
Also, copy the image "eye.gif" found in "C:\Users\Public\Documents\LEADTOOLS Images\" folder to this new folder.
Run the project and play with it.

Note: For X64 DLLs, please note that you cannot debug them on the Localhost in the VisualStudio(WebServer.exe) since it is a 32-bit application. Use X64 DLLs by hosting the Site on IIS, (you can develop with the 32-bit DLLs and replace them with the 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, update the Global.asax.cs for the ASP MVC 3 project as follows: routes.IgnoreRoute("{controller}/generator.leadgen");

Download our FREE evaluation

Help Version 20.0.2020.4.3