Adding and Configuring Server Controls to a Web Forms Page Using C# .NET

Are you preparing for IT certification? With practice questions, study notes, interactive quizzes, tips and technical articles, uCertify PrepKits ensure that you get a solid grasp of core technical concepts to ace your certification exam in first attempt.

Adding and Configuring Server Controls to a Web Forms Page Using C# .NET

Rating:

Introduction

Generally, a Web application provides information from a Web server to different client users over the Internet. The Hypertext Transfer Protocol (HTTP) is used to send requests from a client's Web browser to the Web application on the Web server. The HTTP then sends back responses from the Web server to the Web browser on the Internet. Therefore, when a Web application is running, the following communication process takes place:

• A client user sends a request from the Web browser by typing a URL with an .aspx extension in a virtual directory that is accessed by the Web browser.


• The Web browser sends the HTTP request to the destination server.


• The server analyses the HTTP request and searches for the process capable of executing it.


• The results are then received as HTTP responses to the client browser.


• The client Web browser finally reads the HTTP responses and displays them to the user as a Web page.

A Web form of an ASP.NET Web application collects data that a user requests or submits from a Web page. The HTTP protocol sends the collected data to the Web server. A Web form can be created by using the <form>HTML tag. ASP.NET provides different server controls for automatic communication between a Web browser and a Web server. A server control creates a user interface for the Web application and provides data communication when an event takes place.

Types of Server Controls

A Web form of a ASP.NET Web application provides different types of controls that include HTML controls, HTML server controls, Web server controls, and validation controls that can be used to create the user interface for a Web application. These server controls have been described in the following manner:

• HTML Controls: HTML controls consist of common HTML elements and are available through the HTML tab in the Visual Studio .NET toolbox. The HTML controls are dragged from the toolbox to a Web form, and the properties are set in the Properties window. Controls such as text field and label are converted into their appropriate HTML elements such as <input> element for the text field control and <div> for the Label control. But, these HTML controls are rarely used in an ASP .NET application, as they cannot be accessed from the server-side code.



• Validation Controls: ASP.NET validation controls provide validation on both the client-side and the server-side, depending on the settings of the validation and the capabilities of the Web browser. The validation controls derive their functionality from the BaseValidator abstract class of the System.Web.UI.WebControls namespace. The various types of validation controls are as follows:
  
  
  • RequiredFieldValidator Control: The RequiredFieldValidator validation control ensures that the associated input control contains an entry in the Web page.
  
  
  
  • RegularExpressionValidator Control: The RegularExpressionValidator validation control checks whether the data in the associated input control matches a specific pattern.
  
  
  
  • RangeValidator Control: The RangeValidator validation control checks whether the data is within the range of the associated input control.
  
  
  
  • CompareValidator Control: The CompareValidator validation control compares the values in the server input control with other values.
  
  
  
  • CustomValidator Control: The CustomValidator validation control uses custom specification to validate data.
• HTML Server Controls: HTML server controls are similar to HTML controls, but they differ in that they are accessed from the server-side code. However, any HTML control can be converted into an HTML server control just by adding the runat="server" attribute during code declaration inside the <form> HTML tag on a ASP.NET Web page. This will specify that the control is a server control. For example:
  
  <html>
     <head><title>Employees Salary Report</title></head>
     <body>
        <form name="WebForm1" id="WebForm1" runat="server">
           <input type="text" name="EmployeeName" runat="server">
           <input type="submit" name="SubmitButton" runat="server">
        </form>
     </body>
  </html>
  
  The following are the common properties of the HTML server control:
  
  

  Property	Description
  Attributes	Obtains a list of attribute name or value pairs on a server control tag. This property can be accessed through code.
  Disabled	Obtains a value to indicate whether the disabled attribute is included when an HTML control is rendered on the Web browser.
  Id	Obtains the identification of the server control programmatically.
  Style	Obtains a list of cascading style sheet (CSS) properties that can be applied to a specified HTML server control.
  TagName	Obtains the element name of a tag containing the runat="server" attribute.
  Visible	Obtains a value to indicate whether the HTML server control is displayed on the Web page.

  
  HTML server controls can set their properties in three different ways. They are as follows:
  
  • Setting properties in source view: The properties of an HTML server control can be set in source view by adding its appropriate attributes to the element of a server control. For example:
    
    <input type="button" id="MyNewButton" runat="server" style="top: 75px; left: 50px;" value="Submit" visible="true">
  
  
  
  • Setting properties in design view: The properties of an HTML server control can be set in design view by clicking the specified server control. Then the properties of the server control can be modified in the Properties window.
  
  
  
  • Setting properties programmatically: The properties of an HTML server control can also be set programmatically in code view. The following code can be added to the Page_Load event handler on a ASP.NET Web page:
    
    MyNewButton.Visible = true;
    MyNewButton.Style.Add("top", "75px");
    MyNewButton.Style.Add("left", "50px");
