ASP.Net - User Control

A user control is an ASP.NET page that has been converted into a control. User control enables you to reuse the same content and programming logic on multiple ASP.NET pages. A user control has the extension, .ascx. It cannot be opened directly in a browser. It must be used in another ASP.NET page.

You can use a user control to display the same static content such as header and footer on multiple pages. This enables you to create the common content just once and use it as many times as required. If the content changes, you just have to modify it only in one file instead of on multiple pages.

Example 1: Program to display to use of User Control.

//SimpleUserControl.ascx
<div align="center" style="background-color:yellow; font-family:Comic Sans MS; font-size:14pt; color:red">
    DotNet Training Institute
</div>
<hr>

Before using user control on .aspx page, you must first register it. The Register directive has 3 attributes:

  • TagPrefix: It is an alias for the user control's namespace. You can assign a unique namespace to the user control using this attribute.
  • TagName: It is an alias for the user control's class. You can use it to name the user control. The user control name is used at the time of instantiating the user control on the page.
  • src: It is used to specify the virtual path to the user control file. You can specify either the relative or absolute path to the file.
<%@ Register TagPrefix="ankit" TagName="uc1" src="simpleusercontrol.ascx" %>

Using a user control is similar to using an ASP.NET control. Consider the following lines of code - Syntax using user-control.

<TagPrefix:TagName id="uniquename" runat="server" />
<asp:TextBox id="txtTextBox" runat="server" />
<ankit:uc1 id="a1" runat="server" />

SimpleUserControl.aspx

<%@ Register TagPrefix="ankit" TagName="uc1" src="simpleusercontrol.ascx" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ankit:uc1 ID="a1" runat="server" />
        Page Contents
    </div>
    </form>
</body>
</html>
asp.net user control

Advantages of User Controls

  • Re-usability: User controls can be reused on the same or on multiple pages.
  • Independence: Each instance of a user control in a ASP.NET page is independent of other instances of the user control.
  • Language Independence: A user control can be written in a language different from that used to develop the hosting page. Different user controls on a page can be written in different languages.

User Control without form tag

You do not always need to include a user control within a <form runat="server"> tag. You need to include a user control within a form tag only when you want the control to participate in view state or when it includes other controls that require it.

You can use the same user control multiple times within a single ASP.NET page. The only requirement is that each instance has a unique ID.

Example 2: User control that represents a page divider using multiple HTML elements. Place this user control multiple times within a single ASP.NET page.

//Divider.ascx
<hr>

User Controls - Properties

A user control is like a small ASP.NET page. A user control is dynamic and highly flexible. Its properties can be set in the hosting page to render it in different ways.

Example 3: Setting User Control Properties

//UserControl-Property.ascx
<script runat="server">
    public string heading = "DotNet Training Institute";
    public string color = "Red";
</script>
<div align="center" style="background-color:yellow; font-family:Comic Sans MS; font-size:14pt; color:<%=color%>">
    <%=heading%>
</div>
<hr>

UserControl-Property.aspx

<%@ Register TagPrefix="ankit" TagName="uc1" src="simpleusercontrol.ascx" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
    <form id="form1" runat="server">
    <div>
        <ankit:uc1 ID="a1" runat="server" color="green" heading="ASP.NET WEB PAGE" />
        Page Contents
    </div>
    </form>
</body>
</html>
asp.net user control

User Control - Methods

Functions and subroutines contained in the user control file are exposed as methods of the user control. Suppose you wish to draw a pattern in your page. You can specify the type of pattern and the number of times it must be drawn in the web page.

Example 4: User Control Methods

//UserControl-Method.ascx
<script runat="server">
    public string pattern = "*";
    public void setPattern(int num)
    {
        for (int i=1; i<=num; i++)
            Response.Write(pattern);
    }
</script>

UserControl-Method.aspx

<%@ Register TagPrefix="ankit" TagName="uc1" src="SimpleUserControl.ascx" %>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        UserControl1.setPattern(100);
    }
</script>
<html>
    <head>
        <style>
            body{font-family:Arial, sans-serif; font-size:10pt; background-color:Orange}
        </style>
    </head>
    <body>
        <ankit:uc1 id="UserControl1" pattern="@" runat="server"/>
        <p>User Control Method</p>
    </body>
</html>
asp.net user control

To access the values of the User controls in the web form, so that you can manipulate them in your code, you must use properties or method of that user control. You cannot access them directly.

User Control - Exercise

1. Create a Login form using user Control and use in aspx page.

asp.net user control

AD:   اذا كنت تريد ان تعرف كيف تصمم موقع الكتروني فاقرأ هذا المقال