UserControls in ASP.NET

 

User controls are reusable controls that can be defined once and used whenever we need them.
We define them once and use many times, thus making sure we do not have same controls on pages looking differently. When we make changes to a user control all these changes will be reflected to all instances of the control. The extension for usercontrol is .ascx

How to create UserControl:


Add Web User Control' to yor project. The wizard produces two files: a .ascx file containing the visual layout, and a .ascx.cs (assuming you are working in C#) that has the business logic.

 

 <%@ControlLanguage="c#" AutoEventWireup="false" Codebehind="MyUserControl.ascx.cs"  

Inherits="CodeProject.MyUserControl"    TargetSchema="http://schemas.microsoft.com/intellisense/ie3-2nav3-0"%>

<asp:table id=OuterTableBackColor=#c0c0c0cBorderWidth=0cellPadding=0 cellSpacing=1

 width='100%'Runat="server">

<asp:tableRow><asp:tableCellwidth="100%">

<asp:table id=InnerTable BackColor=#cccccc BorderWidth=0cellPadding=0  

cellSpacing=1 width="100%" Runat="server">

<asp:tableRow><asp:tablecell HorizontalAlign=Center>

<asp:Label ID=TitleLabel Runat="server"/>

</asp:tablecell></asp:tableRow>

</asp:table>

</asp:tablecell></asp:tableRow>

</asp:table>

 

Our C# code looks like the following: 

 

    publicabstractclassMyUserControl : System.Web.UI.UserControl

    {

        publicstring Title       = null;

        publicstring TextColor   = Color.Black.Name;

        publicstring BackColor   = Color.Wheat.Name;

        publicint    Padding     = 2;

        publicstring BorderColor = Color.Gray.Name;

        publicint    BorderWidth = 1;

       

        protectedTable OuterTable;

        protectedTable InnerTable;

        protectedLabel TitleLabel;

 

        privatevoid Page_Load(object sender, System.EventArgs e)

        {

            if (Title==null || Title=="")

                Visible = false;

            else

            {

 

                OuterTable.BackColor   = Color.FromName(BorderColor);

                OuterTable.CellSpacing = BorderWidth;

                InnerTable.CellPadding = Padding;

                InnerTable.BackColor   = Color.FromName(BackColor);

               

                TitleLabel.Text        = Title;

                TitleLabel.ForeColor   = Color.FromName(TextColor);

                TitleLabel.Font.Name   = "Verdana";

                TitleLabel.Font.Bold   = true;

                TitleLabel.Font.Size   = FontUnit.Parse("13");

            }

        }

 

}

The purpose of this is to define a set of properties that the user can access when instantiating the control, and to then set the attributes of the ASP .NET controls in our .ascx file based on these properties.

 

Using the control:

 

To use the control you will need to compile the project with your files, and then create a page to host the control. The code for the control will be compiled into an assembly and placed in the /bin directory. If you make any changes to the C# code you must recompile.

 

To use the control you must make a page aware of the control. We do this by using a Register directive that specified the tag prefix we'll use, the tag name and the location of the user control's page

 

<%@RegisterTagPrefix="CP"TagName="TitleBar"Src="MyUserControl.ascx"%>       

<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

  <head>

    <title>MyPage</title>

  </head>

  <body>

  <basefontface=verdana> 

  <CP:TitleBarTitle="Sample Control"TextColor="blue"Padding=10runat="server"/>   

  </body>

 

</html>