Create and Consume Custom Controls

ASP.NET ships with a lot of controls, but sometimes, they aren’t enough for specific needs. Luckily, the ASP.NET control model is easily extendible. You can create your own controls in two ways:

  1. Create a Custom Control
  2. Create a User Control.

In this post (and in the exam, hopefully) you will need to be familiar only with the latter. A User Control is much like a standard aspx page. You use existing controls to build up your user interface, then write the code behind classes.

However, there are some differences as well:

  • The file name extension is .ascx
  • There is no @Page directive, but a @Control
  • They cannot be run by themselves, only within an aspx page
  • Html, body, head and form tags are forbidden in User controls

You can add a User control to your page two ways: register it, or set a reference on it. It is a better approach to use the register method. If you just set a reference on a User control, you’ll only be able to dynamically add it in your code-behind file. But let’s see how to do it:

Declaratively with the @Register directive:

<% @Register TagPrefix=”uc” TagName=”Control” Src=”~/Controls/Control.ascx” %>

Then you can add a user control like you add any other ASP.NET control:

<uc:Control runat=”server” … /> assuming that your .ascx file exists in a folder named controls, and the file itself is called control.ascx.

You can also set a reference on it:

<% @Reference Control=”~/Controls/Control.ascx” %>

Then you can add dynamically your control with the following syntax:

Form1.Controls.Add(ASP.control_ascx);

User Controls can have properties and methods just like any other class. You set them up exactly the same, then you can inspect, reference, etc. these properties and methods.

User Controls can have events as well. The setup of these events are the same as in any other class.

What is important when you work with User controls is their ability to host templates. To implement this behavior, you should do the following:

  1. Add a PlaceHolder control in your .ascx file, where you want your content to appear
  2. Implement a property of type ITemplate in your User control’s code
  3. Define a server controls that implements the INamingContainer interface. This will be the naming container of your template.
  4. Apply the TemplateControlAttribute to your ITemplate property, and pass the type of your naming container in the constructor of the attribute.
  5. Override the init method of your User Control, in the following way:
    1. Create an instance of the naming container class
    2. Create an instance of the template in the naming container
    3. Add the naming container to your PlaceHolder on the page.

Now that’s a little raw, let’s see an example:

First the naming container:

public class  NamingContainerClass: Control, INamingContainer

{

    public NamingContainerClass (string args);

    public string content {get; set;}

}

Then the ITemplate property:

[TemplateContainer(typeof(NamingContainerClass))]

public ITemplate ContentTemplate {get;set;}

Now add some content in the init method:

void Page_Init()

{

    if(ContentTemplate != null)

        {

            string[] randomConent = {“why”, “are”, “you”, “so”, “confused”};

            for(int i=0; i<5; i++)

                {

                 NamingContainerClass container = new NamingContainerClass(randomContent[i]);

                 ContentTemplate.InstantiateIn(container);

                 PlaceHolder1.Controls.Add(container);

}

Now your only task is to add this control to a page, call the page’s DataBind method, and set up the page as follows:

<uc:Control runat=”server”>
    <ContentTemplate>
        <asp:Label runat=”server” ID=”Lab1” Text=<%#Container.content%> />
    </ContentTemplate>
</uc:Control>

And that’s it! The templated control is fully functional.

Further Readings

ASP.NET User Control Overview
Include a User Control in an ASP.NET Web Page
Create Templated ASP.NET User Controls

Advertisements

Tags: , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: