WindowsDevCenter.com
oreilly.comSafari Books Online.Conferences.

advertisement


AddThis Social Bookmark Button O'Reilly Book Excerpts: Programming ASP.NET

In Part 2 of this chapter from Programming ASP.NET, the authors describe how to program custom controls. Last week, part one focused on ASP.NET user controls.

Custom Controls

Related Reading

Programming ASP .NET
By Jesse Liberty, Dan Hurwitz

In addition to creating user controls, which are essentially reusable small web pages, you can also create your own compiled custom controls. There are three ways to create custom controls:

  • Create a derived custom control by deriving from an existing control.
  • Create a composite control by grouping existing controls together into a new compiled control.
  • Create a full custom control by deriving from System.Web.UI.WebControls.WebControl.

Composite controls are most similar to user controls. The key difference is that composite controls are compiled into a DLL and used as you would any server control.

To get started, you'll create a Web Control Library in which you'll create the various custom controls for this chapter. Open Visual Studio .NET and choose New Project. In the New Project Window, select either Visual C# Projects or Visual Basic Projects and create a Web Control Library called CustomControls, as shown in Figure 14-7.


Figure 14-7. Custom control New Project window

You'll notice that Visual Studio has created a complete custom control named WebCustomControl1. Before examining this control, create a Web Application to test it. From the File menu choose New Project (Ctrl-Shift-N) and create a project named CustomControlWebPage in the same directory. Be sure to choose the "Add to Solution" radio button, as shown in Figure 14-8.


Figure 14-8. Add custom control web page

You'll create a series of custom controls and test them from this application. Right-click on the CustomControls project to bring up the context menu, and choose Properties, as shown in Figure 14-9.


Figure 14-9. Choosing project properties

Choose the configuration properties and set the output path to the same directory as the test page, as shown in Figure 14-10.


Figure 14-10. Setting the output path

Normally, when you build a custom control you will copy the .DLL file to the \bin directory of the page that will test it. By setting the output to the \bin directory of your test page you will save that step and thus be able to test the control quickly.

The Default (Full) Custom Control

Visual Studio .NET has provided a custom control named WebCustomControl1, as we saw. This is a full custom control, derived from System.Web.UI.WebControls.WebControl. Even before you fully understand how this code works, you can test it in the test page you created. Open WebForm1.aspx and add a statement to register the new control:


<%@Register TagPrefix="OReilly"
Namespace="CustomControls" 
Assembly="CustomControls" %>

This registers the custom control with the web page, similar to how you registered the user control in Example 14-2. Once again you use the @Register tag and provide a tag prefix (OReilly). Rather than providing a Tagname and src, however, you provide a Namespace and Assembly, which uniquely identify the control and the DLL that the page must use.

You now add the control to the page. The two attributes you must set are the Runat attribute, which is needed for all server-side controls, and the Text attribute, which dictates how the control is displayed at runtime. The tag should appear as follows:

<OReilly:WebCustomControl1 Runat="Server" Text="Hello World!" Id="WC1" />

When you view this page, the text you passed in is displayed, as shown in Figure 14-11.


Figure 14-11. Viewing the default custom control

Example 14-8 shows the C# version of the complete custom control provided by Visual Studio .NET, while Example 14-9 shows the VB.NET version.

Example 14-8: VS.NET default custom control (C#)


using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;
 
namespace CustomControls
{
   [DefaultProperty("Text"),
      ToolboxData("<{0}:WebCustomControl1 
           runat=server></{0}:WebCustomControl1>")]
   public class WebCustomControl1 : System.Web.UI.WebControls.WebControl
   {
      private string text;
 
      [Bindable(true),
         Category("Appearance"),
         DefaultValue("")]
      public string Text
      {
         get
         {
            return text;
         }
 
         set
         {
            text = value;
         }
      }
 
      protected override void Render(HtmlTextWriter output)
      {
         output.Write(Text);
      }
   }
}

Example 14-9: VB.NET default custom control


Imports System.ComponentModel
Imports System.Web.UI
 
<DefaultProperty("Text"), ToolboxData("<{0}:WebCustomControl1 runat=server></{0}:
WebCustomControl1>")> Public Class WebCustomControl1
   Inherits System.Web.UI.WebControls.WebControl
 
   Dim text As String
 
   <Bindable(True), Category("Appearance"), DefaultValue("")> Property [Text](  ) As String
      Get
         Return text
      End Get
 
      Set(ByVal Value As String)
         text = Value
      End Set
   End Property
 
   Protected Overrides Sub Render(ByVal output As System.Web.UI.HtmlTextWriter)
      output.Write([Text])
   End Sub
 
End Class

This control contains a single property, Text, backed by a private string variable, text.

Note that there are attributes provided both for the property and for the class. These attributes are used by Visual Studio .NET and are not required when creating custom controls. The most common attributes for custom controls are shown in Table 14-2.

Table 14-2: Common attributes for custom controls
Attribute Description
Bindable

Boolean. true indicates that VS .NET will display this control in the databindings dialog box.

Browsable

Boolean. Is the property displayed in the designer?

Category

Determines in which category this control will be displayed when the Properties dialog is sorted by category.

DefaultValue

The default value.

Description

The text you provide is displayed in the description box in the Properties panel.

Pages: 1, 2, 3, 4, 5

Next Pagearrow