UNIT-4

USING RICH WEB CONTROLS

INTRODUCTION:
ASP.NET introduced server-side controls for web applications.
Server-side controls enable server-side rendering and processing, enhancing user
experiences.
Web controls that have more-complex and rich functionality. These controls are called Rich
Web controls, examples of which are the AdRotator and Calendar controls
Some of the Rich Web controls include:
1. TreeView
2. TabStrip
3. MultiPage
4. Toolbar

USING ADROTATOR CONTROL:

• The AdRotator control is used to display flashing ads, such as banner ads and news
flashes on Web pages.
• The control is capable of displaying ads randomly, because the control refreshes the
display every time the Web page is refreshed, thereby displaying different ads for
different users.
• Also, you can assign priorities to the ads so that certain ads are displayed more
frequently than others.
• You can add the AdRotator control in an ASP.NET Web page by using the following
Syntax:
<asp:AdRotator
propertyname = propertyvalue
propertyname = propertyvalue>
</asp:AdRotator>

• Alternatively, you can use the toolbox provided with VS.NET to add the control to the
page.
• When you do so, the code is automatically generated and can be seen in the HTML
view of the ASPX file.
Properties of the AdRotator control:
Along with the properties that are inherited from the System.Web.UI.Control base class, the
AdRotator control has three additional properties:
 • AdvertisementFile
• KeywordFilter
• Target
AdvertisementFile:

• The AdvertisementFile property represents the path to an Advertisement file.

• The Advertisement file is a well-formed XML document that contains information
about the image to be displayed for advertisement and the page to which a user is
redirected when the user clicks the banner or image.
• The following is the syntax of the Advertisement file:
<Advertisements>
<Ad>
<ImageUrl>
URL of the image to display
</ImageUrl>
<NavigateUrl>
URL of the page to navigate to
</NavigateUrl>
<AlternateText>
Text to be displayed as ToolTip
</AlternateText>
<Keyword>
keyword used to filter
</Keyword>
<Impressions>
relative weighting of ad
</Impressions>
</Ad>
</Advertisements>
Note: The Advertisement file must be a well-formed XML document, as the
AdvertisementFile property of the AdRotator control needs to be set to an XML file
The following are the different elements used in AdvertisementFile:
ImageUrl: Specifies the URL of the image representing the ad.
NavigateUrl: Specifies the destination URL users will visit when clicking the ad.
AlternateText: Optional text displayed if the image is inaccessible and may act as a tooltip in
some browsers.
Keyword: Optional parameter for categorizing ads.
Impressions: Optional parameter indicating the weight of the ad in rotation, affecting its
display frequency. Higher values mean the ad appears more frequently.

KeywordFilter:
Keyword Filter Functionality:
When both the "KeywordFilter" and "AdvertisementFile" properties are set, the AdRotator
control will display the image that matches the keyword specified in the "KeywordFilter"
property.
No Matching Keyword:
If the "AdvertisementFile" property points to a valid Advertisement file, but the
"KeywordFilter" property specifies a keyword that doesn't match any images in the file, the
control will render a blank image, and a trace warning will be generated.
Empty KeywordFilter:
If the "KeywordFilter" property is empty, keyword filtering will not be applied, and the
control will not use any keyword-based criteria to select an ad.
NOTE: The "KeywordFilter" property allows for context-sensitive ad display by filtering ads
based on specified keywords. It works in conjunction with the "AdvertisementFile" property
to determine which ad to display.

Target:

• The Target property specifies the name of the browser window or frame in which the
advertisement needs to be displayed.
• This parameter can also take any of the HTML frame-related keywords, such as the
following:
top: Loads the linked document into the topmost window.
_blank: Loads the linked document into a new browser window.
_self: Loads the linked document in the same window.
_parent: Loads the linked document in the parent window of the window that contains the
link.

Events of the AdRotator Control:

1. Purpose:
The "adCreated" event allows developers to monitor and potentially modify the behavior
and appearance of advertisements within the AdRotator control.
2. Event Handler Parameters:
The event handler for "adCreated" takes two parameters:

• sender: Represents the object that triggers the event.

• ‘e’: Represents the AdCreatedEventArgs object containing data specific to the event.
3. AdCreatedEventArgs Properties:
The AdCreatedEventArgs object provides several properties for accessing advertisement-
related information:

