C# 4 and .NET 4

User and Custom Controls ❘ 1187
a simple User Control
In Visual Studio, create a new empty web site called PCSUserCWebApp1 in the directory C:\ProCSharp\
Chapter41 . After the web site has been generated, select the Website ➪ Add New Item ... menu option and
add a Web User Control called PCSUserC1.ascx .
The fi les added to your project, with the extensions .ascx and .ascx.cs , work in a very similar way to the
.aspx fi les that you have seen already. The .ascx fi le contains your ASP.NET code and looks very similar
to a normal .aspx fi le. The .ascx.cs fi le is your code - behind fi le, which defi nes custom code for the user
control, much in the same way that forms are extended by .aspx.cs fi les.
The .ascx fi les can be viewed in Design or Source view, just like .aspx fi les. Looking at the fi le in Source
view reveals an important difference: there is no HTML code present, and in particular no element.
This is because user controls are inserted inside ASP.NET forms in other fi les and so don ’ t need a
tag of their own. The generated code is as follows:
< %@ Control Language="C#" AutoEventWireup="true" CodeFile="PCSUserC1.ascx.cs"
Inherits="PCSUserC1" % >
code snippet PCSUserCWebApp1/PCSUserC1.ascx
This is very similar to the < %@ Page % > directive generated in .aspx fi les, except that Control is specifi ed
rather than Page . The CodeFile attribute specifi es the code - behind fi le and Inherits specifi es the class
defi ned in the code - behind fi le from which the page inherits. The code in the .ascx.cs fi le contains, as
in auto - generated .aspx.cs fi les, a class defi nition that is empty apart from a Page_Load() event
handler method.
Your simple control will be one that displays a graphic corresponding to one of the four standard suits
in cards (club, diamond, heart, or spade). The graphics required for this were shipped as part of a
previous version of Visual Studio; you can fi nd them in the downloadable code for this chapter, in the
CardSuitImages directory, with the fi lenames CLUB.BMP , DIAMOND.BMP , HEART.BMP , and SPADE.BMP . Copy
these fi les into a new Images subdirectory of your project ’ s directory, so that you can use them in a moment.
If you do not have access to this download, you can use any images you like for this example because they
are not important to the functionality of the code.
Note that unlike earlier versions of Visual Studio, changes you make to the web site
structure outside of Visual Studio are automatically refl ected in the IDE. You have to
hit the refresh button in the Solution Explorer window, but you should see the new
Images directory and bitmap fi les appear automatically.
Adding Content to the Control
Now add some code to your new control. In the HTML view of PCSUserC1.ascx , add the following:
www.it-ebooks.info