- Introduction to ASP.NET Composite Custom Controls
- Creating the Author Bio Composite Control
- Adding Your Composite Control to a Web Form
- Adding Properties
- Adding Events
- Summary
Creating the Author Bio Composite Control
The sample control for this application is an Author Bio control, used for a web site that publishes articles and posts the biography of the author with each article. The problem it solves concerns the time needed (which could really add up) to modify multiple articles when an author's bio changes. By saving bios in a single backing store and exposing them through a control, bio changes are reflected immediately on every applicable article.
To create the composite custom control, follow these steps:
Run the Web Control Library wizard, which generates a default template.
Change the namespace, modify the control type name, and make the ToolboxData attribute identify the control properly. I used a namespace name of Mayo.Controls.AuthorBio, but you can use anything you want. Just remember not to give the namespace the same name as your class.
Find instances of WebControl1 and replace them with AuthorBio. This step also changes the value in the ToolboxData attribute, which is used for generating the code when a user drops your control onto the design surface. The following code snippet shows the changes:
The AuthorBio class (newly renamed) overrides the Render method by default. We aren't using Render in this example, so you should comment it out, delete it, or replace its implementation with a call to base.Render().
namespace Mayo.Controls.AuthorBio { /// <summary> /// Summary description for AuthorBio. /// </summary> [DefaultProperty("Text"), ToolboxData("<{0}:AuthorBio runat=server></{0}:AuthorBio>")] public class AuthorBio : System.Web.UI.WebControls.WebControl { // class definition elided for clarity } }
As I mentioned earlier, you don't use the GUI designer for composite custom controls. Instead, you override the CreateChildControls method and add controls in code, as shown in Listing 1.
Listing 1 The CreateChildControls Method
protected override void CreateChildControls() { EnsureChildControls(); // title Controls.Add(new LiteralControl( "<p><i>About the Author</i></p><p><b>")); // author name lblAuthorName.Text = "Jane Doe"; Controls.Add(lblAuthorName); // line break Controls.Add(new LiteralControl("</b></p><p>")); // author bio lblAuthorBio.Text = @" Jane Doe is a freelance author and software<br> consultant with 25 years of experience. You<br> may contact her at: jdoe@somedomain.com"; Controls.Add(lblAuthorBio); // line break Controls.Add(new LiteralControl("</p><p>")); // author site lkbAuthorSite.Text = "Visit " + "Jane Doe" + "'s Web Site"; lkbAuthorSite.Click += new EventHandler(AuthorSite_Click); Controls.Add(lkbAuthorSite); // line break Controls.Add(new LiteralControl("</p>")); }
The controls in Listing 1 are instantiated and added to the Controls collection, placing them in the default flow layout. Notice the use of LiteralControl controls to add formatting HTML. The EventHandler assigned to the AuthorSite link button's Click event specifies a handler that simply redirects to a web site. (I'll focus more on this event handler in the "Adding Events" section.)
The call to EnsureChildControls helps to make sure that the child controls have been instantiated before they're accessed. Without this method call, the control will not appear correctly in the designer, which is discussed in the next section.