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 2005.
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 "C:\Program Files (x86)\LEAD Technologies\LEADTOOLS 17\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 "C:\Program Files (x86)\LEAD Technologies\LEADTOOLS 17\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	ID Value	_btnFlip Flip

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

            Imports Leadtools.Codecs
            Imports Leadtools.Web.Controls

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

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

            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>):

            <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 httpHandlers 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".

In your Site's properties dialog, click the Home Directory tab and then click Configuration.

In the Application Configuration dialog box that appears, click Add. When the Add/Edit Application Extension Mapping dialog appears, 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 ".leadgen" into the Extension edit box.

Click OK in each open dialog to close the three dialogs.
From the path "C:\Program Files (x86)\LEAD Technologies\LEADTOOLS 17\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 "C:\Program Files (x86)\LEAD Technologies\LEADTOOLS 17\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.

LEADTOOLS WebForms and AJAX	Send comments on this topic. \| Back to Introduction - All Topics \| Help Version 17.0.3.22
Updating Web Controls Manually