• AdProperties:
An ‘IDictionary’ object containing all the advertisement properties set for the currently
selected ad.

• AlternateText:
A string value used to set the ALT property of the ad's image, which may display as a tooltip
in some browsers.

• ImageUrl:
A string value specifying the URL of the image displayed in the AdRotator control.

• NavigateUrl:
A string value specifying the URL of the web page to navigate to when a user clicks the
advertisement.
4. Customization:
Developers can use the "adCreated" event to select ads programmatically or modify the
rendering of selected ads from the Advertisement file.
5. Impressions Weighting:
If an Advertisement file is used, the ad selected during the "adCreated" event is based on
impressions weighting from the file.
6. Dynamic Modification:
Developers can modify the ImageUrl, NavigateUrl, and AlternateText properties within the
event handler to customize how the AdRotator control renders advertisements. This is useful
when pulling values from a database or dynamically altering ad behavior.
In summary, the "adCreated" event allows for dynamic manipulation of advertisements in
the AdRotator control, enabling customization and interaction monitoring.

Rendering ads to client browsers using AdRotator:

The following code uses the AdRotator server-side control to render ads to the client
browsers.
The AdRotator control uses an Advertisement file named Ads.xml.
SOURCE VIEW:
<%@ Page Language="VB" %>
<html>
<head>
</head>
<body>
<form runat="server">
<h3><font face="Verdana">AdRotator Example</font></h3>
<asp:AdRotator id="AdRotator1" runat="server" AdvertisementFile="Ads.xml"/>
</form>
</body>
</html>

• The following code describes the Ads.xml file that is used by the AdRotator control.
• The file contains two advertisements that will be dynamically shown to different
users.
• The first ad points to an image file named Saturn.gif.
• When users click this image, they are directed to the Saturn Web site.
• The second ad points to the image named Moon.jpg.
• When users click this image, they are directed to the Moon Web site.
CODE VIEW:
<Advertisements>
<Ad>
<ImageUrl> saturn.gif </ImageUrl>
<NavigateUrl> http://www.saturnrings.com/</NavigateUrl>
<AlternateText> Saturn Rings Web Site </AlternateText>
<Impressions>1</Impressions>
<Keyword>Saturn</Keyword>
</Ad>
<Ad>
<ImageUrl> Moon.jpg</ImageUrl>
<NavigateUrl> http://www.moon.com</NavigateUrl>
<AlternateText> Moon Explorers Web Site</AlternateText>
<Impressions>1</Impressions>
<Keyword>Moon</Keyword>
</Ad>
</Advertisements>
Output:
USING THE CALENDAR CONTROL:
The Calendar control is used to display a one-month calendar.
Users can use this control to view dates or select a specific day, week, or month.
The following is the syntax to add the Calendar control:
<asp:Calendar id="Calendar1" runat="server"
propertyname = propertyvalue
propertyname = propertyvalue />
Properties of Calendar Control:
1. CellPadding: Specifies space between cell contents and borders.
2. CellSpacing: Specifies space between cells.
3. DayNameFormat: Defines the format of day names.
4. FirstDayOfWeek: Sets the starting day of the week.
5. ShowNextPrevMonth: Determines if next and previous month hyperlinks are shown.
6. NextMonthText: HTML text for the "Next Month" hyperlink.
7. NextPrevFormat: Defines the format of next and previous month hyperlinks.
8. PrevMonthText: HTML text for the "Previous Month" hyperlink.
9. SelectedDate: Represents the selected date.
10. SelectedDates: A collection of highlighted dates.
11. SelectionMode: Specifies whether users can select a day, week, or month.
12. SelectMonthText: HTML text for month selection.
13. SelectWeekText: HTML text for week selection.
14. ShowDayHeader: Specifies if day names are displayed.
15. ShowGridLines: Controls display of gridlines around calendar days.
16. TitleFormat: Defines the format of the month name in the title bar.
17. TodaysDate: Represents the current date.
18. VisibleDate: Specifies the displayed month in the calendar.
STYLE OBJECTS:
1. DayHeaderStyle: Sets the appearance of the days of the current month.
2. DayStyle: Sets the appearance of the row above the calendar where the day names
appear.
3. NextPrevStyle: Sets the appearance of the sections at the left and right ends of the
title bar.
4. OtherMonthDayStyle: Sets the appearance of the days that are not in the displayed
month.
5. SelectedDayStyle: Sets the appearance of the day selected by the user.
6. SelectorStyle: Defines style properties for the week and month selector.
7. TitleStyle: Sets the appearance of the title bar at the top of the calendar, including
the month name and navigation links. If NextPrevStyle is set, it overrides the extreme
ends of the title bar.
 8. TodayDayStyle: Sets the appearance of the current date.
