CIT235 Web Database Systems

Instructor: Ed Weihrauch [home]

Creating User Controls

Consider this Login as a Web control:

Note the table style table attribute which provides the stylistic effect:

style="background-color: beige; font: 10pt verdana;border-width:1;border-style:solid;border-color:black;"

<%-- list6-02.aspx  --%>

<%@ Page Language="VB" %>

<script runat="server">
   ' dim Username as string
   ' dim Password as string
   ' dim BackColor as string

   sub Submit(obj as object, e as eventargs)
      Label1.Text = "Username: <b>" & User.Text & _
         "</b><br>" & "Password: <b>" & Pass.Text & "</b><p>"
   end sub
</script> 

<html><body>
<h2>Login as a Web Control</h2>
	
<hr size="4" color="red" width="50%" align="left">
   <form runat="server">
      <table 
         style="background-color: beige;
         font: 10pt verdana;border-width:1;border-style:solid; border-color:black;" 
         cellspacing=15>
         <tr>
            <td><b>Login: </b></td>
            <td><ASP:TextBox id="User" 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 Text="Submit" runat="server"  OnClick="Submit" /></td>
         </tr>
      </table>
      <p>
      <ASP:Label id="Label1" runat="server"/>
   </form>
</body></html>

User Controls

In addition to the built-in server controls provided by ASP.NET, you can easily define your own controls which lets you package and reuse any UI functionality that you want and embed it in an ASP.NET page.

With a few modifications, almost any Web Forms page can be reused in another page as a server control
A Web Forms page used as a server control is named a user control for short -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
User controls are included in a Web Forms page using a Register directive:

<%@ Register TagPrefix="TYASPNET" TagName="LoginForm" src="LoginForm.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 - this becomes the class name.
- The Src attribute is the virtual path to the user control--for example "MyPagelet.ascx" or "/MyApp/Include/MyPagelet.ascx". .NET can dyb=namically compile this file.
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):

Our example

The custom TYASPNET:LoginForm User Control is embedded in an ASP.NET page
The required syntax to embed (register) the user control is the @ Register directive:
<%@ Register TagPrefix="TYASPNET" TagName="LoginForm" src="LoginForm.ascx" %>

list6-04v2.aspx

<%-- list6-04v2.aspx --%>

      <%@ Page Language="VB" %>
<%@ Register TagPrefix="TYASPNET" TagName="LoginForm" src="LoginForm.ascx" %>

      <script runat="server">
   sub Page_Load(obj as object, e as eventargs)
      lblMessage.Text = "<b>Properties of the user control: </b>" & _
         "<br>id: " & LoginForm1.id & "<br>" & _
         "BackColor: " & LoginForm1.BackColor & "<br>" & _
         "Username: " & LoginForm1.Username & "<br>" & _
         "Password: " & LoginForm1.Password
   end sub
      </script>

      <html><body>
      <h2>User Controls - with Property Statements</h2>
      <hr size="4" color="red" width="50%" align="left">
   <form runat="server">
     
      <TYASPNET:LoginForm id="LoginForm1" runat="server"
         Password="WrongPassword"
         Username="WrongName"
         BackColor="Beige" />
   </form>
   <p>
   <asp:Label id="lblMessage" runat="server" />
      </body></html>

there are 3 public properties in this file: BackColor, UserName & Password
the public UserName and Password properties were created with property statements
as a demonstration of the fact that the user control has methods to handle it's own events, it unrealistically announces the UserName and Password that a user types into a Web form.

<%-- LoginForm.ascx --%>

<script language="VB" runat="server">

   public BackColor as String = "White"
   
   public property UserName as string
      Get
         UserName = User.Text
      End Get
      Set
         User.Text = value
      End Set
   end property

   public property Password as string
      Get
         Password = Pass.Text
      End Get
      Set
         Pass.Text = value
      End Set
   end property
   
   public sub Submit(obj as object, e as eventargs)
      lblMessage.Text = "<b>Produced from within User Control</b><br>"
      lblMessage.Text += "Username: <b>" & User.Text & _
         "</b><br>" & "Password: <b>" & Pass.Text & "</b><p>"
   end sub
</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="User" 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 Text="Submit" runat="server"  OnClick="Submit" /></td>
   </tr>
</table>
<p>
<ASP:Label id="lblMessage" runat="server"/>

The property statements are required, since the output produced without them is not correct.
public variables are not the same as public properties. You can assign and retrieve values but properties of the user control (created with the property statement) allow you to perform actions each time the value is set or accessed.
The source src="list6-03.ascx" below declares only public variables (not properties)

list6-04.aspx - wrong output:

<%-- list6-04.aspx --%>

<%@ Page Language="VB" %>
<%@ Register TagPrefix="TYASPNET" TagName="LoginForm" src="list6-03.ascx" %>

<script runat="server">
   sub Page_Load(sender as Object, e as EventAgs)

      lblMessage.Text = "<b>Properties of the user control: </b>" & _
         "<br>id: " & LoginForm1.id & "<br>" & _
         "BackColor: " & LoginForm1.BackColor & "<br>" & _
         "Username: " & LoginForm1.Username & "<br>" & _
         "Password: " & LoginForm1.Password
   end sub
</script>

<html><body>
<h2>User Controls - w/o Property Statements</h2>

<hr size="4" color="red" width="50%" align="left">
 <form runat="server">
      <TYASPNET:LoginForm id="LoginForm1" runat="server" 
         Password="WrongPassword"
         Username="WrongName"
         BackColor="Beige" />
 </form>  <p>
   <asp:Label id="lblMessage" runat="server" />
</body></html>

<%-- list6-03.ascx --%>

<%@ Control Language="VB" %>

<script runat="server">
   public BackColor as String = "White"
   public UserName as String
   public Password as String
   
   public sub Submit(obj as object, e as eventargs)
      Label1.Text = "<b>Produced from within User Control</b><br>"
      Label1.Text += "Username: <b>" & User.Text & "</b><br>" & _
	                "Password: <b>" & Pass.Text & "</b><p>"
   end sub
</script> 

<table style="background-color:pink;
   font: 10pt verdana; border-width:1;
   border-style:solid; border-color:black;" 
   cellspacing=15>
   <tr>
      <td><b>Login: </b></td>
      <td><ASP:TextBox id="User" 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 Text="Submit" runat="server" 
             OnClick="Submit" /></td>
   </tr>
</table>
<p>
<ASP:Label id="Label1" runat="server"/>

We will see User Controls in the Case Study in a following section.