User controls


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

User controls

  1. 1.  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.
  2. 2.  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.
  3. 3.  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.
  4. 4. public 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; }}
  5. 5.  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.
  6. 6. 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));}}
  7. 7.  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); }
  8. 8.  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; }
  9. 9.  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; } }
  10. 10. <%@ 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.0Transitional//EN”“”><html xmlns=””><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>
  11. 11.  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);
  12. 12.  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.