9. WeekendDayStyle: Sets the appearance of the weekend days.

Events of the Calendar control:

• The Calendar control supports certain events that make the control interactive on the Web
page.
• The supported events include the:
✓ DayRender
✓ SelectionChanged, and
✓ VisibleMonthChanged events

DayRender event:

• The DayRender event in ASP.NET is generated when a day cell in a calendar control is being
rendered.
• It allows developers to modify the format and content of a specific day cell before it's
displayed.
• Event Handler Syntax:
OnDayRender(sender as Object, e as DayRenderEventArgs)

DayRenderEventArgs Properties:

1. Cell: Represents a TableCell object that corresponds to the table cell where the day is being
rendered. TableCell properties include RowSpan, ColumnSpan, HorizontalAlign, VerticalAlign,
and Wrap, which control cell alignment and wrapping.
2. Day: Refers to a CalendarDay object representing the day being rendered.

CalendarDay properties include:

Date: Represents the date being rendered.

DayNumberText: A string containing the day's numeric value (e.g., "15" for July 15, 2000).

IsOtherMonth: A Boolean indicating whether the rendered day is in the currently displayed month.

IsSelectable: A Boolean indicating whether the day can be selected.

IsSelected: A Boolean indicating whether the day is selected.

IsToday: A Boolean indicating whether the day is today's date.

IsWeekend: A Boolean indicating whether the day is a Saturday or Sunday.

Developers can use the DayRender event and these properties to customize the appearance and
behavior of individual day cells within the calendar control based on specific criteria or conditions.

SelectionChanged event:
 • The SelectionChanged event is generated when a user selects a day, week, or month by
clicking the Calendar control.
• You can handle this event to validate against business logic the date selected by users.
• The event handler for this event is OnSelectionChanged and has the following syntax:

OnSelectionChange(sender As Object, e As EventArgs)

• The sender parameter points to the control that generated this event, and any eventspecific
values are stored in the EventArgs object.

MonthChanged event:

• The MonthChanged event is generated when a user clicks the next or previous month
navigation controls on the title heading of the Calendar control.
• The event handler for this event is OnVisibleMonthChanged and has the following syntax:

OnVisibleMonthChanged(sender as Object, e as MonthChangedEventArgs)

• The MonthRenderEventArgs parameter contains data pertaining to this event.

• This object has the following properties that can be used to make changes to the appearance
of the month:

➢ NewDate: Is a DateTime object that represents the new month that is selected.
➢ PreviousDate: Is a DateTime object that represents the previous month selected.

Rendering a Calendar to client browsers using the Calendar control:

The following code uses the Calendar control to render a calendar in the client browsers:

DESIGN VIEW:

CODE VIEW:

using System;

using System.Collections.Generic;

using System.Linq;
using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

public partial class CalendarControl : System.Web.UI.Page

protected void Page_Load(object sender, EventArgs e)

protected void ImageButton1_Click(object sender, ImageClickEventArgs e)

Calendar1.Visible = true;

protected void Calendar1_SelectionChanged(object sender, EventArgs e)

TextBox1.Text = Calendar1.SelectedDate.ToString("dd-MM-yyyy");

Calendar1.Visible = false;

OUTPUT:
Using the TreeView Control:

• The TreeView control is used to display hierarchical data in a Windows Explorer-style format,
allowing items to be expanded and collapsed.
• It provides a rich user experience, particularly in modern browsers with DHTML (Dynamic
HTML) support.

Separate Installation:

Unlike standard ASP.NET controls, the TreeView and similar controls discussed in the following
sections are not part of the ASP.NET Framework by default. They need to be installed separately.

Importing Assemblies:

To use these controls in an ASP.NET page, you must explicitly import the assemblies that contain
them using the <%@import> and <%@Register> directives. These directives specify the namespaces
and assemblies containing the controls.

TreeView Structure:

The TreeView control is structured using elements like TreeView, TreeNode, and TreeNodeType.

<tagprefix:TreeView> defines the TreeView control, acting as a container for nodes.

<tagprefix:TreeNode> represents a node in the TreeView.

<tagprefix:TreeNodeType> defines the type of a node, such as a folder or custom type.

Hierarchy:

The TreeView control consists of nodes, and some nodes can contain child nodes. Nodes with child
nodes are called parent nodes.

This control is particularly useful for presenting data with hierarchical relationships in a user-friendly
manner.

Properties of the TreeView Control:

In addition to the properties that are inherited from the System.Web.UI.Control base class, the
TreeView control has properties that can be used to control the behavior of the control.

AutoPostBack: A Boolean property indicating whether the control posts back to the server on each
client request.

AutoSelect: A Boolean property indicating whether a tree node can be selected by simply pointing
the mouse to the node, without having to click it.

DefaultStyle: Sets a default style for the elements in the tree.

ExpandedImageURL: Sets an image to be displayed when a node is expanded.

HoverStyle: Sets a style (e.g., font family, font size, color) for the elements in the tree when the
mouse hovers over them.

ImageURL: Sets an image to represent a node.

Indent: Specifies the number of pixels by which child nodes should be indented.
ShowLines: A Boolean property indicating whether lines are used to connect the nodes in the tree.

These properties allow developers to customize the appearance and behavior of the TreeView
control in their web applications, enhancing user interactivity and visual presentation.

Events of the TreeView control:

The events supported by the TreeView control include

• Collapse
• Expand
• SelectedIndexChanged.

Collapse event:

• The Collapse event is triggered when a user clicks to collapse a tree node in a TreeView
control.
• The event handler for the Collapse event is named OnCollapse.
• It has two arguments:
➢ sender (Object representing the event source) and
➢ e (TreeViewClickEventArgs providing information about the collapsed node).

TreeViewClickEventArgs properties include Expandable (indicating if the node is expandable),

Expanded (whether the node is expanded), Level (the node's hierarchy level), and Text (the text
content of the node).

Expand event:

• The Expand event is generated when a user clicks a tree node to expand it.
• You can trap this event to control the formatting and decide the contents of a particular node
and its child nodes.
• The event handler for this event is OnExpand and has the following syntax:
• OnExpand(sender As Object, e As TreeViewClickEventArgs)
• The second parameter is an object of the TreeViewClickEventArgs class and contains the data
pertaining to the Expand event.

SelectedIndexChanged event:

• SelectedIndexChanged event is triggered when a user selects a different tree node in a

TreeView control.
• The event handler for this event is named OnSelectedIndexChanged.
• It takes two arguments:
➢ sender (the event source, typically the TreeView control) and
➢ e (TreeViewSelectEventArgs, containing data about the event).

TreeViewSelectEventArgs properties include NewNode (representing the newly selected node) and
OldNode (representing the previously selected node).

Rendering a TreeView Control:

SOURCE VIEW:
<%@ Page Language="C#" %>

<%@ Import Namespace="Microsoft.Web.UI.WebControls" %>

<%@ Register TagPrefix="mytree" Namespace="Microsoft.Web.UI.WebControls"

Assembly="Microsoft.Web.UI.WebControls" %>

<html>

<script runat="server" language="C#">

void OnCollapse(object sender, TreeViewClickEventArgs e)

// Append node index to the label control when a tree node is collapsed

mylabel.Text += "<BR>Collapsed (Node Index = " + e.Node.ToString() + ")";

void OnExpand(object sender, TreeViewClickEventArgs e)

// Append node index to the label control when a tree node is expanded

mylabel.Text += "<BR>Expanded (Node Index = " + e.Node.ToString() + ")";

void OnSelectedIndexChanged(object sender, TreeViewSelectEventArgs e)

// Append node index to the label control when a new node is selected in the tree

mylabel.Text += "<BR>Selected " + e.NewNode.ToString() + " (oldNode Index = " + e.OldNode.ToString() +

")";

</script>

<head>

</head>

<body>

<h3><font face="Verdana">TreeView control demo</font></h3>

<form runat="server">

