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]

Here’s an image to demonstrate what I mean:

(This image is borrowed from SharpSpell, but you get the point)

Overview

The .NET framework provides means to subclass native Win32 windows and controls by inheriting from the NativeWindow class.

This is exactly what we need to do, and here is the basic outline of our inherited class:

using System; using System.Collections.Generic; using System.Text; using System.Windows.Forms; using System.Drawing; namespace CodedBlog { public class CustomPaintTextBox : NativeWindow { private TextBox parentTextBox; private Bitmap bitmap; private Graphics textBoxGraphics; private Graphics bufferGraphics; // this is where we intercept the Paint event for the TextBox at the OS level protected override void WndProc(ref Message m) { switch (m.Msg) { case 15: // this is the WM_PAINT message // invalidate the TextBox so that it gets refreshed properly parentTextBox.Invalidate(); // call the default win32 Paint method for the TextBox first base.WndProc(ref m); // now use our code to draw extra stuff over the TextBox this.CustomPaint(); break; default: base.WndProc(ref m); break; } } public CustomPaintTextBox(TextBox textBox) { this.parentTextBox = textBox; this.bitmap = new Bitmap(textBox.Width, textBox.Height); this.bufferGraphics = Graphics.FromImage(this.bitmap); this.bufferGraphics.Clip = new Region(textBox.ClientRectangle); this.textBoxGraphics = Graphics.FromHwnd(textBox.Handle); // Start receiving messages (make sure you call ReleaseHandle on Dispose): this.AssignHandle(textBox.Handle); } private void CustomPaint() { // code goes here, see below } } }

Now we need to write the custom paint routine. In order to draw underlines underneath words, we need to know where these words are in the first place. We can get these values using Win32 API functions.

I will not go into detail with these API functions because the code is pretty long and doesn’t make the object of this article. You can download the support class here: Native Win32 Methods for measuring text inside a TextBox (nativemethods.zip)

The custom paint method

This is the CustomPaint() method:

private void CustomPaint() { // get the index of the first visible line in the TextBox int curPos = TextBoxAPIHelper.GetFirstVisibleLine(textBox); curPos = TextBoxAPIHelper.GetLineIndex(textBox, curPos); // clear the graphics buffer bufferGraphics.Clear(Color.Transparent); // * Here’s where the magic happens // For simplicity we’ll just draw a line underneath a character range. // This will be from character 1 to character 5 in this sample. // You can of course modify this to underline specific words. Point start = TextBoxAPIHelper.PosFromChar(textBox, 1); Point end = TextBoxAPIHelper.PosFromChar(textBox, 5); // The position above now points to the top left corner of the character. // We need to account for the character height so the underlines go // to the right place. end.X += 1; start.Y += TextBoxAPIHelper.GetBaselineOffsetAtCharIndex(textBox, 1); end.Y += TextBoxAPIHelper.GetBaselineOffsetAtCharIndex(textBox, 5); // Draw the wavy underline. DrawWave(start, end); // Now we just draw our internal buffer on top of the TextBox. // Everything should be at the right place. textBoxGraphics.DrawImageUnscaled(bitmap, 0, 0); }

We use the DrawWave() method to draw a wavy line (zig-zag) from one point to another – you can customize it to your needs:

private void DrawWave(Point start, Point end) { Pen pen = Pens.Red; if ((end.X – start.X) > 4) { ArrayList pl = new ArrayList(); for (int i = start.X; i <= (end.X – 2); i += 4) { pl.Add(new Point(i, start.Y)); pl.Add(new Point(i + 2, start.Y + 2)); } Point [] p = (Point[])pl.ToArray(typeof(Point)); bufferGraphics.DrawLines(pen, p); } else { bufferGraphics.DrawLine(pen, start, end); } }

Now to use this class, you just need to instantiate it by passing a TextBox control to the constructor. Make sure you keep a reference to it at the module level so it doesn’t get eaten by the Garbage Collector.

CustomPaintTextBox customUnderlines = new CustomPaintTextBox(textBox1);

I haven’t really tested this stripped out version of the class, but it should work. Most of it is taken directly from the SharpSpell source code.

I hope this article helps you understand how to owner draw native Win32 controls using the .NET framework. If you have any questions please leave a comment.

[tags]Windows.Forms, C#, User Interface, .NET Framework, Win32[/tags]

These stats were then made available in real-time on a web-site written in C# and ASP.NET.

Before Remoting

For the first version of the application, the web-site and Windows Service were completely independent. The web-site would just query the database and determine, or make a best guess about what was going on inside the Windows Service at that exact time. This worked pretty good, and although the database is now about 1GB in size and growing fast, I optimized it good enough for this to work in real-time without a hitch.

There was some caching going on, thanks to the OutputCache directive in ASP.NET, but surprisingly enough there were no performance issues.

After Remoting

All right, so because I needed to display some extra information about ‘online’ users, that the Windows Service knew about, but the database didn’t, I decided to have a look at .NET Remoting. This was my first time working with it.

These were the issues I experienced (as a Remoting newbie) when rewriting the Windows Service to be accessible via .NET Remoting:

1. The actual functionality of the Windows Service had to be moved to a separate Class Library (.DLL).
   If you wrote your Windows Service all in one .EXE you will have to move it out to DLLs. Ideally you would have a DLL for the actual functionality – let’s call this Business.dll -, and another DLL for the Remoting methods and objects – Remoting.dll. You then create wrapper methods and objects in Remoting.dll which delegate work to Business.dll.

   The reason you have to do this is that the ASP.NET web-site will need to know which methods and objects are available via Remoting, and how to access them. All you have to do now is add a reference to Remoting.dll inside the ASP.NET web-site.

   This would have actually been a good design decision in the first place, because the Firewall on the server that was running the Windows Service kept complaining about changes to the Service’s .EXE each time I updated and restarted it. After moving the code out to a DLL, the complaints stopped because the .EXE was just a wrapper and it wasn’t changed any more.
   



2. The Remoting Wrapper.
   Now you can create wrapper methods around Business.dll in the Remoting.dll Class Library. To enable remoting, you will need to create a class that inherits from MarshalByRefObject . I’ll supply a code sample for clarity:

   public class FragRankRemoting : MarshalByRefObject { public List<PlayerData> GetOnlinePlayers() { List<PlayerData> list = new List<PlayerData>(); foreach (Server s in ServerController.Servers.Values) { foreach (Player p in s.Players.Values) { list.Add(p.PlayerData); } } return list; } }

   This is actual code from a real application, but it should help you get started.



3. Using IpcChannel for Remoting.
   Because the Windows Service and Web Site were hosted on the same computer, I decided that the best Remoting channel to use is IpcChannel (Inter-Process Communication channel via Named Pipes). The alternatives are TcpChannel and HttpChannel, which I would recommend for situations where the service and web site are not on the same computer.

   The problem with IpcChannel is that it requires both the Windows User Account that is running the Windows Service, and the User Account that is running ASP.NET to be under the same User Group, otherwise you will get the following error:
   RemotingException: Failed to connect to an IPC Port: Access is denied.

   If you have complete control over the system and are certain that no other applications can interact with your service, you can work around this security measure by allowing users in the “Everyone” Group to access the IpcChannel. Here’s how to do it:

   Dictionary<string, string> props = new Dictionary<string, string>(); props.Add(“authorizedGroup”, “Everyone”); props.Add(“portName”, “FragRankChannel”); props.Add(“exclusiveAddressUse”, “false”); IpcChannel channel; try { channel = new IpcChannel(props, null, null); ChannelServices.RegisterChannel(channel, false); } catch { }
   Notice the exclusiveAddressUse property. I needed to add this due to intermittent problems which occured when the service crashed during debugging, and the Remoting channel didn’t get properly closed.
   



4. Connecting to the Service from ASP.NET
   In order to connect to the service in ASP.NET via Remoting you will have to create an .XML file with the following contents (this can also go in your Web.config if you want):

   <?xml version="1.0"?> <configuration> <system.runtime.remoting> <application> <client> <wellknown type=”fragrank.FragRankRemoting,FragRankLogic” url=”ipc://FragRankChannel/FragRank” /> </client> <channels> <channel ref="ipc" authorizedGroup="Everyone"> <clientProviders> <formatter ref="binary"/> </clientProviders> </channel> </channels> </application> </system.runtime.remoting> </configuration>

   All you have to do now is let the Remoting class know about your configuration file and you can start using it! It’s as easy as:

   try { // you only need to call this once for the whole life-time // of your application, any subsequent calls will result in an error // // please replace this try/catch block with a more // elegant solution in your application RemotingConfiguration.Configure(Server.MapPath(”.”) + ”\\web.config”, false); } catch { }</p> // now just instantiate your remote class FragRankRemoting r = new FragRankRemoting(); // and you can use it just like any other class, even if it is hosted remotely List<PlayerData> playersAll = r.GetOnlinePlayers();

That’s it, the Windows Service and ASP.NET web-site are now communicating through Named Pipes.

[tags]Windows Service, Remoting, .NET, C#, IpcChannel, Named Pipes, ASP.NET, IPC[/tags]

First of all, if you don’t know what Google Web Toolkit is, here’s a quickie: it is a framework for creating Web 2.0 AJAX Web Applications using the Java language, preferably inside an Integrated Development Environment (IDE) such as Eclipse. You then compile this from Java to HTML/JavaScript using the provided tools, and you have a desktop application-like web-page without knowing anything about the W3C DOM, HTML or JavaScript.

What does this have to do with C#?

Well, don’t get me wrong, the ASP.NET AJAX Toolkit is amazing, but being able to visually design a page and use JavaScript behaviors and AJAX from inside an IDE is a step forward.

It seems that Nikhil Kothari from Microsoft is working on a C# to JavaScript compiler, called Script#, as a side project of his. Unfortunately, Script# is not currently supported by Microsoft, and they are really losing ground on the AJAX field because of this. They should promote this to a corporate project, I would love having that same power that GWT has, but directly in the Visual Studio IDE.

Most would argue that AJAX.NET is enough, and they are right, it’s ok for most sites, but for a fully interactive Web application that doesn’t have to postback to the server for every single user interaction – it isn’t. Not if you don’t want to mess with JavaScript anyway.

Script# helps in this regard, but GWT is much more powerful, and writing a RPC web-service in C#/ASP.NET that Google Web Toolkit can use shouldn’t be too hard. I’ll post my findings on this topic in a future post.

Stay tuned!

[tags]Google, Google Web Toolkit, C#, ASP.NET, Script#[/tags]

The theme has one flaw:

While I’m pretty sure that back in 2005 screen resolutions such as 800×600 were still common, in today’s world the theme is just too narrow for a big screen display, and too much space is lost.

This is especially a problem with a blog such as mine because I frequently use code samples, and lines can get pretty long.

My update:

So, I decided to keep the theme, but I modified it to make it exactly 200 pixels wider. I also added a Latest Posts display to the right navigation bar to improve the overall usability, and more importantly: Widget Support

Downloading the theme:

If you want to use the theme you can download it from here: Green Marinee Wide WordPress Theme

[tags]WordPress, WordPress Theme, Green Marinee[/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]

The trick is to try to replicate the content of the TextArea as best as possible using a DIV that is positioned directly underneath the textbox. The TextArea’s background is then set to transparent, and the DIV shows up through it.

We then send the text in the TEXTAREA to the server using AJAX calls, retrieve misspellings and suggestions, and we then recreate the DIV on the client using CSS to display the underlines.

[tags]SharpSpell, Spell Checker, JavaScript, AJAX[/tags]

Since everyone seems to be doing it ¹, I decided to start my own blog to write about my day to day experiences with web development and programming.

¹. yes, I realize that I’m starting way too late on the blogging phenomenon timeline, but better late than never right ² ?
². what better way to start a blog than with a cliché?

Who am I?

My name is Andrei Alecu and I’m a C# developer with over 5 years of experience in .NET, owner and lead developer of Tachyon Labs, a company that started as an outsourcing studio but later developed as a .NET component developer and web development company. Tachyon Labs is also the company behind SharpSpell, a real-time spell checker control for ASP.NET and WinForms.

We ³ first launched SharpSpell back in 2004, and I was the sole developer of my company back then. The thing about SharpSpell was that it was the first real-time wavy underline spell checker for the Web.

This amazing ⁴ functionality was actually implemented by chance. I was approached by Dave Frank of the Best of the Web directory, looking to buy a spell check product for their administrative back-end. He eventually suggested that a real-time spell check function like in Microsoft Word would add huge value to the product, but in my own mind I thought something like that would never be possible using pure HTML and JavaScript in a web-browser. Flash maybe, but pure HTML never.

After a couple of months of work, I managed to get the first working version of a wavy underline spell checker using JavaScript and Internet Explorer’s DOM model. The code was really messy, but the tech demo made a great impact on the community and I received many words of praise from both interested parties and random people thinking how cool it was.

Since then the component was rewritten several times, and is now at a state where I could safely say, without false modesty, that it is the most technologically advanced spell check component on the market.

Over the following blog posts I’ll describe how I managed to overcome the obstacles I came across when first writing SharpSpell, and other development experiences and setbacks I came across.

³. I
⁴. It was definitely “amazing” back then, when AJAX was just a term you heard about in technology news feeds, but there weren’t many concrete examples of what it was and did.