Standard Controls

By

SRIRAM. B
Standard Controls
 Label  List Box
 Literal  DropDownList
 Localize  Check Box
 TextBox  Check Box List
 Button  Radio Button
 Link Button  Radio Button List
 Image Button  Image
 Hyper Link  Table
 Calendar  Panel &Place Holder
 Ad Rotator  Substitution
Label
 This control renders text, or an HTML fragment, on the page. You can change the
displayed text with server-side code.

 Using <asp:Label> control, the control uses the Text Attribute to assign the content of
the control.

<asp:Label ID=”Label1” Runat=”server” Text=”Hello World”/>

 Instead of Text attribute, you can place the content to be displayed in <asp:Label>
element.

<asp:Label ID=”Label1” Runat=”server”>Hello Word</asp:Label>

 Programatically providing text to the Label Control

Label1.Text=”Hello World”;
Literal
 The Literal control renders static text into a Web page without adding any HTML
elements. You can manipulate the text programmatically with server code.. Unlike
the Label control, the Literal control does not render its content inside <span> tag.

 If you want to display static text, you can present it using HTML; you do not need a
Literal control. Use a Literal control only if you need to change the contents in
server code. The Literal control is similar to the Label control, except the Literal
control does not enable you to apply a style to the displayed text.

 The “Mode” property enables you to encode HTML content. It accepts the following
values.
 PassThrough -> Displays the contents of the control without encoding.
Literal..
 Encode -> Displays the contents of the control after HTML encoding the
content.

 Transform -> Displays the contents of the control after stripping markup that is
not supported by the requesting device.

 If you place some HTML code in the string that is output (<b>Here some text</b>),
the Literal control outputs just that and consuming browser shows the text as bold.

<asp:Literal ID=”Literal1” Runat =”server” Mode =”Encode”

Text=”<b>Here some text</b>”></asp:Literal>

Output : Here some text

Localize
 Creates a location on a Web page to display localized, static text.

 Use the Localize control to reserve a location on a Web page to display localized
text. The Localize control is identical to the Literal control and similar to the Label
control. While the Label control allows you to apply a style to the displayed text, the
Localize control does not.

 You can programmatically control the text that is displayed in the Localize control
by setting the Text property, which is inherited from the Literal control.
Localize..
<asp:Localize id="Localize1" runat="server"
meta:resourcekey="Localize1Resource1" Text="Hello World!">
</asp:Localize>

HelloWorld<br />
<br />
<br /> Welcome to ASP.NET
<hr/>
TextBox

 The user can enter text and numeric values into the boxes that are displayed. This
control supports input masks that make it suitable for entering passwords or other
sensitive information.

 The TextMode property accepts the following values:-

 SingleLine – Displays a single-line input field
<asp:TextBox ID=”TextBox1” Runat=”server” TextMode=”SingleLine”/>
 MultiLine – Displays a multi-line input field
<asp:TextBox ID=”TextBox1” Runat=”server” TextMode=”MultiLine”/>
 Password – Displays a single line input field in which the text is hidden.
<asp:TextBox ID=”TextBox1” Runat=”server” TextMode=”Password”/>
TextBox ..
 Method
Focus() -> Enables you to set the initial form focus to the text box.
 Event

TextChanged –> Raised on the server when the contents of the text box
are changed.
 Properties

 Autopostback -> Enables you to post the form containing the TextBox
back to the server automatically when the contents of
the textbox is changed.

 AutoCompleteType -> Enables you to associate an AutoComplete class with

the TextBox control.
Button
 This control renders a button that the user can click to send a command or to
initiate an action. When a Button control is pressed, the page is submitted back to
the server, and various events, such as Page.Load and Button.Click, are fired.

<asp:Button ID=”Button1” Runat=”server” Text=”Button1”

OnCommand=”Button_Command” CommandName=”DoSomething”/>

 Method

Focus() -> Enables you to set the initial form focus to the Button Control

 Events

Click -> Raised when the button control is clicked

Command -> Raised when the button control is clicked. The CommandName &
CommandArgument are passed to this event.
Button..
 Properties

Command Argument -> Enables you to specify a command argument that is

passed to the command event.

CommandName -> Enables you to specify a command name that is passed to

the command event.

Enabled -> Enables you to disable the Button control

OnClientClick -> Enables you to specify a client-side script that executes

when the button is clicked.

PostBackUrl -> Enables you to post a form to a particular page.

Button Client Event - Click
Link Button

 This control renders an object that appears as a hyperlink to the user, but behaves
as a button in terms of its programming model.
i.e., Methods,Properties&Events are same like the Button.

<asp:LinkButton ID=”LinkButton1” Runat=”Server” OnClick=”LinkButton1_Click”

Text=”Submit”/>
Image Button
 This control renders an object that appears as an image to the user, but behaves
as a button in terms of its programming model.

i.e., Methods,Properties&Events are same like the Button.

<asp:ImageButton ID=”ImageButton1” Runat=”server”

OnClick=”ImageButton1_Click” ImageUrl=”MyButton.jpg”/>

 The event handler for an Image Control is differ from other button controls, it is
passed to an instance of the ImageClickEventArgs class. It has the following
properties : -
 X – The x coordinate relative to the image the user clicked
 Y – The y coordinate relative to the image the user clicked
Hyperlink
 This control renders an HTML <a> tag, which you can use to link to another Web page.
 Unlike LinkButton Control, the HyperLink control does not submit a form to a server.
 The HyperLink Control can be used for images as well as text.

<asp:HyperLink ID=”HyperLink1” Runat=”server” Text=”Go to Home Page”

NavigateUrl=”~/Default.aspx” />

<asp:HyperLink ID=”HyperLink1” Runat=”server” ImageUrl=”~/LinkImage.jpg”

NavigateUrl=”~/Default.aspx” />
 Properties
Enabled -> Enables you to disable the hyperlink
Text -> Enables you to label the hyperlink
ImageUrl -> Enables you to specify an image for hyperlink
NavigateUrl -> Enables you to specify the URL representation of hyperlink
Target -> Enables you to open a new window
Image
 This control renders an image on the page. You can manipulate this image with
server-side code before it is displayed on the user’s browser.

<asp:Image ID=”Image1” Runat=”server” ImageUrl =”~/MyImage1.jpg” />

 Properties

AlternateText -> Enables you to provide alternate text for image.

ImageAlign -> Enables you to align image relative to other HTML elements in the
page. Possible values are AbsBottom, AbsMiddle, Baseline,
Bottom, Left, Middle, NotSet, Right, TextTop & Top.

ImageUrl -> Enables you to specify the URL to the image.

DescriptionUrl -> Enables you to provide the Detailed description of the image.
Calendar
 This control renders a calendar that the user can use to view and pick date values.
. <asp:Calendar ID=”Calendar1” Runat=”server” />
 Events
DayRender -> Raised as each day is rendered
SelectionChanged -> Raised when a new day, week or month is selected.
VisibleMonthChanged -> Raised when the next or previous month link is clicked.
 Properties

DayNameFormat, NextMonthText, PrevMonthText, SelectedDate, SelectedDates,

SelectionMode, SelectMonthText, SelectWeekText, ShowDayHeader,
ShowNextPrevMonth, ShowTitle, TitleFormat, TodaysDate
AdRotator
 This control cycles through a series of clickable ad banners, and it allows some ads
to be weighted more heavily than others. Ads can either be linked to the control by
using an XML file with a predefined schema or in a database table.
<Advertisements> // XML File - MyAds.XML

<Ad>

<ImageUrl>XMLBook1.gif</ImageUrl>

<NavigateUrl>http://www.Microsoft.com</NavigationUrl>

<AlternateText>Visit Microsoft.com</AlternateText>
<Impressions>50</Impressions>
<Keyword>XML Books</Keyword>
</Ad>
</Advertisements>
AdRotator..
<asp:AdRotator id=”AdRotator1” AdvertisementFile=”MyAds.XML”
KeywordFilter=”XMLBooks” CssClass =”books” Runat=”server” />
 Event

AdCreated -> Raised after the AdRotator control selects an advertisement but before
the AdRotator control renders the advertisement.
 Properties

AdvertisementFile, AlternateTextField, ImageUrlField, KeywordFilter,

NavigationalUrlField, Target,

DataMember, DataSource, DataSourceID

List Box
 This control renders a box with a list of items from which the user can choose. Like
the DropDownList control, this is populated with ListItem controls, where as in
ListBox Control you can select more than one item,but in DropDownList you can
select only one item from the collection.
<asp:ListBox ID=”ListBox1” Runat=”server” SelectionMode=”Multiple”>
<asp:ListItem>Chennai</asp:ListItem>

<asp:ListItem>Mumbai</asp:ListItem>

</asp:ListBox >

 To add an Items to a Collection

ListBox1.Items.Add(new ListItem(“Delhi”,“Delhi” ));

Drop Down List Box
 This control renders a drop-down list box from which the user can select an item.
You can set the items that appear in the list by adding ListItem controls.
<asp:DropDownList ID=”DropDownList” Runat=”server” AutoPostBack=”true”
OnSelectionIndexChanged=”DropDownList1_SelectedIndexChanged” >
<asp:ListItem>Chennai</asp:ListItem>

<asp:ListItem>Mumbai</asp:ListItem>

</asp:DropDownList >
Check Box
 These controls render check boxes with which the user can enter true/false or
yes/no values.

<asp:CheckBox id=”ChekBox1” Text=”Receive Newsletter” Runat=”server”

OnCheckedChanged=”CheckBox1_CheckedChanged” AutoPostBack=”true” />

 Properties

Checked, Enabled,Text,TextAlign, AutoPostBack

 Method

Focus()

 Event

CheckedChanged
Check Box List
 It render check box with ListItem used to populate multiple check boxes from
CheckBoxList control.

<asp:CheckBoxList ID=”CheckBoxList1” Runat=”server>

<asp:ListItem>Chennai</asp:ListItem>

<asp:ListItem>Mumbai</asp:ListItem>

</asp:CheckBoxList>

 Properties

Selected, RepeatColumns, RepeatDirections, RepeatLayout

Radio Button
 These controls render option buttons. A user can select only one option button control
from a group. You can group RadioButton controls by using the GroupName property.
It uses the same property,methods & events like checkbox.

<asp:RadioButton ID=”RadioButton1” Runat=”server” Text=”Male” GroupName=”Sex”/>

<asp:RadioButton ID=”RadioButton1” Runat=”server” Text=”Female” GroupName=”Sex”/>

Radio Button List

 In a RadioButtonList, all the buttons are automatically grouped. You can create
individual option buttons in a RadioButtonList control with ListItem controls.
Like CheckBox, RadioButton, DropDownList, you can select only one item at a time

<asp:RadioButtonList ID=”RadioButtonList1” Runat=”server” />

<asp:ListItem>Chennai</asp:ListItem>

<asp:ListItem>Mumbai</asp:ListItem>

</asp:RadioButtonList>

 Properties

Selected, RepeatColumns, RepeatDirections, RepeatLayout

Table
 These controls render the elements of an HTML table. By using them in place of a
static HTML table, you can manipulate the table in code before the user sees the page.
For example, you could add rows to the table, one for each of your products.

<asp:Table ID=”Table1” Runat=”server”>

<asp:TableRow Runat=”server”Font-Bold=”True” ForeColor=”Black” BackColor=”Silver”>

<asp:TableHeaderCell>First Name</asp:TableHeaderCell>

<asp:TableHeaderCell>Last Name</asp:TableHeaderCell></asp:TableRow>

<asp:TableRow><asp:TableCell>Bill</asp:TableCell>

<asp:TableCell>Gates</asp:TableCell></asp:TableRow>

</asp:Table>
Panel

 This control is used as a container for other controls and tags. By grouping
elements within a Panel control you can, for example, hide or show them all in a
single line of code.

<asp:Panel ID=”Panel1” Runat=”server” Height =”300” Width=”300”