<!-- Render TreeView control, set up event handlers for collapse, expand, and selectedindexchanged
events -->

<mytree:TreeView runat="server" AutoPostBack="true"

 DefaultStyle="font-name:Verdana;font-size:12pt;color:black;"

SelectedStyle="font-face:Verdana;font-size:12pt;color:white;"

OnCollapse="OnCollapse"

OnExpand="OnExpand"

OnSelectedIndexChanged="OnSelectedIndexChanged">

<mytree:treenode text="Asia">

<mytree:treenode text="China" />

<mytree:treenode text="India" />

</mytree:treenode>

<mytree:treenode text="Africa">

<mytree:treenode text="Zaire" />

<mytree:treenode text="Zambia" />

</mytree:treenode>

<mytree:treenode text="North America">

<mytree:treenode text="Canada" />

<mytree:treenode text="United States" />

</mytree:treenode>

</mytree:TreeView>

<br />

<asp:Label ID="mylabel" runat="server">Event Log: </asp:Label>

</form>

</body>

</html>

Sample Output:
Using the Toolbar Control:

• The Toolbar control is used to render a toolbar in the client browsers.

• At the simplest level, a toolbar is a collection of graphical buttons. The Toolbar control is
typically used to provide the commonly used functionality to users in a graphical form.

To add the Toolbar control to a page, use the following syntax:

<tagprefix:Toolbar ..>

<tagprefix:ToolbarButton Text=".." ImageUrl=".." />

<tagprefix:ToolbarSeparator />

<tagprefix:ToolbarButton Text=".." ImageUrl=".."/>

<tagprefix:ToolbarButton Text=".." ImageUrl=".."/>

</tagprefix:Toolbar>

• As you can see in the preceding syntax, the Toolbar control is a container control that
contains elements to define a toolbar.
• These elements are described as follows:

➢ ToolbarButton: Defines a button on the toolbar.

➢ ToolbarCheckButton: Defines a check button on the toolbar.
➢ ToolbarCheckGroup: Defines a group of check buttons on the toolbar.
➢ ToolbarLabel: Defines a label to display plain text on the toolbar.
➢ ToolbarSeparator: Defines a separator on the toolbar, which is useful in

identifying the separate groups of toolbar buttons.

ToolbarTextBox: Defines a text box on the toolbar.

Properties of Toolbox Control:

In addition to the properties that are inherited from the System.Web.UI.Control base class, the
Toolbar control has additional properties.

AutoPostBack: Determines if the control triggers automatic postbacks to the server. "True" means it
posts back with client requests; "false" means it doesn't.

DefaultStyle: Sets the default visual style for the toolbar, applied to all elements by default.

HoverStyle: Defines the style for when the mouse hovers over toolbar items, providing visual
feedback.

SelectedStyle: Specifies the style applied to toolbar items when they are selected or activated.

Orientation: Determines the layout of the toolbar, either horizontal or vertical, affecting how items
are displayed.

Note: Every button on the toolbar has three states — Default, Selected, and Hover. You can define
appropriate CSS styles for each of the three states. Then, ASP.NET will apply the appropriate style
when rendering the button.
Events of the Toolbox Control:

Events of the Toolbar control The Toolbar control supports the

• ButtonClick
• CheckChange events

which make the control interactive when rendered on a page.

ButtonClick Event:

• Generated when a user clicks a toolbar button.

• The event handler for this event is named OnButtonClick.
• Event handler syntax: OnButtonClick(sender As Object, e As EventArgs).
• The sender parameter represents the object that triggered the event.
• The EventArgs object provides data related to the event.
• To access the toolbar data in the event handler, you must convert the sender variable into a
ToolbarButton object.

Example of how to convert the sender: Dim tb as ToolbarButton; tb = CType(sender, ToolbarButton).

CheckChange Event:

• Generated when the state of a ToolbarCheckButton changes.

• Used to respond to changes in the state (checked or unchecked) of a ToolbarCheckButton.
• The event handler for this event is named OnCheckChange.
• Event handler syntax: OnCheckChange(sender As Object, e As EventArgs).
• The sender variable represents the object that triggered the event.
• To retrieve toolbar data in the event handler, you must convert the sender variable into a
ToolbarButton, similar to the ButtonClick event.

Rendering a toolbar:

