LEADTOOLS WebForms and AJAX Send comments on this topic. | Back to Introduction - All Topics | Help Version 17.0.3.22
Using the TiledImageViewer control on the server side.

Take the following steps to create a project that uses features of the LEADTOOLS TiledImageViewer Web Control from the server side:

  1. Start Visual Studio 2005.

  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 "Visual Basic" in the Language drop-down list box.

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

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

  5. Repeat the previous step except in the Add Reference dialog box select 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.

  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 TiledImageViewer onto the web form. If you do not have the TiledImageViewer in your toolbox, select "Tools->Choose Toolbox Items..." from the menu. Click Browse and then select "Leadtools.Web.dll" from the "C:\Program Files (x86)\LEAD Technologies\LEADTOOLS 17\Bin\DotNet\Win32" folder. Click Open and then OK.

  8. Go to the toolbox (View-Toolbox) and from the Standard tab drag and drop 5 Labels, 5 Buttons, 1 Text Box, and 4 drop-down list boxes onto the web form.

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

    Control Property New Value
    Label1 ID Text _lblImageUrl Image Url
    TextBox1 ID _tbImageUrl
    Button1 ID Text _btnViewImage View Image
    Label2 ID Text _lblSizeMode SizeMode
    DropDownList1 ID AutoPostBack _ddlSizeMode True
    Label3 ID Text _lblScaleFactor ScaleFactor
    DropDownList2 ID AutoPostBack _ddlScaleFactor True
    Label4 ID Text _lblHorizontalAlignMode HorizontalAlignMode
    DropDownList3 ID AutoPostBack _ddlHorizontalAlignMode True
    Label5 ID Text _lblVerticalAlignMode VerticalAlignMode
    DropDownList4 ID AutoPostBack _ddlVerticalAlignMode True
    Button2 ID Text _btnScrollUp Up
    Button3 ID Text _btnScrollLeft Left
    Button4 ID Text _btnScrollRight Right
    Button5 ID Text _btnScrollDown Down
  10. Switch to the "Default.aspx" code view (right-click default.aspx in the Solution Explorer and then select "View Code") and add the following lines at the beginning of the file:

    Visual Basic

                 Imports System.Drawing
                
                 Imports Leadtools.Web.Controls
                 
    

    C#

                 using System.Drawing
                 
                 using Leadtools.Web.Controls;
                 
    
  11. 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
                      ' Initialize the ImageViewer control.
                      TiledImageViewer1.ResourcesPath = "Resources"
                      ' Hide the scroll bars
                      TiledImageViewer1.ScrollBarVisible = False
                
                      ' Fill in the Combo Boxes
                      BindDropDownListToEnum(_ddlSizeMode, GetType(ImageViewerSizeMode), TiledImageViewer1.SizeMode)
                      BindDropDownListToEnum(_ddlHorizontalAlignMode, GetType(ImageViewerAlignMode), TiledImageViewer1.HorizontalAlignMode)
                      BindDropDownListToEnum(_ddlVerticalAlignMode, GetType(ImageViewerAlignMode), TiledImageViewer1.VerticalAlignMode)
                      Dim scaleFactors() As Integer = {1000, 800, 600, 400, 200, 100, 75, 50, 25, 10}
                      Dim factor1 As Integer = CInt(TiledImageViewer1.ScaleFactor)
                      For i As Integer = 0 To scaleFactors.Length - 1
                         _ddlScaleFactor.Items.Add(scaleFactors(i).ToString())
                         If (factor1 = scaleFactors(i)) Then
                            _ddlScaleFactor.SelectedIndex = i
                         End If
                      Next
                   End If
                 End Sub
                 
    

    C#

                 protected void Page_Load(object sender, EventArgs e)
                 {
                    if(!IsPostBack)
                    {
                       // Initialize the ImageViewer control.
                       ImageViewer1.ResourcesPath = "Resources";
                       // Hide the scroll bars
                       TiledImageViewer1.ScrollBarVisible = false;
                       // Fill in the Combo Boxes
                       BindDropDownListToEnum(_ddlSizeMode, typeof(ImageViewerSizeMode), ImageViewer1.SizeMode);
                       BindDropDownListToEnum(_ddlHorizontalAlignMode, typeof(ImageViewerAlignMode), ImageViewer1.HorizontalAlignMode);
                       BindDropDownListToEnum(_ddlVerticalAlignMode, typeof(ImageViewerAlignMode), ImageViewer1.VerticalAlignMode);
                    
                       int[] scaleFactors = { 1000, 800, 600, 400, 200, 100, 75, 50, 25, 10 };
                       int factor1 = (int)(ImageViewer1.ScaleFactor);
                       for(int i = 0; i < scaleFactors.Length; i++)
                       {
                          _ddlScaleFactor.Items.Add(scaleFactors[i].ToString());
                          if(factor1 == scaleFactors[i])
                             _ddlScaleFactor.SelectedIndex = i;
                       }
                    }
                 }
                 
    
  12. double click on _btnViewImage, _ddlSizeMode, _ddlScaleFactor, _ddlHorizontalAlignMode _ddlVerticalAlignMode, _btnScrollUp, _btnScrollLeft, _btnScrollRight, _btnScrollDown controls and Update the event handlers as follows:

    Visual Basic

                 Protected Sub _btnViewImage_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles _btnViewImage.Click
                    TiledImageViewer1.ImageUrl = _tbImageUrl.Text
                 End Sub
                 Protected Sub _ddlSizeMode_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles _ddlSizeMode.SelectedIndexChanged
                    TiledImageViewer1.SizeMode = GetDropDownListSelectedItem(_ddlSizeMode, GetType(ImageViewerSizeMode))
                 End Sub
                 Protected Sub _ddlScaleFactor_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles _ddlScaleFactor.SelectedIndexChanged
                    TiledImageViewer1.ScaleFactor = Convert.ToInt32(_ddlScaleFactor.SelectedItem.Value)
                 End Sub
                 Protected Sub _ddlHorizontalAlignMode_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles _ddlHorizontalAlignMode.SelectedIndexChanged
                    TiledImageViewer1.HorizontalAlignMode = GetDropDownListSelectedItem(_ddlHorizontalAlignMode, GetType(ImageViewerAlignMode))
                 End Sub
                 Protected Sub _ddlVerticalAlignMode_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles _ddlVerticalAlignMode.SelectedIndexChanged
                    TiledImageViewer1.VerticalAlignMode = GetDropDownListSelectedItem(_ddlVerticalAlignMode, GetType(ImageViewerAlignMode))
                 End Sub
                 Protected Sub _btnScrollLeft_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles _btnScrollLeft.Click
                    Dim x As Integer = TiledImageViewer1.ScrollPosition.X - 10
                    If x < 0 Then
                       x = -TiledImageViewer1.ScrollPosition.X
                    End If
                 
                    TiledImageViewer1.ScrollPosition = New System.Drawing.Point(x, TiledImageViewer1.ScrollPosition.Y)
                 End Sub
                 
                 Protected Sub _btnScrollUp_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles _btnScrollUp.Click
                    Dim y As Integer = TiledImageViewer1.ScrollPosition.Y - 10
                    If y < 0 Then
                       y = -TiledImageViewer1.ScrollPosition.Y
                    End If
                 
                    TiledImageViewer1.ScrollPosition = New System.Drawing.Point(TiledImageViewer1.ScrollPosition.X, y)
                 End Sub
                 
                 Protected Sub _btnScrollDown_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles _btnScrollDown.Click
                    TiledImageViewer1.ScrollPosition = New System.Drawing.Point(TiledImageViewer1.ScrollPosition.X, TiledImageViewer1.ScrollPosition.Y + 10)
                 End Sub
                 
                 Protected Sub _btnScrollRight_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles _btnScrollRight.Click
                    TiledImageViewer1.ScrollPosition = New System.Drawing.Point(TiledImageViewer1.ScrollPosition.X + 10, TiledImageViewer1.ScrollPosition.Y)
                 End Sub
                 
    

    C#

                 protected void _btnViewImage_Click(object sender, EventArgs e)
                 {
                    ImageViewer1.ImageSize = new Size(Convert.ToInt32(_tbImageWidth.Text), Convert.ToInt32(_tbImageHeight.Text));
                    ImageViewer1.ImageUrl = _tbImageUrl.Text;
                 }
                 protected void _ddlSizeMode_SelectedIndexChanged(object sender, EventArgs e)
                 {
                   ImageViewer1.SizeMode = (ImageViewerSizeMode)GetDropDownListSelectedItem(_ddlSizeMode, typeof(ImageViewerSizeMode));
                 }
                 protected void _ddlScaleFactor_SelectedIndexChanged(object sender, EventArgs e)
                 {
                   ImageViewer1.ScaleFactor = Convert.ToInt32(_ddlScaleFactor.SelectedItem.Value);
                 }
                 protected void _ddlHorizontalAlignMode_SelectedIndexChanged(object sender, EventArgs e)
                 {
                   ImageViewer1.HorizontalAlignMode = (ImageViewerAlignMode)GetDropDownListSelectedItem(_ddlHorizontalAlignMode, typeof(ImageViewerAlignMode));
                 }
                 protected void _ddlVerticalAlignMode_SelectedIndexChanged(object sender, EventArgs e)
                 {
                   ImageViewer1.VerticalAlignMode = (ImageViewerAlignMode)GetDropDownListSelectedItem(_ddlVerticalAlignMode, typeof(ImageViewerAlignMode));
                 }
                 protected void _btnScrollUp_Click(object sender, EventArgs e)
                 {
                    int y = (TiledImageViewer1.ScrollPosition.Y - 10 > 0) ? TiledImageViewer1.ScrollPosition.Y - 10 : -TiledImageViewer1.ScrollPosition.Y;
                    TiledImageViewer1.ScrollPosition = new System.Drawing.Point(TiledImageViewer1.ScrollPosition.X, y);
                 }
                 protected void _btnScrollLeft_Click(object sender, EventArgs e)
                 {
                    int x = (TiledImageViewer1.ScrollPosition.X - 10 > 0) ? TiledImageViewer1.ScrollPosition.X - 10 : -TiledImageViewer1.ScrollPosition.X;
                    TiledImageViewer1.ScrollPosition = new System.Drawing.Point(x, TiledImageViewer1.ScrollPosition.Y);
                 }
                 protected void _btnScrollRight_Click(object sender, EventArgs e)
                 {
                    TiledImageViewer1.ScrollPosition = new System.Drawing.Point(TiledImageViewer1.ScrollPosition.X + 10, TiledImageViewer1.ScrollPosition.Y);
                 }
                 protected void _btnScrollDown_Click(object sender, EventArgs e)
                 {
                    TiledImageViewer1.ScrollPosition = new System.Drawing.Point(TiledImageViewer1.ScrollPosition.X, TiledImageViewer1.ScrollPosition.Y + 10);
                 }
                 
    
  13. Add the following functions to the end of "Default.aspx.cs" file (for C#) or before the "End Class" statement (for Visual Basic):

    Visual Basic

                 Private Sub BindDropDownListToEnum(ByVal ddl As DropDownList, ByVal t As Type, ByVal selected As Object)
                    Dim a As Array = [Enum].GetValues(t)
                    ddl.DataSource = a
                    ddl.DataBind()
                    Dim selectedValue As String = selected.ToString()
                    For i As Integer = 0 To ddl.Items.Count - 1
                       If (ddl.Items(i).Value = selectedValue) Then
                          ddl.SelectedIndex = i
                          Return
                       End If
                    Next
                 End Sub
                 Private Function GetDropDownListSelectedItem(ByVal ddl As DropDownList, ByVal t As Type) As Object
                    Return [Enum].Parse(t, ddl.SelectedItem.Value)
                 End Function
                 
    

    C#

                 private void BindDropDownListToEnum(DropDownList ddl, Type t, object selected)
                 {
                    Array a = Enum.GetValues(t);
                    ddl.DataSource = a;
                    ddl.DataBind();
                    string selectedValue = selected.ToString();
                    for(int i = 0; i < ddl.Items.Count; i++)
                    {
                       if(ddl.Items[i].Value == selectedValue)
                       {
                          ddl.SelectedIndex = i;
                          return;
                       }
                    }
                 }
                 private object GetDropDownListSelectedItem(DropDownList ddl, Type t)
                 {
                    return Enum.Parse(t, ddl.SelectedItem.Value);
                 }
                 
    
  14. Your web.config file has to tell the server how to handle the Leadtools.Web.Handlers.ImageInformation and 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="*.leadinfo" type="Leadtools.Web.Handlers.ImageInformation, Leadtools.Web"/>
                       <add verb="*" path="*.leadgen" type="Leadtools.Web.Handlers.ImageGenerator, Leadtools.Web"/>
                    </httpHandlers>
                 
    
  15. Also you have to set up the IIS to handle the requests for ".leadinfo" and ".leadgen".

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

    When the Application Configuration dialog box appears, click Add. When the Add/Edit Application Extension Mapping dialog box appears, click Browse and browse to the path of the "aspnet_isapi.dll" (you can find it in "C:\Windows\Microsoft.NET\Framework\v2.0.50727" folder) to fill the Executable edit box. Enter ".leadinfo" into the Extension edit box.

    Now click OK, and repeat the last step except enter ".leadgen" into the Extension edit box. Click OK in each open dialog to close the three dialogs.

  16. From the "C:\Program Files (x86)\LEAD Technologies\LEADTOOLS 17\Bin\DotNet\Win32" folder, copy any filter codecs you want to work with to the project's Bin folder: Leadtools.Codecs.J2k, Leadtools.Codecs.Gif, Leadtools.Tif, Leadtools.Codecs.Cmp, ...etc.

  17. Inside the project folder create a folder named "Resources" and copy all of the java script files and images found in the "C:\Program Files (x86)\LEAD Technologies\LEADTOOLS 17\Examples\DotNet\Resources\Web" folder to this new folder.

  18. Run the project and play with it as follows:

    1. Type a path to a supported format (gif, bmp, png, jpeg, tif, cmp, ...etc) in the ImageUrl TextBox.

    2. Click the ViewImage to load the image into the TiledImageViewer control.

    3. Change the selections in the drop-down list boxes and notice the differences in the displayed image.

    4. Click the Left, Right, Up and Down buttons to scroll the image manually.