ASP.NET Custom Server Controls: Extended Wordhack Control with Key Combination

The sample downloadable solution (zip) is entirely developed using Visual Studio.NET 2003 Enterprise Architect on Windows Server 2003 Standard Edition.  But, I am confident that it would work with other versions of Windows (which support .NET 1.1) as well.

What are the new properties?

Since I already explained the “WordHack” control in my previous article, I don’t want to tell stories any more (as I injected a story of mine in my previous article).  Coming straight to the point, the previous control works fine for only a single “WordHack.”  But it doesn’t work for more than one “WordHack."  You might also wonder “why don’t you support special keys (like combinations using the “Ctrl” key) within the WordHack?”

Before you ask those questions, I am enhancing the previous control with this new updated one, which supports any number of “WordHacks” in your web page.  So, let us start with our new updated control.

Apart from some of the properties (like isDesignTime(), Word2Hack(), RedirectURL() and so on) in my previous article, I have added one more new property as follows:

The above is the main important property which is used to maintain an “Order of Preference” (something like a serial number starting from 0).  Why is this property necessary?  If we want to hack three words, which one comes first?  That is why I use the “OrderOfPreference” property. 

The “OrderOfPreference” for the first control (or instance) should always be 0 and contine increasing (with the only interval being one) for each new instance of the same control, if they are on the same web page.  This creates an index of all words (or characters) to be hacked, and I conquer them in JavaScript.

Did any Attributes change from the previous article?

Yes. The “AddAttributesToRender” method is a bit different from my previous article, since now it has to register two JavaScripts (rather than a single one, as in my previous article).  Let us examine the following script.

If you carefully observe, “getJS4WordHack” will be common for all controls (or instances) and gets emitted only once, but “getJS4WordParam” will be different for each instance (which we will see in later sections) and gets emitted differently for each instance.  The “Render” method will be identical to that of the one I mentioned in my previous article, which calls the above “AddAttributesToRender” method.

Did any JavaScripts change from the previous article?

Yes. The JavaScripts are different from those available in my previous article.  Now we shall go through the method “getJS4WordHack”.  First of all, you should understand that the following JavaScript code will be common to every instance of the same control.

This is quite different from my previous article.  Within the above JavaScript, I declared and utilized arrays to handle a greater number of words to hack.  Every key (or character) pressed will also be stored in a separate array with exactly the same index of other arrays.  In that way, every word will have its own key presses!  Finally, I am using a loop to go through all the words which are supposed to be hacked for every key press.  If any of the words match, I immediately redirect to a specific URL (which is also an array) with exactly the same index as that of the matched word.

Now coming to another concept, how am I adding elements to the JavaScript array?  I implemented that by using the following JavaScript (which is available in “getJS4WordParam”):

The above JavaScript gets emitted, differently, for every instance of the control.  The previous JavaScript was emitted only once per any number of instances.  Coming to the above Javascript, the value within the property “OrderOfPreference” becomes the index of three arrays, namely “SpecialWord”, ”SpecialUrl” and “SpecialLetter”.

Combining with the “Ctrl” key!

Until now, it has all worked very well.  But what about supporting special keys in our web page?  Perhaps we want “Ctrl+y” to go to www.yahoo.com, “Ctrl+g” to go to www.google.com, and so forth. Can we hack those as well?  Why not? 

Within my downloadable solution, I created a new control (apart from “WordHack”) called “CharacterHack”, as part of the same assembly.  It is a totally different class with its own designer class.  It is almost similar to the above “WorkHack” control, except with a few additions and modifications. 

I changed the renamed “Word2Hack” property to “Character2Hack” property (accordingly in content as well).  The other properties would be the same.  The “Render” method would also be same.  Notice also that “getJS4WordHack” and “getJS4WordParam” have been renamed to “getJS4CharacterHack” and “getJS4CharacterParam” (and accordingly in “AddAttributesToRender” method).

I added (or replaced) the following statements to the above JavaScripts at appropriate locations.

“event.ctrlKey” is a JavaScript statement which retrieves the status of the “ctrl” key press.  This is the heart of handling the “Ctrl” key. “event.keyCode+64” gives the proper ASCII value (for alphabets) when working with the “Ctrl” key.  All the above modifications are to “getJS4CharacterHack”.  And there really exists only one additional statement for “getJS4CharacterParam” as follows:

js &= "SpecialCtrlStatus[" & Val(Me.OrderOfPreference) & "]
=true;"

Apart from the above modifications (to support the “Ctrl” key), all of the rest would be the same as “WordHack” control. 

Summary

To work with my demonstration, you need to download my sample zip file, available from a link on the first page of this article.  The zip contains a solution with two web forms. The first works with the “WordHack” control and the second with the “CharacterHack” control.  You can test the functionality of those controls by executing the solution (with WebForm1.aspx as the start page) and just typing any of the following words blindly (with or without focus on the textbox also):

• Yahoo
• Hotmail
• Google

And it would automatically redirect to the specific web site you typed.  Execute the solution again (with WebForm2.aspx as start page) and just press “Ctrl+g” (for google) or “Ctrl+y” (for yahoo).

Coming to the pros and cons of this control, you should keep in mind the following issues, before you start enhancing (or using) the control.

• You need to test with all the popular browsers you consider important (as I meant this control only for Internet Explorer 6.0 +) and modify accordingly.
• The “CharacterHack” control currently works with only alphabets.  If you need to work with digits (say “Ctrl+9” etc), you need to work with the ASCII values of that criteria.
• We will not be able to hack (using the “CharacterHack” control) certain control characters which are managed by the browser environment (for instance, “Ctrl+N” cannot be hacked as it would open new window).
• You can also support the functionality of the “Shift” and “Alt” keys with the “CharacterHack” control using “event.shiftKey” or “event.altKey” within your JavaScript.
• You can even write better JavaScript to eliminate the property “OrderOfPreference” by maintaining your own internal indexing. But you would need to understand the flow of rendering and JavaScript injection wherever possible.  If you are new to rendering, you can follow my article “Breaking the Secrets of Rendering” within the same series.

That finishes our matter.  Please understand that all of the ASP.NET controls (in this series) have been tested only with Internet Explorer 6.0.  I request that you make the necessary modifications to suit your needs of cross browser compatibility. I leave it to the developers to further enhance this control.  The areas of improvement would include better eventing, better JavaScript, cross browser support,and so on. Good luck.

Any comments, suggestions, bugs, errors, feedback etc. are highly appreciated at jag_chat@yahoo.com.