User controls

USER CONTROLS

User Controls

A User Control is a file you create that contains a set of other ASP.NET controls and code grouped together to provide common functionality.

The user control can then be used on different pages within a Web site.

User controls in ASP.NET are created as .ascx files. An .ascx file is similar to the Web page’s .aspx file and can have its own code-behind page.

The user controls you create inherit from the UserControl class.

Creating User Controls

User controls are created using a procedure similar to building a standard Web page.

Add New Item -> Web User Control.

This adds a file with the .ascx extension to your application.

The user control has both a Design and Source view similar to that of an .aspx page.

However, a quick glance at the markup reveals the @ Control directive instead of the @ Page directive.

Defining User Control Events

User controls can have their own encapsulated events. This includes life cycle events such as Init and Load.

User controls can also cause PostBack for the Web page to which they belong.

The event handlers for a user control, however, are typically encapsulated in the given user control.

This ensures the code for these events can be maintained independent of the pages that use the user controls.

Defining User Control Eventspublic class AddressEventArgs : EventArgs{public AddressEventArgs(string addressLine1, string

addressLine2,string city, string state, string zip){this.AddressLine1 = addressLine1;this.AddressLine2 = addressLine2;this.City = city;this.State = state;this.Zip = zip;}public string AddressLine1 { get; private set; }public string AddressLine2 { get; private set; }public string City { get; private set; }public string State { get; private set; }public string Zip { get; private set; }}


Next, you should declare a delegate.

The delegate can be put in the same class file that contains both the event arguments and the user control class.

public delegate void SaveButtonClickHandler(object sender, AddressEventArgs e);

The next step is to add code to the user control that defines an event and raises that event when the user clicks the button.


public event SaveButtonClickHandler SaveButtonClick;

protected void ButtonSave_Click(object sender, EventArgs e)

{if (SaveButtonClick != null){SaveButtonClick(this, new

AddressEventArgs(TextBoxAddress1.Text,TextBoxAddress2.Text, TextBoxCity.Text,

TextBoxState.Text,TextBoxZip.Text));}}


Finally, you add code to the page that contains the user control. This code should trap the event exposed by the user control.

In C#, you wire up a handler using the += syntax inside the Page_Init method. Inside your handler, you use AddressEventArgs as required.

protected void Page_Init(object sender, EventArgs e)AddressUc1.SaveButtonClick += this.AddressUc_SaveButtonClick;}private void AddressUc_SaveButtonClick( object sender, AddressEventArgs e){UserProfile.AddNewAddress(this._userId, AddressUc1.AddressType,e.AddressLine1, e.AddressLine2, e.City, e.State, e.Zip);}

Defining Properties in User Controls

Properties added to user controls can then be configured in the page markup that uses the control.

When developers use the user control, they can set the properties declaratively through markup. In fact, these properties are also available through IntelliSense.

public int UserId { get; set; }public UserProfile.AddressType AddressType { get; set; }

Accessing Control Values Imagine the Address user control needs to

allow users to preset values of the controls contained by the user control.

In this case, you can expose the TextBox.Text properties as properties of the user control. public string AddressLine1{ get

{return TextBoxAddress1.Text;}set{TextBoxAddress1.Text = value;}

}

Adding a User Control to a Page

<%@ Page Language=”VB” AutoEventWireup=”false”CodeFile=”UserProfilePage.aspx.vb” Inherits=”UserProfilePage” %><%@ Register src=”AddressUc.ascx” tagname=”AddressUc” tagprefix=”uc1” %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=”http://www.w3.org/1999/xhtml”><head runat=”server”><title>User Profile Settings</title></head><body style=”font-family: Verdana; font-size: small”><form id=”form1” runat=”server”><div><uc1:AddressUc ID=”AddressUc1” runat=”server” AddressType=”Home” /></div></form></body></html>

Dynamically Loading User Controls

To dynamically load a user control, you use the LoadControl method of the Page class.

This method takes the name and path to a file that contains the user control’s definition.

The method also returns a reference to the control class it creates.AddressUc addressControl =(AddressUc)LoadControl(“AddressUc.ascx”);form1.Controls.Add(addressControl);

Creating a Templated User Control

A templated custom Web control provides separation of control data from its presentation.

This means that a templated control does not provide a default UI.

Instead, this layout is provided by the developer who uses the user control on his or her page.

This provides increased flexibility in terms of layout while keeping the encapsulation and reuse benefits of a user control.

User controls

Technology

Transcript of User controls