Creating a Custom Control of Our Own

I l @ ve RuBoard

As usual, we'll start with the obligatory Hello World example. In this case we're going to create a custom control that does nothing more than output the text "Hello World". We will see shortly how we can do this by inheriting from existing controls, such as the Label , but for now, we will simply inherit from the base class Control . The source code for our control is listed in Listing 12.1.

Listing 12.1 A C# Hello World Control, HelloWorld.cs
 namespace ASPNETByExample {     public class HelloWorld : System.Web.UI.Control     {         protected override void Render(System.Web.UI.HtmlTextWriter htwOutput)         {             htwOutput.Write("Hello World");         }     } } 

Examining this code line-by-line , we see first that we have declared a namespace for our control, called ASPNETByExample . Within this namespace, we declare our class, HelloWorld , which inherits from the System.Web.UI.Control class. This allows us to use all the methods and properties that the Control class makes available to us, one of which is the Render() method. Since we want to control the output of our control ourselves , we override the Render() method with our own declaration, which we define with the same parameters as the Control.Render() method. In this case, the method takes a single parameter, a reference to an HtmlTextWriter object, called htwOutput . This object is used to output HTML to the Response stream, which in turn is sent to the user 's browser. The method that we're most concerned with is the Write() method, which we have used here to output the text "Hello World".


One of the great benefits of using custom controls is the ability to customize the output based on the client's browser. You can use the Page.Request.Browser class's properties to determine if the current browser supports a particular feature. For example, to test if the browser supports JavaScript, you could use this code:

 if (Page.Request.Browser.JavaScript)     // Do something requiring JavaScript else 

// Don't use Javascript

Having written our control, we must now compile it into an assembly, copy the assembly to the /bin folder of our Web application, reference the assembly on one of our ASP.NET pages, and finally place an element on the page where we want our control rendered. That's a seemingly daunting amount of work, especially compared to the amount of effort needed to access a user control to do the same thing. Let's take a look at what's involved, first with the command line and then with Visual Studio.NET.

Command Line Building and Deployment

To build our control, we will use the csc command ( vbc if you are using the .vb file from the Web site). These programs can be found in the %SystemRoot%\Microsoft.NET\Framework\v1.0.2914 directory (note that for the release of .NET, the v1.0.2914 will probably change). The %SystemRoot% variable is just the drive letter that your operating system is installed on, and will usually be C. So, assuming that you've found the csc.exe (vbc.exe) file, you can compile the HelloWorld.cs file into an assembly called HelloWorld.dll with the following command:

 csc /t:library /out:HelloWorld.dll HelloWorld.cs 

This results in the file, HelloWorld.dll, being created in the same directory as our HelloWorld.cs source file. To use this assembly in an ASP.NET application, we need to copy it to the Web application's folder on the hard drive, and place it in a folder called bin within the Web's folder.

Visual Studio.NET Building and Deployment

To build the control using Visual Studio.NET, we need to perform the following steps. First, we must create a new project for this control.

  1. Open VS.NET and select New Project from the Start Page.

  2. Under the Visual C# Projects tab, choose a Class Library template, and name it HelloWorld .

  3. Click OK and wait while VS.NET sets up the project.

    By default, VS.NET starts with a class named Class1.cs. Obviously, we don't want a class named Class1.cs.

  4. In the Solution Explorer, right-click the Class1.cs file, choose Rename, and name it HelloWorld.cs.

  5. Delete the contents of the file and replace them with the code in Listing 12.1.

    Now we're almost ready to build the file. However, since we are using the System.Web.UI.Control object in our class, we need to add a reference to the System.Web namespace to our project.

  6. In the Solution Explorer, right-click on References and then select Add Reference.

  7. In the .NET tab, scroll down to the System.Web.dll Component, choose Select and then click OK.

    You should see System.Web listed in the References tab under Solution Explorer now. You're now ready to build the project.

  8. Choose Build, and then select Build (or use the hotkey Ctrl+Shift+B, which is much faster).

    In the Output window, you should see this if your build was successful:

  ---------------------- Done ----------------------     Build: 1 succeeded, 0 failed, 0 skipped 

Your assembly will be in your project's bin folder, and by default should be named HelloWorld.dll. To use this assembly in your ASP.NET application, you will need to copy it to the Web's bin folder.

Referencing the Control from ASP.NET

Now that you've built your control and copied it to your Web application's bin folder, you're ready to access it from an ASP.NET page. To do this, we need to add a directive to the top of the page similar to how we set up a page to use a user control. For this control, we will use the following page directive:

 <%@ Register TagPrefix="Hello" Namespace="ASPNETByExample" Assembly="HelloWorld" %> 

This directive tells the ASP.NET compiler that, whenever it sees a control with a tag prefix of "Hello", it should look for the corresponding control in the ASPNETByExample namespace found in the HelloWorld assembly. Note that you do not need to have a separate Register tag for every control you want to use on a page, unless they are all in different assemblies and namespaces. You could put a whole suite of control in a single namespace and assembly, and have access to all these controls using just one Register directive. The complete source code for our ASP.NET page is shown in Listing 12.2 below.

Listing 12.2 HelloControl.aspx
 <%@ Register TagPrefix="Hello" Namespace="ASPNETByExample"  Assembly="HelloWorld" %> <html>     <body>         <Hello:HelloWorld runat="server" />     </body> </html> 

That's it. Note that, as with all ASP.NET controls, you need to be sure that you add the Runat="server" tag to the control's declaration. When you view this page, you'll see a blank Web page with just the words "Hello World". You can see this example live at this book's supporting Web site, found at:

I l @ ve RuBoard

Asp. Net. By Example
ASP.NET by Example
ISBN: 0789725622
EAN: 2147483647
Year: 2001
Pages: 154

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: