Rich Controls

Prepared By:
Rajani Khushal K.
 What are Rich Controls?
• Rich Controls are high level custom
controls that provide Rich User interface
and Functionality.
• There is not specific definition for this
controls.
• The controls which are not standard and
allow us to do some advanced
functionality are known as rich controls.
• In fact, Rich Controls are group of
standard controls but with specific use.
• Some of Rich Controls used by ASP .NET
are:
– File Upload Control
– Calendar Control
– AdRotator Control
– TreeView Control
– Menu Control
– Multiview and View Control
– XML Control
– Wizard Control
 File Upload Control
• File Upload Control is used to select any
file from our local drive and then upload
the given file for specific operations.
• The general syntax for this control is:
– <asp:FileUpload ID="FileUpload1"
runat="server" />
– Here ID is the name of the Control
– Runat property is used to run the control on to
server side.
 Properties of File Upload Control
• FileName
– It provides us the name of File which is uploaded.
• HasFile
– It is a Boolean property which gives True or False
depending on whether file is selected or not.
• FileContent
– This is collection which gives details about File
Contents
• Length
– Gives the Length of file Contents (size of bytes)
 • CanRead
– Gives the Boolean value whether file can read or not.
• CanWrite
– Gives Boolean value whether file can write or not.
• CanSeek
– Gives Boolean value whether file can seek or not.

• FileBytes
– A collection which gives details about bytes of
Files.
• Length
– Similar to FileContent.Length property.
• IsReadOnly
– Gives Boolean value which shows that File Bytes are
Read only or not
• PostedFile
– A collection which gives details about the
Posted File or Selected File.
– This property uses HttpPostedFile class
object as the file will be transferred through
HTTP.
– Some of properties are:
• ContentLength
– Gives length of Posted File
• ContentType
– Gives which type of Content are stored inside a file.
– For example: text/plain, image/jpeg etc.
• PostedFile Properties
• FileName
– Gives the name of File along the path
• InputStream
– Gives the type of InputStream which helps us to read the
specified file.
Methods of FileUpload Controls
• Some of the Common methods of this
controls are:
• DataBind
– Used to bind FileUpload Control with some
particular table column while doing ADO .NET
programming
• SaveAs
– Allows us to make a copy of file using SaveAs
methods.
• FileContent Class
– Read () and ReadBytes ()
• Read Bytes from Contents of File
– Write () and WriteBytes ()
• Write Bytes to selected File in the control.
– Seek ()
• Used to move file pointer to a position
– SetLength ()
• Allows us to set maximum length of the file
– BeginRead () and BeginWrite ()
• Allows us to begin read or writing to contents of file
– EndRead () and EndWrite ()
• Allows us to stop read or writing to contents of file
– Close ()
• Allows us to close writing or reading contents of
Files
 Events of FileUpload Control
• DataBinding
– Raised when data is bounded with Button
• PreRender
– Execute automatically before the FileUpload
control is rendered.
 Calendar Control
• It is used to display calendar.
• It is also used as Date Picker control.
• This control display a single month of the
year at a time and allows users to move
forward and backward from month to
month and select one or more dates.
• With Calendar control we can select a
range of days if multiple selection is
allowed.
• By default, Calendar Control shows us the
current month and at a time shows us
current month.
• The following information can be retrieved
using this control:
– Selected Date, Month, Year, WeekDay,
YearDay etc
– Selected Time, Hour, Minute, Second etc.
– Today’s Date
– And other information related to date and
time.
 Properties of Calendar Control
• FirstDayofWeek
– Allows us to select the first day of week through this
enumeration.
• DayNameFormat
– Allows us to set the format of Day Name.
– We set the format as:
– For example for Monday as:
• FirstLetter (M)
• FirstTwoLetters (Mo)
• Full (Monday)
• Short (Mon)
• NextPrevFormat
– Allows us to set or get the format of next /
previous month.
– < and > signs on controls are used for this
property.
– We can set this format in 3 ways:
• CustomText (Any Text we can set)
• FullMonth (Shows January, February etc)
• ShortMonth (Shows Jan, Feb etc)
• NextMonthText and PrevMonthText
– Allows us to set Next and Previous Month
Text.
– This property value will work only if the
“NextPrevFormat” is set to “CustomText” only.
• SelectedDate
– Gives the Selected date.
– This date is an object of DateTime Class.
– So if we wanna store it then we need to
create object of SelectedDate.
• SelectedDates
– It returns a collection of Selected Dates.
• SelectionMode
– It is used to set whether we want to select one
date (day), week or month.
– It cab be set by using the properties of
CalenderSelectionMode, which are given as:
• Day
• DayWeek
• DayWeekMonth
• None
• ShowDayHeader
• ShowGridLines
• TitleFormat
– Allows us to set the title of Calendar that will
be displayed
– It can be done by using TitleFormat enum as
follows:
• Month (Shows only Month as Title)
• MonthYear (Shows Months and Year as Title)
• TodaysDate
– Allows us to set Today’s date.
 Methods of Calendar Control
• SelectedDate
– It is property that represents a single date
which is selected.
– Collection of methods used for various
purposes.
– Add
• It allows us to add specific value to date and return
new date after adding specified values
– AddDays / AddMonths / AddYears
• Adds specified number of days, months and years
and return new specifed values.
– AddHours / AddMinutes / AddSeconds
– ToLongDateString / ToShortDateString
• Converts date to long / short date string
– ToLongTimeString / ToShortTimeString
• Converts time to long / short time string
• SelectedDates Collection
– It is a collection of all dates which are
selected as a week or whole month.
– Add
• Allows us to add date to collection of Dates
– Clear
• Allows us to clear the selection of all dates
– Remove
• Allows us to remove specific date from date’s
collection
– SelectRange
• Allows us to set the range to be selected from
Calender Control
 ADRotator Control
• It is used to display advertisements links
randomly on the web page.
• It also allows us to insert images and
display them randomly into web pages.
• For using a ADRotator control we need
property called AdvertisementFile.
• This File is basically a XML file.
 Displaying Advertisements
<asp:AdRotator ID="AdRotator2"
runat="server"
DataSourceID="XmlDataSource1" />
<asp:XmlDataSource
ID="XmlDataSource1" runat="server"
DataFile="~/XMLFile.xml"
</asp:XmlDataSource>
 Property of AdRotator Control
• AdvertisementFile
– It is used to provide the Advertisement File in
which the code is written.
• DataSourceID
– Used to specify the Data Source ID if we want
to connect DataSet or other DataField with
AdRotator Control
• DataMember
– Used to bind particular member of Data
Source.
 Property of AdRotator Control
• AlternateTextField:
– It is used to specify the text in case image is
not shown.
• ImageUrlField:
– It is used to specify the path of the image.
• KeywordFilter:
– It is used to specify the keyword for AdRotator
control.
 Property of AdRotator Control
• NavigateUrlField:
– It is used to specify the link after particular
advertisement is clicked
• Impressions:
– It simply means importance.
– If we specify same Impression value for all
ads.
– All will be displayed equal number of times
randomly.
 Property of AdRotator Control
• Target:
– It is used to specify the target window which
will open specified link
• <Advertisements>
<Ad>
<ImageUrl>google.jpg</ImageUrl>
<NavigateUrl>http://www.google.com</Navig
ateUrl>
<AlternateText> Google.com</AlternateText>
<Impressions>80</Impressions>
<Keyword>search</Keyword>
</Ad>
</Advertisements>
 Events of AdRotator Control
• AdCreated
– AdCreatedRaised after the AdRotator Control
selects advertisement but before the
AdRotator Control Renders the
advertisements.
• DataBind
– Used to bind this control with some particular
table column while doing ADO .NET
programming.
• PreRender
– Executes automatically before this control is
rendered.
 TreeView Control
• TreeView is a control which is used to
display data in hierarchical manner.
• All the information in TreeView control is in
the form of nodes.
• There are 3 types of nodes in TreeView
– Root Node
– Parent Node
– Leaf Node
• The most common examples of TreeView
is the Window Explorer that we use.
• The basic syntax for this control is:
– <asp:TreeView ID="TreeView1"
runat="server”
DataSourceID="XmlDataSource1">
</asp:TreeView>
– <asp:XmlDataSource ID="XmlDataSource1"
runat="server"></asp:XmlDataSource>
Properties of TreeView Control
• Nodes:
– It is used to specify nodes of TreeView at
Design Time
• ShowLines:
– A Boolean Property which is used to show
grid lines along with all the nodes of
TreeView.
• ShowExpandCollapse:
– A Boolean property which shows or hides
Expand and Collapse boxes.
• ShowCheckBoxes:
– A Boolean Property that is used to show
checkboxes near all the nodes.
• ExpandDepth:
– Used to set the levels of nodes that we want
to display when TreeView Control is loaded.
• NodeIndent:
– Used to specify indent margin for node.
• PathSeparator:
– Used to specify the path separator character.
Default it is “/”.
Run Time Property of TreeView
• SelectedNode:
– Gives the information about the selected
nodes.
– It is collection of other properties:
– Depth
• Gives the depth value of Selected Node.
– Expanded
• A boolean property to find out whether nodes are
expanded or not.
– SelectedNode Collection
– Selected:
• A Boolean Property which use to know whether a
node is selected or not.
– Value:
• Gives the value property of selected node
– ValuePath:
• Gives full path of Current node starting from Root
node
– ChildNodes:
• This is collection of all child nodes of the Selected
nodes
• It is also used to Add or Remove Childs from
current node.
 Methods of TreeView Controls
• DataBind
• Focus
• CollapseAll
– Used to close all the nodes
• ExpandAll
– Used to show all the nodes within the tree
• FindNode
– Used to find particular node within TreeView
Control.
• Nodes Method Collection
• Add: Used to add Child node to nodes
collection.
• AddAt: Used to add Child node at some
specific position within the nodes
collection.
• Clear: Used to clear TreeView nodes
• IndexOf: Used to find index number of
specific node
• Remove: Used to remove currently
selected node from node collection.
• RemoveAt: Used to remove specific node
from the nodes collection
 Menu Control
