• ASP.NET User Controls

    Posted on May 25, 2012 by in ASP.NET, Dotnet, VB.NET

    In addition to the built-in server controls provided by ASP.NET, you can easily define your own controls using the same programming techniques that you have already learned for writing Web Forms pages. In fact, with just a few modifications, almost any Web Forms page can be reused in another page as a server control (note that a user control is of type System.Web.UI.UserControl). A web Forms page used as a server control is named as a UserControl for short. As a matter of convention, the .ascx extension is used to indicate such controls. This ensures that the user control’s file cannot be executed as a Standalone Web Forms page (you will see a little that there are a few, albeit important, differences between a user control and a Web Forms page). User controls are included in a Web Forms page using a Register directive.

    <%@ Register TagPrefix=”Acme” TagName=”Message” Src=” MessageControl.ascx” %>

    The TagPrefix determines a unique namespace for the user control (so that multiple user controls with the same name can be differentiated from each other). The TagName is the unique name for the user control (you can choose any name). The Src attribute is the virtual path to the user control—for example “MessageControl.ascx” or “/Path/ MessageControl.ascx”. After registering  the user control, you may place the user control tag in the Web Forms page just as you would an ordinary server control (including the runat=”server” attribute):

    <Acme:Message runat=”server”/>

    Example 1: Exposing User Control Properties:
    When a Web Forms page is treated as a control, the public fields and methods of that Web Forms are promoted to public properties (that is, tag attributes) and methods of the control as well. The following example shows an extension of the previous user control example that adds two public string fields. Notice that these fields can be set either declaratively or programmatically in the containing page.

    MessageControl.ascx

    <%@ Control Language="vb" AutoEventWireup="false" CodeBehind="MessageControl.ascx.vb" 
        Inherits="WEBCONTROLS.MessageControl" %>
    
    <span id="lblMessage" style="color:<%=Color%>"><%=MessageText %></span>
    

    MessageControl.ascx.cs

    Public Partial Class MessageControl
        Inherits System.Web.UI.UserControl
    
        Public txt As String = ""
        Public MessageText As String = "This is a simple message user control!"
        Public Color As String = "Blue"
    End Class
    

    MessageExample.aspx

    <%@ Page Language="vb" AutoEventWireup="false" 
    CodeBehind="MessageExample.aspx.vb" Inherits="WEBCONTROLS.MessageExample" %>
    <%@ Register TagPrefix="Acme" TagName="Message" 
    Src="~/Part8/MessageControl.ascx" %>
    <html>
    <head runat="server">
        <title></title>
        <link type="text/css" rel="Stylesheet" href="../Styles.css" />
        <script language="vb" runat="server">
            Protected Sub btnSubmit_Click(ByVal sender As Object, _
                                          ByVal e As EventArgs)
                MyMessage.MessageText = "Message text changed !"
                MyMessage.Color = "red"
            End Sub
        </script>
    </head>
    <body>
        <h3>A Simple User Control W/Properties</h3>
        <form id="form1" runat="server">
        <div>
            <Acme:Message id="MyMessage" runat="server" />
            <asp:Button Text="Change Properties" 
                          OnClick="btnSubmit_Click" runat="server" />
        </div>
        </form>
    </body>
    </html>
    

    Click on “Change Properties” button and we would change the properties of the user control in button click event.

    Example 2: Simple Login Control
    In this control we not only change the properties of the Usercontrol programmatically but we also initialize them at runtime.

    LoginControls.ascx

    <%@ Control Language="vb" AutoEventWireup="false" CodeBehind="LoginControl.ascx.vb" Inherits="WEBCONTROLS.LoginControl" %>
    
    <table class="tableClass" style="background-color:<%=BackColor %>;">
        <tr>
            <td><b>Login:</b></td>
            <td><asp:TextBox ID="tbxUserName" runat="server"/></td>
        </tr>
        <tr>
            <td><b>Password:</b></td>
            <td><asp:TextBox ID="tbxPassword" runat="server"/></td>
        </tr>
        <tr>
            <td></td>
            <td><asp:Button ID="btnSubmit" Text="Submit" runat="server" /></td>
        </tr>
    </table>
    

    LoginControls.ascx.cs

    Partial Public Class LoginControl
        Inherits System.Web.UI.UserControl
    
        Public BackColor As String = "White"
        Public Property UserID() As String
            Get
                Return tbxUserName.Text
            End Get
            Set(ByVal value As String)
                tbxUserName.Text = value
            End Set
        End Property
        Public Property Password() As String
            Get
                Return tbxPassword.Text
            End Get
            Set(ByVal value As String)
                tbxPassword.Text = value
            End Set
        End Property
    End Class
    

    LoginForm.aspx

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="LoginExample.aspx.vb" Inherits="WEBCONTROLS.LoginExample" %>
    <%@ Register TagPrefix="Acme" TagName="Login" Src="~/Part8/LoginControl.ascx" %>
    <html>
    <head runat="server">
        <title></title>
        <link type="text/css" rel="Stylesheet" href="../Styles.css" />
        <script language="vb" runat="server">
            Protected Sub Page_Load(ByVal sender As Object, _
    ByVal e As System.EventArgs) Handles Me.Load
                If Page.IsPostBack Then
                    lblText.Text &= "The UserID is " & ctlLogin.UserID & "<br>"
                    lblText.Text &= "The Password is " & ctlLogin.Password & "<br>"
                End If
            End Sub        
        </script>
    </head>
    <body>
        <h3>A Login User Control Example</h3>
        <form id="form1" runat="server">
        <div>
            <Acme:Login ID="ctlLogin" UserID="John Doe" Password="Secret"
                        BackColor="beige" runat="server" />
            <asp:Label ID="lblText" runat="server"/>
        </div>
        </form>
    </body>
    </html>
    

    Click on “Submit” button and page will be posted back to the server. In the Page_Load event of the server we fetch the UserID and Password properties from the usercontrol and display on the page.

    Be Sociable, Share!
      Post Tagged with ,

    Written by

    Software architect with over 10 years of proven experience in designing & developing n-tier and web based software applications, for Finance, Telecommunication, Manufacturing, Internet and other Commercial industries. He believes that success depends on one's ability to integrate multiple technologies to solve a simple as well as complicated problem.

    View all articles by

    Email : [email protected]

    Leave a Reply