Creating an ASP.NET Hangman Control

Sign in to queue


  In this post, Stephen Walther shows you how to create an ASP.NET Hangman control. This control contains embedded images, sounds, XML, and Javascript.
Steve's Blog

Difficulty: Easy
Time Required: Less than 1 hour
Cost: Free
Software: Visual Basic or Visual C# Express Editions,Visual Web Developer Express,
Download: Download

This month, we create an ASP.NET Hangman control. Our control will render all of the necessary images, sounds, and scripts to create a richly interactive hangman game (see Figure 1). Our control will work with the most recent versions of Microsoft Internet Explorer, Mozilla Firefox, and Opera.

We tackle several advanced features of the ASP.NET 2.0 framework in this article. You learn how to build custom controls that take advantage of Javascript. You also learn how to embed resources such as images, sound, and XML in an assembly. Finally, you learn how to write cross-browser compatible Javascript.

Using the Hangman Control

If you are anxious to start playing hangman, you can download the ZIP file that accompanies this article. Click the Download link above. The ZIP file contains two projects: the Visual Basic and the C# versions of the Hangman control. If you are interested in viewing or modifying the source code for the Hangman control, you can open the Visual Basic version with Microsoft Visual Basic 2005 Express Edition and the C# version with Microsoft C# 2005 Express Edition.

Here's how you use the Hangman control. Launch Visual Web Developer 2005 Express Edition and create a new website (select the menu option File, New Web Site). Next, add the control to your Toolbox by right-clicking beneath the General tab on your Toolbox and selecting the option Choose Items (see Figure 2). You must have a Web Form Page open in order to modify the Toolbox. 

Next, under the .NET Framework Components tab, click the Browse button and browse to the Hangman assembly (dll file). There is both a VB.NET and C# version of this file (it doesn't matter which version you use since you can use a control written in C# with a VB.NET website and a control written in VB.NET with a C# website). The files are located in the following subfolders:



Click OK a couple of times to close the dialog boxes and the Hangman control should now appear on your Toolbox.

After you have added to the Hangman control to your Toolbox, you can add the control to any page simply by dragging the control onto a Web Form Page in either Design or Source view. That's all there is to adding this control to a page.

The Hangman control includes a default set of words included in an embedded XML file (these words are intended to be hard). If you prefer, you can associate a custom list of words with the Hangman control by assigning the path of an XML file to the control's WordsUrl property. The XML file should have the following format:





The file can contain as many words as you please.

Creating a Custom Web Control

The Hangman control is implemented as a custom ASP.NET Web Control. In other words, the control is a class that derives from the base System.Web.UI.WebControls.WebControl class. The Hangman class overrides one method of the base class: the OnPreRender() method.

The Hangman control's OnPreRender() method loads the XML, Javascript, sound, and image files. All of these resources are loaded by using the Page.ClientScript.GetWebResourceUrl() method to retrieve a valid URL for the embedded resource.

Embedding Images, Sounds, XML, and Javascript

The Hangman control includes embedded image, sound, XML, and Javascript files. These resources are embedded in the same assembly (dll) as the control so that the control can be distributed with a single assembly.

There are three steps required for embedding a resource in an assembly:

1) Set the Build Action for the resource to the value Embedded Resource. You set the Build Action for a file by selecting the file, opening the Properties Window, and modifying the Build Action property.

2) Add a WebResource attribute to the AssemblyInfo file for each embedded resource. When working with Microsoft Visual Basic 2005 Express Edition, select the menu option Project, Show All Files and expand the My Project folder in the Solution Explorer Window to view the AssemblyInfo file. When working with Microsoft C# 2005 Express Edition, expand the Properties folder to view the AssemblyInfo file. You need to add the following attribute to embed an image resource named MyImage.gif:


<Assembly: WebResource("ProjectNamespace.MyImage.gif", "image/gif")>


[Assembly: WebResource("ProjectNamespace.MyImage.gif", "image/gif")]

