Creating user controls in ASP.NET

Creating User Controls

User control = file containing set of ASP.NET controls grouped together to provide common functionality.

Created as .ascx files.

Typically used within a site, if want to be re-usable between sites consider abstracting functionality as a web server control.

Example - site needs to prompt for address information. Combine several ASP.NET controls to collect this information. This grouping of controls can then be used elsewhere on the site.

Inherit from UserControl class, which inherits from TemplateControl.

Created in similar way to standard web page - select Add New Item -> Web User Control.

Has both design and source view.

Markup begins with <%@ Control--- %> rather than <%@ Page... %>

Refrain from putting much style information (beyond layout) inside user control - leave to user to apply styles and themes.

User Control Events

Events called in sync with page events, e.g. before page Init event is called the Init for each control on the page is called, then Load event called on Page followed by all its controls, etc.

Can cause post-back for webpage they belong to. When causes post-back the controls events are raised along with events on page.

Event handlers for control encapsulated within control.

Example; Address control has Save button. An event (to save the data) is triggered when Save button clicked. Control is added to page. A click on the Save button executes the event defined within the control.

Passing User Control Events To Page

To expose control operations define event on control.

Raise this event when operation (e.g. button click) takes occurs.

Can expose data with event via EventArgs - define own class derived from EventArgs and pass instance when event raised.

User Control Properties

Define configuration data via properties.

These properties can then be configured in markup for page in which control resides.

These properties also available via IntelliSense.

Properties can be set at design or run time and are available on postback.

Accessing Control Values

Controls contained within a user control are declared as protected members.

To gain access can provide reference to contained control through property setting - note this gives access to all the controls properties.

Alternative way to gain access is to define property in user control that gets / sets the particular property on the contained control.

Adding User Control To Page

Add to web age by dragging from Solution Explorer in Design View.

This will add

<%@ Register src="AddressUSerControl.ascx" tagname="AddressUserControl" tagprefix="uc1" %>	 

directive to page and instantiate within the form of the page:

<form> 

 <div>

  <uc1:AddressUSerControl ID="AddressUSerControl1" runat="server" />

 </div>

</form>

Dynamically Load User Control

Use LoadControl method in Page class which takes path to control definition, n.b. Control must be registered with page.

After control has been loaded it must be added to page.

AddressUc addressControl = (AddressUc)LoadControl("AddressUSerControl.ascx");

form1.Controls.Add(addressControl);

Templated User Controls

Provides separation of control data from its presentation.

Does not provide default UI layout - instead provided by developer who uses control on a page.

1. Add user control file web application
2. Add PlaceHolder control to controls markup - defines place holder for templated layout. PlaceHolder exposed as control property and used by developers to define their markup layout code. <%@ Control... %><asp:PlaceHolder runat="server" ID="PlaceHolderAddressTemplate" />
3. Create class file to server as naming container for control. A naming container allows a contained child to be found using FindControl. In addition to containing controls also need to reference data on which control works. Naming container class inherits from Control and implements INamingContainer interface. Should contain public properties for data elements it contains.
4. In code behind file implement property of type ITemplate. This serves as template for users of the control (and exposes PlaceHolder created in step 2). Apply the TemplateContainerAttribute to this property, passing type of naming class container (step 3) as argument to constructor. Apply PersistenceModeAttribute attribute to ITemplate property, passing PersistenceMode.InnerProperty to the attributes constructor.
5. In Page_Init method of user control test for ITemplate property. If set, create instance of naming container and instance of template in naming container. Add naming container instance to controls collection of PlaceHolder control.
6. May need to pass data from control to naming container - allows users to set control properties and store them using container. Define data in user control as properties that developer can set, pass reference to this data to naming container.

Using Templated Control

Drag templated control from Solution Explorer to page which will register control with page.

Then define template for user control layout by nesting within <LayoutTemplate> tags.

Inside template reference data via Container object.

<uc1LAddressUcTemplate ID="AddressUcTemplated1" runat="server">

 <LayoutTemplate>

  <asp:TextBox ID="addr1" runat="server" Text="<%#Container.Address.AddressLine1%>" />

 </LayoutTemplate>

</uc1LAddressUcTemplate>

In the code behind file call the Page.DataBind to bind container to templated layout:

protected void Page_Load(object sender, EventArgs e)
{
  AddressUcTemplated1.Address.AddressLine1 = "1234 Some St.";
  Page.DataBind();
}