We thought it would be cool if we used the AJAX Toolkit ValidatorCalloutExtender control on the validators to keep the validation inline and concise.

To quote from the AJAX Toolkit page:

ValidatorCallout is an ASP.NET AJAX extender that enhances the functionality of existing ASP.NET validators. To use this control, add an input field and a validator control as you normally would. Then add the ValidatorCallout and set its TargetControlID property to reference the validator control.

Because we had over 30 text fields, it would have been really tiresome to add extenders manually to each of the validators. So a way to attach them dynamically was needed.

Fortunately, this is pretty easy to do by iterating through the Page.Validators collection, dynamically creating ValidatorCalloutExtender controls and adding them to the Page.

Challenges

• The first problem I had was an error that occured when trying to dynamically add controls to the Page.Controls collection:

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

The error probably occurred because of the way I had the MasterPage set up. The solution, although more of a hack, was to add a PlaceHolder to the page and add my controls to it instead of the Page.Controls collection. I named it ValidatorsPlaceHolder (see below)

• Another problem was that the extender was being dynamically added to a different naming container than the target control, so it wouldn’t find it.

This lead to the following error:

Target control with ID 'XYZ' could not be found for extender...

The error is described in the AJAX Control Toolkit FAQ and the solution is to handle the ResolveControlID event and help it find the control it needs.

For this to work I needed to create an Extension method for the Page class that would find a control by ID by looking recursively through all of its children.

Here it is below:

namespace ExtensionMethods { public static class ExtensionMethods { public static Control FindControlRecursive(this Control root, string id) { if (root.ID == id) { return root; } foreach (Control c in root.Controls) { Control t = FindControlRecursive(c, id); if (t != null) { return t; } } return null; } } }

Usage: var myControl = Page.FindControlRecursive("MyControlsName1");

Now that this we got this out of the way, here’s the full code listing for the method that adds ValidatorCalloutExtenders to all of the validators.

Code Listing

protected void ExtendValidators() { ValidatorsPlaceHolder.Controls.Clear(); foreach (Control ctl in Page.Validators) { if (ctl is RequiredFieldValidator) { var validatorCtl = (RequiredFieldValidator)ctl; validatorCtl.Display = ValidatorDisplay.None; validatorCtl.SetFocusOnError = true; } else if (ctl is CompareValidator) { var validatorCtl = (CompareValidator)ctl; validatorCtl.Display = ValidatorDisplay.None; validatorCtl.SetFocusOnError = true; } else if (ctl is RegularExpressionValidator) { var validatorCtl = (RegularExpressionValidator)ctl; validatorCtl.Display = ValidatorDisplay.None; validatorCtl.SetFocusOnError = true; } if (!String.IsNullOrEmpty(ctl.ID)) { var valExtender = new ValidatorCalloutExtender(); valExtender.TargetControlID = ctl.ID; valExtender.ID = ctl.ID + ”_ValExtender”; valExtender.ResolveControlID += ((sender, e) => e.Control = Page.FindControlRecursive(e.ControlID)); ValidatorsPlaceHolder.Controls.Add(valExtender); } } }

Notice the .ResolveControlID event handler written as a lambda. It uses the FindControlRecursive extension method shown above to help the Extender find the target control, because it will not be able to do it by itself.

In order to get accomplish this, you have to calculate the center point and zoom level manually via code. Fortunately this is pretty easy to do, you just need to calculate the minimum and maximum latitude/longitude of all of your markers and then get the center point of the resulting area (which will be a rectangle).

I’m using the Google Maps for ASP.NET control by Subgurim, but this method should apply to any other control, and should even work with plain JavaScript.

Auto center