The following code example renders a toolbar on the page:

SOURCE VIEW:

<%@ Page Language="C#" %>

<%@ Import Namespace="Microsoft.Web.UI.WebControls" %>

<%@ Register TagPrefix="ie" Namespace="Microsoft.Web.UI.WebControls"

Assembly="Microsoft.Web.UI.WebControls" %>

<html>

<script runat="server" language="C#">

void OnButtonClick(object sender, EventArgs e)

{
 string sMsg;

ToolbarButton tb;

// Convert from Object type to ToolbarButton type

tb = (ToolbarButton)sender;

sMsg = "<BR>You chose to: <B>" + tb.Text + "</B>";

lblMessage.Text = sMsg;

</script>

<head>

</head>

<body>

<h3><font face="Verdana">ToolBar control demo</font></h3>

<!-- Display toolbar control, set up event handler for ButtonClick Event -->

<form runat="server">

<ie:Toolbar id="tb2" runat="server" BorderColor="Gray" Font-Name="Tahoma" Font-Size="8pt"

BackColor="#CCCCCC" Width="75%"

OnButtonClick="OnButtonClick">

<ie:ToolbarButton Text="Manage" ImageUrl="mmc.gif" Tooltip="Manage Server" />

<ie:ToolbarSeparator />

<ie:ToolbarButton Text="Browse" ImageUrl="web.gif" Tooltip="Browse Info"

SelectedStyle="color:red;font-size:12pt;" />

<ie:ToolbarButton Text="Print" ImageUrl="print.gif" Tooltip="Print Document" />

<ie:ToolbarSeparator />

<ie:ToolbarButton Text="Help" ImageUrl="help.gif" Tooltip="Get Help" />

</ie:Toolbar>

<asp:Label id="lblMessage" runat="server" style="font-family:verdana" />

</form>

</body>

</html>
Output:

Creating and Using Custom Controls:

Overview:

• Visual Studio .NET offers standard controls (intrinsic controls) for creating user interfaces in
applications.
• Standard controls provide a wide range of functionality for designing user-friendly interfaces.
• Custom controls are available for cases where standard controls do not meet specific
requirements.
• Custom controls enable reusability, making them valuable for common elements across
multiple forms.

An example could be creating a custom calculator control to use across multiple web forms in a web
application.

Introduction to Custom Controls:

In Visual Studio .NET, you can create various types of custom controls, including:

User control: A Web Forms page that can function as a control on other Web Forms pages, allowing
reusability.

Composite control: A combination of existing controls treated as a single control, which can be
created in any .NET programming language and used in ASP.NET pages.

• Custom controls serve to extend the functionality of existing Web Form controls to meet
specific requirements.
• You can inherit from existing controls, overriding properties, methods, or events to
customize them to your needs.
• Alternatively, you can develop a custom control by inheriting directly from one of the Control
base classes if none of the existing Web Forms controls fulfill your requirements.
 • Using existing classes as a framework for custom controls allows you to focus on
programming the specific features you want to incorporate.

Before creating custom controls, it's essential to understand the base classes used by these controls.

Basic Structure of Web Forms Controls:

• Classes used for Web Forms controls Each Web Forms control is a class that inherits from the
System.Web.UI. Control class directly or indirectly.
• We examine the System.Web.UI.Control class and its inherited classes that are used to create
a Web Forms control.
• The System.Web.UI.Control class defines all the properties, events, and methods that are
common to all the Web Forms controls.
• You need to inherit your control from this class in the following cases:
➢ When your control does not have a user interface
➢ When your control includes other controls that render their own user interface

Control Properties:

"ID":

Represents the control identifier for server controls in programs.

"Parent":

Represents the parent control in the server control hierarchy.

"Visible":

property indicates whether a server control should be rendered on the page.

Control Methods:

"Dispose":

Dispose method causes a server control to perform final cleanup.

"Equals":

Equals method is used to check whether an object is the same as the current object, and it is
overloaded.

"FindControl":

FindControl method is used to search a container for a specified server control, and it is overloaded.

"ToString":

ToString method is used to return the string representation of the current object.

Control events:

"Init":

Init event is fired when a control is initialized, which is the first step when a page needs to be
displayed in a browser.

"Load":
Load event is fired when the control is loaded on a page.

"Unload":

Unload event is fired when a control is unloaded from memory.

System.Web.UI.WebControls.WebControl class:

• Base class for all Web controls.

• Inherits from the Control class.
• Provides properties and methods for implementing user interface functionality.
• Properties like ForeColor, BackColor, BorderStyle, Width, and Height are used for rendering
additional UI functionality.
• Common web controls like Label, TextBox, Button, Table, and Calendar inherit from
WebControl.
• Recommended as the base class for controls with a user interface.

System.Web.UI.HtmlControls.HtmlControl class:

• Base class for HTML controls in Web Forms.

• Inherits from the Control class.
• Maps directly to HTML elements, making it useful for migrating ASP applications to ASP.NET.

Interfaces for Web Forms controls:

INamingContainer interface:

• Used for controls that provide data binding, are templated controls, or route events to child
controls.
• Creates a unique namespace and ensures unique IDs for child controls when implemented.

IPostBackDataHandler interface:

Implemented by controls that need to update their state or raise events on the server after
examining postback data.

Example: TextChanged event in a TextBox control.

IPostBackEventHandler interface:

• Implemented to transfer client-side events (postback events) to the server.

• Ensures the server is aware of events occurring at the client end, like form submission events

Creating Custom Controls:

• You'll create a custom control that represents a product form.

• The form provides text boxes to enter the product ID and product name of a specific product.
• You can reuse this control in the pages that need user input for any product.

Displays a sample user control:

Creating and Using a User Control:

• Create a user control by designing a Web Forms page and changing its extension to .ascx.
• Register the user control on a Web Forms page using the @ Register directive.
• Add the user control to the page using the specified tag name.

Creating a Composite Control:

• A composite control aggregates multiple controls into a single control.

• Create a composite control by defining a class that inherits from Control and optionally
INamingContainer.
• Override CreateChildControls to add child controls to the composite control.

Implement the Render method if you want to control rendering without instantiating child controls.

Adding Properties and Methods to Custom Controls:

• Properties and methods can be added to custom controls.

• Use get and set properties to add and modify properties.
• Methods can be added to provide specific functionality to the control.

Handling and Exposing Events:

• Controls have events associated with them, and events can be raised and handled on the
server.
• Custom events can be associated with controls.
• Event handlers can be added in the containing Web Forms page or the user control.
• Precautions may be necessary when using event handlers in user controls.
An example of adding a button and event handler in a user control is provided.

Validating User Input:

Validation controls in ASP.NET simplify page validation and reduce the need for extensive code.

These controls were developed to address common validation needs observed on various websites.

They can automatically detect the client's browser version and render the appropriate HTML for
client-side validation.

Basic properties like font, fore color, and back color are shared among these controls.

Using Validation Controls:

RequiredFieldValidator:

• Use the RequiredFieldValidator control when you need to ensure a value is provided for an
input element on a web page.
• The RequiredFieldValidator control checks if the associated input control has a different
value from its initial state.
• Properties of the RequiredFieldValidator control include ID, ControlToValidate, Display,
ErrorMessage, and RunAt.
• The ControlToValidate property specifies the control to validate, and the Display property
determines how the error message is shown (Dynamic, Static, None).

CompareValidator:

• Use the CompareValidator control to ensure a value matches a specified value or follows a
specific type.
• Common properties of the CompareValidator control include ID, ControlToValidate,
ControlToCompare, ValueToCompare, Display, ErrorMessage, and RunAt.

RangeValidator:

The RangeValidator control is used to check if a value falls within a specified range, with properties
such as ID, ControlToValidate, MaximumValue, MinimumValue, Display, ErrorMessage, and Type.

RegularExpressionValidator:

The RegularExpressionValidator control checks if a value matches a regular expression pattern, with
properties ID, ControlToValidate, ValidationExpression, Display, ErrorMessage, and RunAt.

CustomValidator:

The CustomValidator control allows custom validation logic on the client or server, with properties
like ID, ControlToValidate, ClientValidationFunction, OnServerValidate, Display, ErrorMessage, and
RunAt.

ValidationSummary:

The ValidationSummary control collects and displays validation error messages from other controls in
a structured format, with properties like ID, DisplayMode, HeaderText, ShowMessageBox,
ShowSummary, and RunAt.