ScrollBars=”Auto” visible=”true” />

 Properties
The Scrollbar attribute is Auto, None,Horizontal,Vertical and Both
The Horizontal Align attribute is NotSet, Center, Justify,Left and Right
The directions you can set NotSet, LeftToRight and RightToLeft
Place Holder
 This control is used to mark a place in the page. You can use this to easily insert
other controls into the page at a particular place at run time.

<asp:PlaceHolder ID="PlaceHolder1" runat="server"> </asp:PlaceHolder>

Using PlaceHolder to add controls to a page dynamically

Label NewLabelControl = new Label();

NewLabelControl.Text=”Hello Bill Here”

PlaceHolder1.Controls.Add(NewLabelControl)

Creates a new instance of a Label control and populates it with a value before it is
added to the PlaceHolder control.
Demo
Session Ends
Exercise
New Web Server Controls in ASP.NET 2.0
 Bulleted List

- Bullet Styles and Display Modes

- Binding Bulleted List to Data Source

 File Upload

- Selecting files for upload

 Image Map

- Hot Spots and Hot Modes

 Button Client Click and Client Event
 Multiview and View
 Wizard Controls
 Hidden Fields
Bulleted List
 This control contains a number of ListItem controls. Each of these is presented in a list
with bullet points.
 It renders either an unordered(bulleted) or Ordered (numbered) list.
 Each list item can be rendered as plain text, a LinkButton Control or a link to another page.
Bulleted List..
 Bulleted Style Property has the following values:-
 Circle  BulletedListDisplayMode values:-
 CustomImage  HyperLink
 Disc  LinkButton
 LowerAlpha  Text
 LowerRoman
 NotSet
 Numbered
 Square
 UpperAlpha
 UpperRoman
Bulleted List..
Bulleted List..
Handling Bulleted List Event
Binding Bulleted List to DataSource
File Upload Control
 This control renders a text box and a browse button.

 With this control, users can specify a file to upload to the Web server. You must
implement server-side code to handle this upload and store the file.

 Properties

Enabled, FileBytes, FileContent, FileName, HasFile, PostedFile

 Methods

Focus, SaveAs
File Upload Control
File Uploading
Image Map
 Similar to the Image control, this control renders an image. However, it also allows
you to create HotSpots within the image, which links to other pages.

 You add these hotspots with CircleHotSpot, RectangleHotSpot, or PolygonHotSpot

controls within the ImageMap markup.
Image Map
Hot Spot Modes
Image Map Control
Image Map Event Handling
Multiview Control
 The MultiView control can be used to switch quickly between several displays on a
page.

 The control contains several View controls, each of which can contain HTML
markup or other controls. Only one view is displayed at a time.

 You can display a view by using the SetActiveView method of the control.
Multiview
Multiview Control
Hidden Fields
 This control can be used to store information in the page that you do not want the
user to see.
<asp:HiddenField ID="HiddenField1" runat="server"
OnValueChanged="HiddenField1_ValueChanged" />

HiddenField1.Value = Convert.ToInt16(TextBox1.Text).ToString ();

TextBox2.Text = HiddenField1.Value;
Wizard
 This control simplifies the task of building a series of forms to collect user input
Within the control, you use WizardStep controls to determine what appears on the
page at each step in the procedure.
<asp:Wizard ID="Wizard1" runat="Server">

<WizardSteps>

<asp:WizardStep ID="WizardStep1" runat="server" Title="YourName"> </asp:WizardStep>

<asp:WizardStep ID="WizardStep2" runat="server" Title="Edu Qualification"> </asp:WizardStep>

<asp:WizardStep ID="WizardStep3" runat="server" Title="SkilSet"> </asp:WizardStep>

<asp:WizardStep ID="WizardStep4" runat="server" Title="WorkExperience"

StepType="Complete" OnActivate="WizardStep4_Activate>

</asp:WizardStep>

</WizardSteps>

</asp:Wizard>
Wizard
Wizard Control
Data Collection
S-S HTML Controls
Demo
Session Ends
Exercise
Relax