Creating the Web User Controls

One of the nicest features about writing ASP.NET applications is the ability to create Web User Controls, which are stored in .ascx files. You can think of these as “smart includes.” In classic ASP, server-side includes were one method for bringing in common code and HTML to multiple pages. However, you couldn't pass or change parameters, such as the page title or other pieces of information.

However, Web User Controls have this ability and more. You can create complex code in these controls and then use them as part of Web forms that you create simply by registering them in the page.

To get started, add a new Web User Control to your project and name it header.ascx. The Web User Control has both the front-end (stored in the .ascx file) and the code-behind (stored in the .ascx.vb or .ascx.cs file). The front-end code for the header is shown in Listing 15.5.

Listing 15.5. header.ascx—Front-End Code for the Page Header
<%@ Control AutoEventWireup="false"
    Codebehind="header.ascx.vb" Inherits="WS_Ch15.header"
TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
  <head>
    <title>myPortal:
      <% = Title %>
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="styles.css" rel="stylesheet" type="text/css">
  </head>
  <body topmargin="0" leftmargin="0">
    <table width="100%" bgcolor="#000084" cellspacing="0" cellpadding="0">
      <tr bgcolor="#000084">
        <td valign="middle">
        <a href="default.aspx"><img src="pics/myportal.gif" vspace="10" width="148"
          height="40" border="0" alt="Logo - Click for home page"></a></td>
        <td valign="middle"><img src="/pics/spacer.gif" alt=""
           height="60" width="1" vspace="10"></td>
      </tr>
    </table>
    <table width="100%" cellpadding="4">
      <tr>
        <td valign="top">
          <p class="pageheading"><% = Title %></p>

For the most part, this user control is just a portion of HTML used to build the page. The difference is in the code that's marked, which is used to print the value of a variable called Title. This variable is defined as a public member of the user control, which means it can be set when the header control is referenced in other pages.

The code behind this page is shown in Listing 15.6.

Listing 15.6. header.ascx.vb— Code behind for the Page Header
Public MustInherit Class header
    Inherits System.Web.UI.UserControl

    Public Title As String

    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
 Handles MyBase.Load
        'Put user code to initialize the page here
    End Sub

End Class

Most of the code for this particular control doesn't change, except for the addition of a public variable called Title. By adding the public variable, you've essentially created a parameter that lets pages control what this control does. This is just a simple example of this functionality, but it's a helpful feature to have.

The second user control you need to add takes care of the footer of the page. The front-end of the control is shown in Listing 15.7.

Listing 15.7. footer.ascx—Front-End Code for the Page Footer
<%@ Control Language="vb" AutoEventWireup="false"
      Codebehind="footer.ascx.vb" Inherits="WS_Ch15.footer"
TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>
<hr noshade>
<span class="copyright">Copyright &copy;
  <% = Year(Now) %>
  by Northstar Computer Systems.</span> </td></tr>
  </table>
  </body>
</html>

This particular control doesn't need to have any code in its code-behind file. This file uses the Year function and the Now function to show the current year in the copyright line. This ensures that the page's date is always current. The rest of the HTML takes care of closing out the table opened in the header control, as well as closing out the page using </body> and </html> tags.

The last file you need for the controls to work is the style sheet, stored in styles.css. The code for this page is shown in Listing 15.8.

Listing 15.8. styles.css—Style Sheet for the Control
.copyright {
     font-family : Tahoma, Arial, Helvetica;
     font-size : 7pt;
     color : Black;
     margin-top: 0px;
}
.pageheading {
     font-family : Tahoma, Arial, Helvetica;
     font-size: large;
     color: #666666;
     text-decoration : none;
     font-weight : bold;
}
.subheading {
     font-family : Tahoma, Arial, Helvetica;
     font-size: medium;
     color: #000084;
     text-decoration : none;
     font-weight : bold;
}
.largetext {
     font-family : Verdana, Arial, Helvetica;
     font-size: small;
     color: Black;
     font-weight: bold;
     text-decoration : none;
}
.text {
     font-family : Verdana, Arial, Helvetica;
     font-size: x-small;
     color: Black;
     text-decoration : none;
}

.errortext {
     font-family : Verdana, Arial, Helvetica;
     font-size: x-small;
     font-weight: bold;
     color: Red;
     text-decoration : none;
}

.tableheading {
     background-color: #5A7394;
     font-family: Verdana, Arial, Helvetica;
     font-size: xx-small;
     font-weight: bold;
     color: White;
     padding : 3px 3px 3px 3px;
     vertical-align : top;
}
.tabletext {
     font-family : Verdana, Arial, Helvetica;
     font-size: xx-small;
     color: Black;
     vertical-align : top;
     padding : 3px 3px 3px 3px;
}
.tabletext_gray {
     font-family : Verdana, Arial, Helvetica;
     font-size: xx-small;
     color: Black;
     vertical-align : top;
     background-color : #DDDDDD;
     padding : 3px 3px 3px 3px;
}

These styles are all used in various pages throughout this application.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.144.90.182