ASP Dotnet Web User Controls - SQL Programmers

ASP Dotnet Web User Controls

12/01/2010

Asp.net web user controls are very similar to asp.net web page and it is suitable for Rapid Application Development. User controls are the containers where you can put the Asp.net Web server controls.  Also you can treat the user control as a unit and define properties and methods for it.

Difference between aps.net web page and User Control

File name extension for user control is .ascx
User controls will not run as standalone files. But we can add them to the asp.net pages.
In user controls @Page directive is not allowed, instead @Control directive can be used.
The user control does not have html, body, or form elements in it. But these controls must be placed in the hosting page.

Controls

Within the user control you can use the Web controls and Html controls except html, body or form element.

Example

Now let us learn to create a sample user control for a login page.

  • Create a new Website UserControlExample
  • Click the Menu and choose the Add New Item.
  • Select the Web User Control from the Add New Item window.
  • Set the Page name as MyUserControl

Asp .net user Controls

  • Click Add
  • Now MyUserControl.ascx will be added to your web site.
  • Double click on the MyUserControl.ascx page to get the Source Page
  • Add the following code to create the login page
<script language="VB" runat="server">  
        Public BackColor As String = "white"  
      
      Public Property UserId As String  
        Get  
          Return UserName.Text  
        End Get  
        Set  
          UserName.Text = Value  
        End Set  
      End Property  
      
      Public Property Password As String  
        Get  
          Return Pass.Text  
        End Get  
        Set  
          Pass.Text = Value  
        End Set  
      End Property  
      
    </script>  
      
    <table style="background-color:<%=BackColor%>;font: 10pt verdana;border-width:1;border-style:solid;border-color:black;" cellspacing=15>  
      <tr>  
        <td><b>Login: </b></td>  
        <td><ASP:TextBox id="UserName" runat="server"/></td>  
      </tr>  
      <tr>  
        <td><b>Password: </b></td>  
        <td><ASP:TextBox id="Pass" TextMode="Password" runat="server"/></td>  
      </tr>  
      <tr>  
        <td></td>  
        <td><ASP:Button ID="Button1" Text="Submit" runat="server"/></td>  
      </tr>  
    </table>

Now the User Control page may look like below shown image.

Asp dotnet User Control

  • Open the default.aspx page and then open the Source page.
  • Now you have to declare our user control in the default.aspx
  • Put the following line under the <@ Page %> directive
<%@ Register TagPrefix="UC1" TagName="Login" Src="MyUserControl.ascx" %>

Make sure the Src value matches the path of your user control. Then add this script.

<script language="VB" runat="server">  
      
      Sub Page_Load(Sender As Object, E As EventArgs)  
                If (Page.IsPostBack) Then  
             MyLabel.Text &= "The UserId is " & MyLogin.UserId & "<br>"  
             MyLabel.Text &= "The Password is " & MyLogin.Password & "<br>"  
                End If  
      End Sub  
      
    </script>

The above script will display the Login username and password text in the Label for each postback.

Then replace the <body> section with the following code.

   <body style="font: 10pt verdana">  
      <h3>A Login User Control</h3>  
      <form id="Form1" runat="server">  
        <UC1:Login id="MyLogin" UserId="admin" Password="admin" BackColor="beige" runat="server"/>  
      </form>  
      <asp:Label id="MyLabel" runat="server"/>  
    </body>

In the above code we have just added our user control with an Id and assigned values for two properties UserId and Password under the form tag.

Now run the application.  The login screen will be displayed. And type Admin in the Login text box and Admin in the Password Textbox. Then press submit

Now the Login username and password that you entered will be displayed under the user control.

Login User Control