By default, the ProjectNamespace will be the same as your project name. In the case of the Hangman project, the project namespace is Hangman.

3) Finally, in your code, you can retrieve a URL to an embedded resource by using the Page.ClientScript.GetWebResourceUrl() method. This method accepts two parameters: a type and a parameter name. Typically, you will pass the type of the current class and the name of the embedded resource. For example, you would use the following line of code to get the URL to an image named MyImage.gif located in the Hangman project:


Dim imageUrl As String = Page.ClientScript.GetWebResourceUrl( this.GetType(), “Hangman.MyImage.gif”)


string imageUrl = Page.ClientScript.GetWebResourceUrl( me.GetType(), “Hangman.MyImage.gif”);

Be aware that all resource names are case-sensitive -- even in the case of VB.NET. Make sure that you refer to the name of the resource in the same way with the file name, attribute, and GetWebResourceUrl() method.

Cross-Browser Javascript

All of the logic of the Hangman game is implemented in the Hangman.js Javascript file. When the control loads, the Javascript initializeGame() function is called and all of the game elements are created.

When you click a letter, the selectLetter() function is called. If a matching letter is found, the display of matching letters is updated. If a matching letter is not found, the badGuessCount variable is updated and the image of the hangman is updated as well.

If you win a game, the doWin() function is called and if you lose a game the doLose() function is called. Both functions play a sound and both functions display a link that enables you to restart the game.

All of the Javascript was written in a cross-browser compatible way. The Javascript code works with Microsoft Internet Explorer, Mozilla Firefox, and Opera. Therefore, the Hangman control works with all three browsers.


The biggest hurdle that I encountered while writing this control was getting the embedded resources to work. Once I resolved the namespace issues and got all of the case-sensitivity issues under control, everything worked out. I was very happy that I was able to get all of the resource (including the XML file with the list of words) embedded into one control.


Web, Puzzle

The Discussion

  • User profile image
    COMALite J

    Misleading title. The title of this was “Creating an ASP.NET Hangman Control.” Emphasis on “Creating.” As in, you tell us, step-by-step, how to create one from scratch. All you did was tell us how to use one you already built.

  • User profile image
  • User profile image

    I agree -- this needs to be re-labeled.  The suggestion would be that this was a step-by-step instruction.  I would either re-label this item, or re-create it and break it up into steps.  Just my thoughts.

  • User profile image

    That was a waste of my time less "tutorial" more "look what I made".

  • User profile image


    I did not understand how can  download the source code. At channel9 there is no link for download.

  • User profile image
    Holger Flick

    Compared to the Sudoku tutorial about WPF this one was not helpful at all as it basically gave no steps or information how the control was built.

  • User profile image
    Bharath Reddy VasiReddy

    I am new to this site, is this a fun wbe site....

  • User profile image

    I would like to use express to try out web pages but the ASP.NET Web Application icon in the New Project dialog box is not there.

    I tried alot of things but cannot get this to show up.


  • User profile image

    I was looking for a tutorial on how to embed resources. This was exactly what I needed! The download link is hard to see-there's a "[save]" in very small font under the picture

  • User profile image

    I new in this industry, so how to view a code.

  • User profile image

    @Nonhle, you can download the source code.  The link is at the top of the article.

  • User profile image

    I was looking forward to learning how to build a custom control. are there any articles of this sort??

  • User profile image

    @Ankesh, this article does use a control, but I will admit it is a poor example. may be better help

  • User profile image

    Well..i didn't understand any single word and although i tried to follow the steps but nothing went as planned to Tongue Out

    thanks for the hardwork TEAM !! (F) Tongue Out

  • User profile image

    I can't get it to work!!! it just comes up blank!

  • User profile image

    I understood how to do it, but I simply do not have the time. Is there any where to download the source code from??

  • User profile image

    @baby, sadly, this app doesn't give you a stock website to just run it BUT it does tell you how to get it to work in the article.

  • User profile image

    This article still needs more description

Add Your 2 Cents