Thursday, November 6, 2008

Customizing and Personalizing a Web Application with ASP.Net C#

ASP.Net 2.0 provides the ability to customize and personalize Web-based applications by using four techniques. These techniques include master pages, themes, user profiles, and Web parts. The following describes briefly about each of these four techniques:
 
  1. Master Page: A master page is a technique that customizes and personalizes a Web application. It defines the look, feel and the standard behavior that should be for each Web page in the application. it creates a consistent layout for all Web pages in the application. A master page consists of two parts: a master page and one or more content pages, which have been described in the following manner:
    • Master Page: A master page is an ASP.Net file with a .master extension. It contains the layout that includes text, HTML, and server controls. It is identified by the @Master directive that replaces the @Page directive. The @Master directive contains all HTML elements such as <html>, <head>, and <form> for a Web page. The @master directive syntax is as follows:

      <%@ Master Language="C# %>

      It is inherited from the MasterPage class and contains one or more ContentPlaceHolder controls. The following code snippet displays a master page:

      <%@ Master Language="C#" %> 
      <html> 
          <head runat="server"> 
               <title>Master Page</title> 
          </head> 
          <body> 
              <form id="MyWebForm1" runat="server"> 
              <asp:ContentPlaceHolder ID="FrontPage" runat="server" /> 
              <asp:ContentPlaceHolder ID="FootNote" runat="server" /> 
          </body> 
      </html>
    • Content Page: A content page is a standard Web page with an .aspx file extension. It defines the ContentPlaceHolder controls in a master page and is bound to it. It is used as the MasterPageFile attribute in the @Page directive. For example:

      <%@ Page Language="C#" MasterPageFile="MyMasterPage.master" %>

      The following code snippet displays a content page:

      <%@ Page Language="C#" MasterPageFile="MyMasterPage.master" Title="FirstContentPage" %> 
      <asp:Content ID="WebContent1" ContentPlaceHolderID="FrontPage" runat="server"> 
           FrontPage Content. </asp:Content> 
      <asp:Content ID="WebContent2" ContentPlaceHolderID="FootNote" runat="server"> 
           FootNote Content. </asp:Content>


      Note: When a user requests content pages, ASP.Net merges the contents of the content pages with the master page being created for the specified Web application.
  2. Themes: A theme is another technique of customizing and personalizing a Web application. It is a collection of ASP.Net property settings such as background color, font size and style, and foreground color. These property settings define the look and appearance of Web pages and controls. These looks are applied consistently across all the pages in a Web application. A theme consists of a set of elements that include skins, cascading style sheets (CSS), images, and other resources. It is defined in special directories in a user's Web site or on a Web server. The following describes briefly about each element of a theme:

    • Skins: A skin is an element of the theme and is stored in the Theme folder with a .skin file extension. It contains property settings for server controls such as Button, Label, TextBox and Calendar controls. These property settings are defined as part of the theme applied to an application. A skin file contains more than one control skins are resembles as control markups. Skins can be defined in a separate file for each server control. Therefore, all the skins for a particular theme are defined in one file. There are two types of control skins, default skins and named skins.

      When a theme is applied on a Web application a default skin is automatically applied to all controls of the same type. However, a default skin does not have a SkinID attribute. On the other hand, a named skin has to be explicitly applied to a control by setting the control's SkinID property. One advantage of the named skin is that a user can set different skins for different instances of the same control type.
    • Cascading Style Sheets (CSS): A cascading style sheet (CSS) is an element of a theme applied to a Web application. It stores all formatting style information for the application in a single file with .css extension in the Theme folder. It adds different styles such as fonts, colors, and spacing between text lines to contents on a Web page. By default, it automatically applies to all Web pages of an application. By attaching CSS enhances the presentation of all the Web pages.
    • Images and Resources: A theme also includes images and other resources such as script files or sound files as an element. For example, a specific image as part of a theme can represent the expand button and the collapse button in a Web page. A resource file can be either stored in a subfolder of the theme or outside the theme folder. If a resource file is stored outside the theme folder, a tilde '~' syntax is used to find the images automatically by the application.
  3. User Profiles: A user profile is another technique that can customize and personalize a Web application. ASP.Net provides a user's experience with a Web site by defining and using profile properties on the Web site. When profile properties are defined, it becomes easy to track user information, as the individual instances of the profile properties are automatically associated with each user. Each profile data value is stored in a data store from where the profile property for a user can be retrieved. By default, a profile information is stored in a SQL Server database by using the SqlProfileProvider class.

    Profiles can be used with either authenticated or non-authenticated users. Profiles are automatically enabled for authenticated users when a Web application required user authentication. For non-authenticated users, ASP.Net profiles have to be explicitly enabled in the Web.config file of the application. The <anonymousIdentification> element to the <system.web> section is added to the Web.config file and the enabled attributes are set to true. When the anonymous profiles are enabled, a unique identification is created for each user and the information is tracked with a cookie. A user profile can also work without any cookie by storing unique identifiers of each user in the URL of the Web page request. But, the drawback is that the profile is lost when a user's session is expired.
  4. Web Parts: A Web part is a technique of customizing and personalizing a Web application. It is an integrated set of controls to enable a user to modify the contents, appearances, and behavior of all Web pages directly from a Web browser. the modified Web pages and controls as well as the settings can be easily saved across Web browser sessions for the future user requests. This feature can be called as the personalization.

    A Web part can be used for a list of news articles related to a specific organization, a blog site, a calendar, and search box. It is also used for a list of Web site links, graphs showing stock market reports, local weather reports, and images taken from picture galleries. A standard or a custom control can be a Web part, which does not require writing code when using it as a Web part. A Web Part consists of three main sections. They include personalization, user interface (UI) structural components, and actual Web parts user interface controls.