First, you will need to find out the min/max latitude and longitude for your markers, this can usually be done in one pass at the same time as you add them. Here’s some Visual Basic.NET code to help you out (I’m using VB.NET for this project at the request of my collaborator, but it should be easy to convert to C# – think of it as pseudo code):

Dim minLongitude As Single = Nothing Dim maxLongitude As Single = Nothing Dim minLatitude As Single = Nothing Dim maxLatitude As Single = Nothing ’ ’ add markers For i As Integer = 0 To dataSet.Tables(0).Rows.Count – 1 Dim glatlng As New GLatLng glatlng.lat = dataSet.Tables(0).Rows(i).Item(“latitude”) glatlng.lng = dataSet.Tables(0).Rows(i).Item(“longitude”) ’ ’ First time initialization of the variables If minLongitude = Nothing Then minLongitude = glatlng.lng If maxLongitude = Nothing Then maxLongitude = glatlng.lng If minLatitude = Nothing Then minLatitude = glatlng.lat If maxLatitude = Nothing Then maxLatitude = glatlng.lat ’ minLongitude = Math.Min(minLongitude, glatlng.lng) maxLongitude = Math.Max(maxLongitude, glatlng.lng) minLatitude = Math.Min(minLatitude, glatlng.lat) maxLatitude = Math.Max(maxLatitude, glatlng.lat) ’ ’ Other code here… Next

You then just need to calculate the center point of the resulting area. This is as easy as:

centerLatitude = minLatitude + (maxLatitude – minLatitude) / 2 centerLongitude = minLongitude + (maxLongitude – minLongitude) / 2

You can now center your map widget to these coordinates.

Auto zoom

The auto zoom part is where it gets a little tricky. In my application I’m calculating the distance in miles from the minLatitude, minLongitude coordinate to the maxLatitude, maxLongitude coordinate.

The formula for calculating the distance in miles between two coordinates is:

        miles = (3958.75 * Math.Acos(Math.Sin(latitude1 / 57.2958) * Math.Sin(latitude2 / 57.2958) + Math.Cos(latitude1 / 57.2958) * Math.Cos(latitude2 / 57.2958) * Math.Cos(longitude2 / 57.2958 - longitude1 / 57.2958)))

By calculating how many miles your markers span, you can make an informed guess on which zoom level to use. For instance, if the distance between the furthest two markers is less than 0.2 miles, then you could use the maximum zoom level available—which is 16 by the way—; if the distance is more than 0.2 miles and less than 0.5 miles—use zoom level 15, and so on.

Here’s a list of zoom levels for distances up to 15 miles:

Select Case miles Case Is < 0.2 GMap1.GZoom = 16 Case Is < 0.5 GMap1.GZoom = 15 Case Is < 1 GMap1.GZoom = 14 Case Is < 2 GMap1.GZoom = 13 Case Is < 3 GMap1.GZoom = 12 Case Is < 7 GMap1.GZoom = 11 Case Is < 15 GMap1.GZoom = 10 Case Else GMap1.GZoom = 9 End Select

That’s it, your map should now be able to auto zoom and auto center itself on your markers!

[tags]Google Maps API, Visual Basic.NET[/tags]

There is apparently no easy way to generate a transparent GIF image using the .NET framework. Microsoft provided a method in the Bitmap class called MakeTransparent() but it doesn’t work for GIFs, it only seems to work for PNGs.

To create a transparent GIF you need to recreate the color table of the image using Imaging APIs, as detailed in this KB article . Unfortunately, this can be pretty slow for an ASP.NET Web application, and it has a lot of overhead, so I needed an alternative.

Solution:

The alternative is to alter the color table directly using the GIF specification. To implement this, I needed to save the non-transparent GIF to a MemoryStream, and then go through the binary data, updating the color table with the new transparency bits.

The original code for this function is not my own, I have found it somewhere on the Internet and modified it. Unfortunately I can’t remember where I found it, so I can’t give credit, but if you know the original author please add a comment.

Source:

/// <summary> /// Returns a transparent background GIF image from the specified Bitmap. /// </summary> /// <param name="bitmap">The Bitmap to make transparent.</param> /// <param name="color">The Color to make transparent.</param> /// <returns>New Bitmap containing a transparent background gif.</returns> public Bitmap MakeTransparentGif(Bitmap bitmap, Color color) { byte R = color.R; byte G = color.G; byte B = color.B;</p> MemoryStream fin = new MemoryStream(); bitmap.Save(fin, System.Drawing.Imaging.ImageFormat.Gif); MemoryStream fout = new MemoryStream((int)fin.Length); int count = 0; byte[] buf = new byte[256]; byte transparentIdx = 0; fin.Seek(0, SeekOrigin.Begin); //header count = fin.Read(buf, 0, 13); if ((buf[0] != 71) || (buf[1] != 73) || (buf[2] != 70)) return null; //GIF fout.Write(buf, 0, 13); int i = 0; if ((buf[10] & 0×80) > 0) { i = 1 << ((buf[10] & 7) + 1) == 256 ? 256 : 0; } for (; i != 0; i—) { fin.Read(buf, 0, 3); if ((buf[0] == R) && (buf[1] == G) && (buf[2] == B)) { transparentIdx = (byte)(256 – i); } fout.Write(buf, 0, 3); } bool gcePresent = false; while (true) { fin.Read(buf, 0, 1); fout.Write(buf, 0, 1); if (buf[0] != 0×21) break; fin.Read(buf, 0, 1); fout.Write(buf, 0, 1); gcePresent = (buf[0] == 0xf9); while (true) { fin.Read(buf, 0, 1); fout.Write(buf, 0, 1); if (buf[0] == 0) break; count = buf[0]; if (fin.Read(buf, 0, count) != count) return null; if (gcePresent) { if (count == 4) { buf[0] |= 0×01; buf[3] = transparentIdx; } } fout.Write(buf, 0, count); } } while (count > 0) { count = fin.Read(buf, 0, 1); fout.Write(buf, 0, 1); } fin.Close(); fout.Flush(); return new Bitmap(fout); }

Download ASP.NET GIF Transparency Demo WebForm
[tags]C#, GIF, Transparent GIF, ASP.NET, Bitmap, System.Graphics[/tags]