• Web Server Controls: Like HTML server controls, Web server controls are also created on the server, and they also require the runat="server" attribute for declaration on the Web page. But Web server controls such as the Calender control, AdRotator control, LinkButton control, and Repeater control provide rich functionality that is not available with HTML server controls. Some advanced features of Web server controls include automatic browser detection, automatic postback, and event bubbling. The Web server controls are used frequently instead of the HTML controls and HTML server controls, because the Web server controls have been designed specifically for ASP.NET programming.
  
  Therefore, Web server controls can be declared in HTML tags by including asp: and the runat="server" attribute. For example, the code tag <asp: label attributes runat="server"> is for the Label Web server control. Most of the Web server controls derive their functionality from the System.Web.UI.WebControls namespace. The following are some of the important properties of Web server controls that are derived from the WebControl class:
  
  

  Property	Description
  AccessKey	Sets the single character shortcut key from the keyboard for easy navigation to a Web server control. For example, the Alt key from the keyboard and a particular access key are assigned to this property.
  BackColor	Sets the background color of the Web server control.
  BorderColor	Sets the border color of the Web server control.
  BorderStyle	Sets the border style of the Web server control. Possible values can be Dotted, Dashed, Solid, Groove, Ridge, Double, InSet, OutSet, NotSet, and None.
  BorderWidth	Sets the border width of the Web server control.
  Controls	Represents the collection of controls that can be added to the Web server controls as child controls.
  CssClass	Represents the CSS class that helps a Web server control to render its contents.
  Enabled	Specifies that the Web server control is enabled so that it can receive the focus.
  EnableViewState	Specifies that the view state is enabled for the Web server control.
  Font	Represents the font properties of a Web server control.
  ForeColor	Sets the color of text in the Web server control.
  Height	Sets the height of the Web server control.
  ID	Sets an identifier for the Web server control.
  Parent	Sets the parent control of the Web server control.
  Width	Sets the width of the Web server control.

  
  In the Visual Studio .NET IDE, a Web server control can be added to a Web page in three different ways.
  First, it can be added by using the Visual Studio 2005 Design view. Secondly, it can be added to the Web page by using the Visual Studio 2005 Source view. Thirdly, it can also be added by using programmatically through the code.
  Web server controls can set their properties in three different ways. They are as follows:
  
  • Setting properties in source view: The properties of an Web server control can be set in source view by adding its appropriate attributes to the element of a Web server control. For example:
    
    <input id="MyWebButton" runat="server" style="top: 75px; left: 50px;" text="WebButton">
  
  
  
  • Setting properties in design view: The properties of an Web server control can be set in design view by clicking the specified server control. Then the properties of the Web server control can be modified in the Properties window.
  
  
  
  • Setting properties programmatically: The properties of an Web server control can also be set programmatically in code view. The following code can be added to the Page_Load event handler on a ASP.NET Web page:
    
    MyWebButton.Visible = true;
    MyWebButton.Style.Add("top", "75px");
    MyWebButton.Style.Add("left", "50px");
    
    The following are some of the common Web server controls that are available in the Visual Studio .NET Toolbox and are usually rendered single elements:
    
    
    • Label Controls: A Label control displays useful messages or statistics on the Web form of an ASP.NET application. It also provides labels for other controls, and renders as the <span> HTML element on the Web browser.
    
    
    
    • TextBox Controls: A TextBox control can be used to input single or multiline text in a specified area of a Web form. This control is used to render as three different types of HTML elements. They are, the <input type="text">, <input type="password">, and <textarea>.
    
    
    
    • Image Controls: An Image control is used to display images from .bmp, .jpg, .gif, and .png files. This control is rendered as the <img> HTML element on the Web browser.
    
    
    
    • CheckBox and RadioButton Controls: A CheckBox control allows a user to select one or more options from a group of options. This control is rendered as the <input type="checkbox"> HTML element on a Web page. A RadioButton control allows a user to select only one option out of the several options that represent a group of RadioButton controls. The RadioButton control is rendered as the <input type="radio"> HTML element on the Web page. The RadioButton class is inherited from the CheckBox class, so that both of them share the same properties, except the GroupName property of the RadioButton class.
    
    
    
    • Button, LinkButton, and ImageButton Controls: When a command button is placed on a Web form, it performs some specific actions whenever the user clicks it. A Button control represents a push button and is rendered as the <input type="submit"> HTML element on the Web page. A LinkButton control is represented as a hyperlink on a Web page and is rendered as the <a> HTML element. An ImageButton control is represented as an image button and is rendered as the <input type="image">HTML element on the Web page. All these controls share the same properties. Whenever a command button is clicked, the Command event is raised, and it passes the CommandName and CommandArgument properties to the event handlers.
    
    
    
    • List Controls: The List controls can be categorized into four controls that include the DropDownList control, the ListBox control, the CheckBoxList control, and the RadioButtonList control. These List controls inherit their functionality from the ListControl class. These controls display a list of various items in different styles and support single and multiline selection modes.
      
      A DropDownList control allows selection of a single item from a drop-down list. This control is rendered as the <select> HTML element on the Web page, and its items are added as the <option> element within the <select> element. This control overrides the SelectedIndex property of the ListControl object and sets the default value to zero.
      
      A ListBox control allows selection of a single or multiple items from a list of items in the list box. This control is rendered as the <select> HTML element for single selection, and as the <select multiple="multiple"> HTML element for multiple selection on the Web page. The selected items are added as the <option> element within the <select> element.
      
      A CheckBoxList control displays a list of check boxes, and each list item is rendered as the <input type="checkbox"> HTML element.
      
      A RadioButtonList control displays a list of radio buttons, and each list item is rendered as the <input type="radio"> HTML element. The list items of both the controls are displayed in a table or without a table structure, depending on the type of selection.
    
    
    
    • PlaceHolder and Panel Controls: A PlaceHolder control reserves an area on the Web page and allows the user to add controls dynamically. This control is derived from the System.Web.UI.Control class, but does not share common properties of the WebControl class. This control does not render any HTML element for itself on the Web page.
      
      A Panel control acts as a container for other controls in a Web page. This control organizes and shows or hides controls contained in the panel of the Web page. Other controls can also be added programmatically to the panel. This control is rendered as the <div> HTML element on the Web page.
    
    
    
    • AdRotator Controls: An AdRotator control provides a mechanism that displays advertisements on a Web page. The randomly displayed advertisements are written in XML files and are individually stored in the <Ad> elements where information about each advertisement is specified. The AdRotator control is rendered as the <a> HTML element which is embedded with the <img> image HTML element for displaying an image on the Web page.
    
    
    
    • Calender Controls: A Calender control is used to display a calendar on a Web page. A user can select a particular day, week, month, or a range of days from this control. The appearance of this control can also be customized. An event generates whenever any changes regarding selection of a month or a day are made to this control. This control is rendered as the <table> HTML element on a Web page.

Rating: