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.

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]

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]