Erik Lenaerts

ASP.NET fix for the Microsoft Internet Explorer PNG transparancy bug

Introduction

When working with Internet Explorer 5.5 or higher and you want to use PNG images that make use of the Alpha channel for transparancy effects, you will get unwanted effects. In fact Internet Explorer does not support the transparancy features of the PNG image format unless you use a trick. If you search on google on this topic, you'll find a lot of detailed information like over here.

ASP.NET Solution

Although most solutions found on the web, requires the use of javascript, we provide a server side solution in ASP.NET based on one method you just have to call from every ASP.NET page that makes use of PNG images like:

//Fix PNG bug of MSIE
FixMSIEPNGBug(this);

The method below will scan the entire page recursivly for Images and will add the MSIE fix for properly showing the PNG image.

Note that there are minor 3 points here :

• this method requires the use of webcontrols, so it will ignore any traditional HTML IMG tags
• You need to have an image called spacer.png, which is 1 pixel large PNG-8 image containing binary transparency (which MSIE does support).
• All your image tags that display a PNG image should have a height and width attribute set. Otherwise the PNG images will dissapear from the screen.

private void FixMSIEPNGBug(Control parent)
{
    if (Request.Browser.Type.ToUpper().IndexOf("IE") >= 0)
    {
        foreach(Control ctrl in parent.Controls)
        {
            if (ctrl is System.Web.UI.WebControls.Image)
            {
                System.Web.UI.WebControls.Image img = ctrl as System.Web.UI.WebControls.Image;
                if (img.ImageUrl.ToUpper().EndsWith("PNG"))
                {
                    img.Style["filter"] = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.ImageUrl + "', sizingMethod='scale');";
                    img.ImageUrl = "images/spacer.png";
                }
            }
           
            //Recurse
            FixMSIEPNGBug(ctrl);
        }
    }
}

- Erik

File Replacer

Introduction

I'm using a program that generates ASP.NET pages to manage my database. The program is great and it allows you to customize in some way the generation process. However, I did get stuck at a certain point and the only thing I could do is to change the generated files by hand. Off course, whenever I need to re-generate the pages, I need to apply the same changes manually again. Since I'm in the IT business, I solve this by looking for an application on the internet to do some content replacement on a number of files. I found some usefull applications but nothing that fit my requirements, so, opened up Visual Studio and 2 hours later I'm writing this article.

Details

This is what I needed:

• Replace content of files based on regular expressions
• Some flexibility on what to look for and the replacement value
• The possibility to automate this replacement step

So I started to write a console application that accepts arguments, because this fits best when you want to automate things. Secondly I used an xml file to store the definitions of the search and replacement values.

The following picture displays the use of the parameters of the filereplacer.exe

You can run the application with the -s option which indicate to scan instead of actually perform the replacements. When you run the filereplacer you get something like:

Last but not least I show you the layout of the XML definition file.

xml version="1.0" encoding="utf-8"?>
<ArrayOfDefinition xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <Definition>
    <Pattern>\#\#FP\#\#(?:\w|\=|\.|\/|\&|\*|\;|\s)*\#\#Pattern>
    <Replacement />
    <Count>-1Count>
    <StartAt>0StartAt>
  Definition>
ArrayOfDefinition>

Notes:

• You need to take the rules of XML into account, meaning you should type & instead of just &.
• An option not displayed in the help is -c which creates an example definition file at the location specified by the -d:<definitionFile> option

You can dowload the complete Visual Studio project here

- Erik

ASP.NET File & Image Picker - Part II

[Read part I here]

When implementing the File Picker into one of my ongoing projects, I discovered that there was some room for improvement. So, here are some changes:

• Extended the test page with additional parameters (see Image 1)
• Added two parameters:
  • shortFileNameSize: (default=15) Indicates how many letters are being used in the short form of a file name. you can recognize this short file name by the elipse in front of it. Example "...cutive report.doc"
  • showDebugInfo: (default=false) When true an extra box with debug info is shown at the top of the lookup screen, see Image 2 for an example.
• some minor bugfixes
  

- Erik

ASP.NET File & Image Picker

Introduction

Have you ever created a website where you needed to fill in a textbox a name of a server based file? Well, basically you can solve this in a few ways. Either you don’t provide anything and assume the user knows the name of the file and he types it in directly.

Alternatively, you could provide the end user with a combo box that is filled with all the files found in a specific server directory. This is off course more convenient for the end user unless, there are thousand of files which would make the combo box user unfriendly.

A third option is to use a lookup facility that would popup an extra screen where the user could search and browse for files. And when the right file is found he would just have to select it and done.

Still interested? Read on …

Details

We created a “File Selector” which offers a lookup for any file type. Whenever the file is an Image (jpg, gif, bmp, png) it will show a thumbnail of that Image for better visibility. When it is a non image file, it will display an icon representing the file type (xls, ppt, pdf, avi, mpg, xsl, xml). Off course you can add your own icons for other file types.

[Image 1: Open the lookup screen]

[Image 2: Select the image]
<image2>

[Image 3: The file name is inserted into the appropriate control]
<image3>

Required code

In order to use it, you need a control capable of containing text (for example a textbox HTML control) and a button to open the lookup.

<input type="text" id="txtImage"/>
<input type="button" id="btnGetFileName" onClick="GetFile();" value="..."/>

When the user clicks on the button the following java script is executed to pop up the lookup screen:

<script language="javascript">

      function GetFile()
      {
            var control = "txtImage";
            var virtualPath = "images/products";
            var fileExt= "*.jpg;*.gif;*.bmp;*.doc;*.xls;*.pdf";
            var cols = 5;
            var rows = 3:
            var showImages = true;
            var showFileNames = true;
            var url = "FilePicker.aspx?control=" + control + "&virtualPath=" + virtualPath + "&fileExt=" + fileExt + "&cols=" + cols + "&rows=" + rows + "&showImages=" + showImages + "&showFileNames=" + showFileNames;
            var windowOptions = "height=600px; width=600px; resizable=no; scrollbars=no; status=no; titlebar=no";

            window.open(url, "FileSelector", windowOptions)
      }
//-->
script>

When calling the FilePicker.aspx page, the following parameters can be provided in the querystring:

Note that the file extension and search criteria are combined as follow:

* for example

fileExt = “*.jpg; *.gif”

srch = “statistics”

would result into all files that match one of the following criteria:

*statistics*.jpg or *statistics*.gif

The ASP.NET (C#) project can be downloaded here

- Erik