Standard Controls By SRIRAM.

B

Standard Controls
         

Label Literal Localize TextBox Button Link Button Image Button Hyper Link Calendar Ad Rotator

         

List Box DropDownList Check Box Check Box List Radio Button Radio Button List Image Table Panel &Place Holder 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() the text box. -> Enables you to set the initial form focus to

Event TextChanged the text box Properties

–> Raised on the server when the contents of are changed.

Autopostback TextBox the contents of

-> Enables you to post the form containing the back to the server automatically when 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 Command & -> Raised when the button control is clicked -> 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 to Enabled OnClientClick -> Enables you to specify a command name that is passed the command event. -> Enables you to disable the Button control -> 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 serverside 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. -> Enables you to specify the URL to the image.

ImageUrl

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 SelectionChanged selected. -> Raised as each day is rendered -> Raised when a new day, week or month is

.

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. // XML File - MyAds.XML

<Advertisements> <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_SelectedIndex Changed” > <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. checkbox. <asp:RadioButton ID=”RadioButton1” Runat=”server” Text=”Male” GroupName=”Sex”/> <asp:RadioButton ID=”RadioButton1” Runat=”server” Text=”Female” GroupName=”Sex”/> It uses the same property,methods & events like

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 For example, you could add rows to before the user sees the page.

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: BulletedListDisplayMode  Circle values:        

CustomImage Disc LowerAlpha LowerRoman NotSet Numbered Square UpperAlpha UpperRoman

  

HyperLink LinkButton Text

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" </asp:WizardStep> Title="YourName">

<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