• The Menu control is used to display a
menu in an ASP .Net Web Page.
• Menu works like the regular menus
• It can be distinguished as:
– Root Menu Items
– Parent Menu Items
– Child Menu Items
• Menu Items are of two types:
• Static Menu
– They are always visible as Menu.
• Dynamic Menu
– These only appears only at particular situation
and disappear after certain duration.
 Property of Menu Control
• NavigateUrl
– If this property of menu item is set, the Menu
control navigates to the linked page;
otherwise it posts the page back to the server
for processing
• Target
– If we want to display another window then we
need to specify this property
• ImageUrl
– Used to display image along with the menu
item.
• DisappearAfter
– Used to specify for Dynamic menu. Menu
disappear after specified time in milliseconds.
• Items
– The most important property which has the
collection of all Menu items
• Orientation
– We can select whether we want to display
menu as horizontal or vertical
• PathSeparator
– Used to specify the path separator for sub
menus.
 Run Time Properties of Menu
Control
• SelectedItem:
– Run Time Property which returns selected
Menu Items
– It is collection of methods.
– Some of this methods are:
– Text
• Returns Text value of Selected Menu Item
– Value
• Returns Value property of Selected Menu Items
– ValuePath
• Returns the ValuePath for selected Menu Item
– Depth
• Returns Depth of selected Menu Item
– NavigateUrl
– Parent
• Returns Parent Menu Item name of selected menu
– Selected
• Returns true or false whether selected or not
– ChildItems
• Returns collection of child items for selected menu
if it has. Else it returns null value.
 Multiview and View Control
• Multiview control is used for creating
multiple view of the website
• It is a container of group of view control.
• It allows us to define a group of view
controls, where each view control contains
child controls.
• In Multiview only one view is selected at a
time. It is called Active View.
 Syntax of Multiview Control
• <asp:MultiView id="MultiView1"
runat="server" ActiveViewIndex=0>
<asp:View id="View1" runat="server">
</asp:View>
</asp:MultiView>
Properties of MultiView Control
• ActiveViewIndex
– This property is used to set or get the index
number of currently active view.
• Views.Count
– Views is collection within MultiView.
Views.Count will give the total number of
views under MultiView
• MultiView.Views[0].ID
– It will give the Id of First view under MultiView.
 Methods of MultiView Control
• DataBind
• Focus
• GetActiveView
– This will give the reference of currently active
view.
• SetActiveView
– This method is used to set some view as
Active View
 Events of MultiView Control
• Activate
– Raised when particular view is activated
• Deactivate
– Raised when control transfers from current
view to another view.
• ActiveViewChanged
– Raised when view is changed from one view
to another view.
 Wizard Control
• It is advancement of Multivew.
• In Wizard we have many screens after one
another.
• Wizard has different views which it shows
one by one but in customized format.
• Usually, Wizard is used for sequential
steps, but Wizard can also be used for non
sequential step.
 Syntax of Wizard Control
• <asp:Wizard ID="Wizard1" runat="server"
ActiveStepIndex="0" Height="242px"
Width="288px">
<WizardSteps>
<asp:WizardStep runat="server"
title="Step 1">
</asp:WizardStep>
</WizardSteps>
</asp:Wizard>
 Different parts of Wizards
• Main
– This part contains User Interface for each
step. Generally this part contains Navigational
buttons which are used to move Next or
Previous Screen.
• Header
– This part displays header information about
the current step. So we can specify it for each
step.
• SideBar
– This contains Navigational Steps for quick
navigation so we can directly move from one
step to another step by click on steps link.
 Property of Wizard control
• StepType
– This property is used to determine the
navigation.
• ActiveStepIndex
– This property is used to set or get the index
number of currently active step.
• DisplaySideBar
– This is a Boolean property for displaying side
bar for quick navigation.
• HeaderText
– It will be displayed in all the steps as header
information.
• Title
– Allows us to specify the Title for each step
• AllowReturn
– A boolean property which can allows us to
return back to specific step or not
• WizardSteps
– It is a collection of different steps which will
come under wizard.
– As we click on WizardSteps Collection we will
get WizardStep Collection Editor.
– Some properties under this collection are:
– Count
• Used to set the number of steps in WizardSteps
– Name
• Used to return name of First Step
– Wizard.StepStyle
• Returns the StepStyle of First Step.
• StepType Property
– Wizard is collection of steps.
– For each steps we need to determine and
specify types of steps.
– There are 5 types of StepType which are as
follows:
– Auto
– Start
– Step
– Finish
– Complete
• Wizard control gives us different templates
which are as follows:
– HeaderTemplate
– SideBarTemplate
– StartNavigationTemplate
– StepNavigationTemplate
– FinishNavigationTemplate
 Methods of Wizard Control
• GetStepType
– Used to find out the step type of specified
wizard index
• DataBind
• Focus
 Events of Wizard Control
• ActiveStepChanged
• CancelButtonClick
• FinishButtonClick
• NextButtonClick
• PreviousButtonClick
• SideBarButtonClick