1. 28-08-2009 DirectI
ASP.NET User Controls
Presenter: Viral Patel

2. ASP.NET Controls

Types of Controls
(1) HTML Server Controls (Traditional HTML Tags)
(2) ASP.NET Server Controls (NEW ASP.NET Tags)
(3) AJAX Server Controls (ASP.NET AJAX Controls)
(4) Controls Created By Users

3. Controls created by Users

ASP.NET User Control

ASP.NET Custom Control
• Derived Custom Control
• Composite Custom Control
• Fully Custom Control

4. ASP.NET User Controls
1. Prerequisites
2. User Control vs Web Page
3. Create ASP.NET User Control
4. Add User Control to an ASP.NET Web Page
5. Define Properties of ASP.NET User Control
6. Define Methods of ASP.NET User Control

5. 1. Prerequisites

ASP.NET Web Page

Single Page Model

Code-Behind Page Model
− Markup File - .aspx file (Design|Source)
− Code File - .aspx.(vb|cs) file

ASPX file (Default.aspx)
− <%@ Page Language=”C#”
AutoEventWireUp=”true”
CodeFile=”Default.aspx.cs”
Inherits=”Default”
%>

6. Demo 1 : Create ASP.NET Web Page
Note <%@ Page Directive

7. 2.User Control vs Web Page
ASP.NET Web Page ASP.NET User Control
ASPX ASCX
<%@ Page … %> <%@ Control … %>
System.Web.UI.Page System.Web.UI.Control
can run as stand-alone file cannot run as stand-alone file
html, body, form html, body, form – not present

8. 3.Create ASP.NET User Control
• ASP.NET User Control
– ASCX file (MyUserContol.ascx)
• <%@ Control Language=”C#”
AutoEventWireUp=”true”
CodeFile=”MyUserControl.ascx.cs”
Inherits=”MyUserControl”
%>
• MyUserControl inherits UserControl Class
• Add ASP.NET Server Control(s)
• Add ASP.NET Code for the Control(s)

9. Demo 2 : Create ASP.NET User Control
User Control
Note <%@ Control Directive
Web Page

10. 4. Add User Control to an ASP.NET Web Page

User Control cannot run stand alone

It must be added to ASP.NET web page (aka host page) (.aspx)

STEP 1 : User Control needs to be registered to the host page
− <%@ Register
TagPrefix=”UC”
TagName=”MyUserControl”
Src=”~/Controls/MyUserControl.ascx”
%>

STEP 2 : add the user control to host page
− <TagPrefix:TagName ID=”UserControlID” runat=”server” />
− <UC:MyUserControl ID=”MyUserControl1” runat=”server” />

ALTERNATIVE:
− Drag User Control and Drop to Design View of Web Page

11. Demo 3 : Register & Add User Control to Web Page
Registering User Control
Things to Note : 1. <%@ Register Directive
2. TagPrefix, TagName, Src - Attributes
Add User Control
Note User Control Declaration

12. 5. Define Properties of ASP.NET User Control

User Control can have properties like ASP.NET Web Controls.

To add a property to a User Control
− Syntax:
<Access_Specifier> <PropertyDataType> <PropertyName>
{
get { return <PropertyValue>; }
[set { ViewState[“PropertyName”] = value; }]
}
− Example:

public ListItemCollection FinalItems
{
get { return TargetList.Items; }
}

public Boolean AllowDuplicates
{
get { return (Boolean)ViewState[“allowDuplicates”]; }
set { ViewState[“allowDuplicates”] = value; }
}

For readonly property we would have only get method

For read+write property we would have both get & set methods

Properties can be set declaratively (in attribute) or programmatically.

13. Demo 4 : Properies to User Control
Things to Note : 1. get & set syntax
2. ViewState has to be filled in manually for User Control

14. 6. Define Methods of ASP.NET User Control

User Control can have methods like ASP.NET Web Controls.

To add a method to a User Control
− Syntax:
<Access_Specifier> <MethodReturnDataType> <MethodName>
{
...Method Definition...
}
− Example:

protected void AddItem(ListItem li)
{
TargetList.Items.Add(li);
}

protected void ClearAll()
{
SourceList.Items.Clear();
TargetList.Items.Clear();
}

15. Demo 5 : Methods to User Control

16. Any Doubts ?