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 :

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 "Visual Basic" 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 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.
In the Solution Explorer pane right-click on 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 Input(Button) 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 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.

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:

Visual Basic


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: 
Visual Basic
            Imports Leadtools.Codecs
            Imports Leadtools.Web.Controls
            
C#
            using Leadtools.Codecs;
            using Leadtools.Web.Controls;


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: 
Visual Basic


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: 
Visual Basic
            Imports Leadtools.Codecs
            Imports Leadtools.Web.Controls
            
C#
            using Leadtools.Codecs;
            using Leadtools.Web.Controls;


C#
            using Leadtools.Codecs;
            using Leadtools.Web.Controls;

Update the Page_Load event handler to be as follows:

Visual Basic


Update the Page_Load event handler to be as follows:
Visual Basic
            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);
               }
            }


Update the Page_Load event handler to be as follows:
Visual Basic


Update the Page_Load event handler to be as follows:
Visual Basic
            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);
               }
            }


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

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 (</body>):


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 (</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:


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 diffierent ApplicationPools: Classic .NET AppPool (uses "Classic" Maneged pipelinemode) and DefaultAppPool (uses "Integrated" Maneged 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 describtive 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:


Also, you have to set up the IIS to handle the requests for ".leadgen", IIS has two diffierent ApplicationPools: Classic .NET AppPool (uses "Classic" Maneged pipelinemode) and DefaultAppPool (uses "Integrated" Maneged 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 describtive 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>

From the path "<LEADTOOLS_INSTALLDIR>\Bin\Dotnet\Win32" copy "Leadtools.Codecs.Gif" and "Leadtools.Codecs.Png" DLL 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 java script files found in the "<LEADTOOLS_INSTALLDIR>\Examples\DotNet\Resources\Web" folder to the "Resources" new folder.
Also you need to 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 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");