ASP.NET - Basic Controls
ASP.NET - Basic Controls
Control is inbuilt functions, when we are using the control that automatically generate the html code Controls used for designing.
PROPERTY:
A property is athing that describes the features of an object.A property is piece of data contained within the class that has an exposed interface for reading/writing.The following illustrates the Standard Toolbox in Visual Studio
DISPLAYING INFORMATION
The ASP.NET Framework includes two controls you can use to display text in a page:
the Label control and the Literal control. Whereas the Literal control simply displays text, the Label control supports several additional formatting properties
USING THE LABEL CONTROL
Whenever you need to modify the text displayed in a page dynamically, you can use the Label control.The Label control supports several properties you can use to format the text displayed by the Label
• BackColor—Enables you to change the background color of the label.
• BorderColor—Enables you to set the color of a border rendered around the label.
• BorderStyle—Enables you to display a border around the label. Possible values are NotSet, None, Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, and Outset.
• BorderWidth—Enables you to set the size of a border rendered around the label.
• CssClass—Enables you to associate a Cascading Style Sheet class with the label.
• Font—Enables you to set the label’s font properties.
• ForeColor—Enables you to set the color of the content rendered by the label.
• Style—Enables you to assign style attributes to the label.
• ToolTip—Enables you to set a label’s title attribute. (In Microsoft Internet Explorer, the title attribute displays as a floating tooltip.)
ACCEPTING USER INPUT
The ASP.NET Framework includes several controls that you can use to gather user input.
Using the TextBox Control
You can use the TextBox control to display three different types of input fields depending on the value of its TextMode property. The TextMode property accepts the following three values:
• SingleLine— Displays a single-line input field.
• MultiLine— Displays a multiline input field.
• Password— Displays a single-line input field in which the text is hidden.
we can use the following properties to control the rendering characteristics of the TextBox control :
• AccessKey— Enables you to specify a key that navigates to the TextBox control.
• AutoCompleteType— Enables you to associate an AutoComplete class with the TextBox control.
• AutoPostBack— Enables you to post the form containing the TextBox back to the server automatically when the contents of the TextBox is changed.
• Columns— Enables you to specify the number of columns to display.
• Enabled— Enables you to disable the text box.
• MaxLength— Enables you to specify the maximum length of data that a user can enter in a text box. (This does not work when TextMode is set to Multiline.)
• ReadOnly— Enables you to prevent users from changing the text in a text box.
• Rows— Enables you to specify the number of rows to display.
• TabIndex— Enables you to specify the tab order of the text box.
• Wrap— Enables you to specify whether text word-wraps when the TextMode is set to Multiline.
The TextBox control also supports the following method:
• Focus— Enables you to set the initial form focus to the text box.
And, the TextBox control supports the following event:
• TextChanged— Raised on the server when the contents of the text box are changed.
USING THE CHECKBOX CONTROL
The CheckBox control enables you to display, well, a check box.
The CheckBox control supports the following properties :
• AccessKey— Enables you to specify a key that navigates to the TextBox control.
• AutoPostBack— Enables you to post the form containing the CheckBox back to the server automatically when the CheckBox is checked or unchecked.
• Checked— Enables you to get or set whether the CheckBox is checked.
• Enabled— Enables you to disable the TextBox.
• TabIndex— Enables you to specify the tab order of the check box.
• Text— Enables you to provide a label for the check box.
• TextAlign— Enables you to align the label for the check box. Possible values are Left and Right.
The CheckBox control also supports the following method:
• Focus— Enables you to set the initial form focus to the check box.
And the CheckBox control supports the following event:
• CheckedChanged— Raised on the server when the check box is checked or unchecked.
USING THE RADIOBUTTON CONTROL
You always use the RadioButton control in a group. Only one radio button in a group of RadioButton controls can be checked at a time.
The RadioButton control supports the following properties:
• AccessKey— Enables you to specify a key that navigates to the RadioButton control.
• AutoPostBack— Enables you to post the form containing the RadioButton back to the server automatically when the radio button is checked or unchecked.
• Checked— Enables you to get or set whether the RadioButton control is checked.
• Enabled— Enables you to disable the RadioButton.
• GroupName— Enables you to group RadioButton controls.
• TabIndex— Enables you to specify the tab order of the RadioButton control.
• Text— Enables you to label the RadioButton control.
• TextAlign— Enables you to align the RadioButton label. Possible values are Left and Right.
The RadioButton control supports the following method:
• Focus— Enables you to set the initial form focus to the RadioButton control.
SUBMITTING FORM DATA
The ASP.NET Framework includes three controls you can use to submit a form to the server: Button, LinkButton, and ImageButton. These controls have the same function, but each control has a distinct appearance.
Using the Button Control
The Button control renders a push button that you can use to submit a form to the server
The Button control supports the following properties :
• AccessKey— Enables you to specify a key that navigates to the Button control.
• CommandArgument— Enables you to specify a command argument passed to the Command event.
• CommandName— Enables you to specify a command name 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.
• TabIndex— Enables you to specify the tab order of the Button control.
• Text— Enables you to label the Button control.
• UseSubmitBehavior— Enables you to use JavaScript to post a form.
The Button control also supports the following method:
• Focus— Enables you to set the initial form focus to the Button control.
The Button control also supports the following two events:
• Click— Raised when the Button control is clicked.
• Command— Raised when the Button control is clicked. The CommandName and CommandArgument are passed to this event.
USING THE LINKBUTTON CONTROL
The LinkButton control, like the Button control, enables you to post a form to the server. Unlike a Button control, however, the LinkButton control renders a link instead of a push button.
The LinkButton control supports the following properties :
• AccessKey— Enables you to specify a key that navigates to the Button control.
• CommandArgument— Enables you to specify a command argument passed to the Command event.
• CommandName—Enables you to specify a command name passed to the Command event.
• Enabled— Enables you to disable the LinkButton control.
• OnClientClick— Enables you to specify a client-side script that executes when the LinkButton is clicked.
• PostBackUrl— Enables you to post a form to a particular page.
• TabIndex— Enables you to specify the tab order of the LinkButton control.
• Text— Enables you to label the LinkButton control.
The LinkButton control also supports the following method:
• Focus— Enables you to set the initial form focus to the LinkButton control
The LinkButton control also supports the following two events:
• Click— Raised when the LinkButton control is clicked.
• Command— Raised when the LinkButton control is clicked. The CommandName and CommandArgument are passed to this event.
USING THE IMAGEBUTTON CONTROL
The ImageButton control, like the Button and LinkButton controls, enables you to post a form to the server. However, the ImageButton control always displays an imaThe ImageButton control supports the following properties :
• AccessKey— Enables you to specify a key that navigates to the ImageButton control.
• AlternateText— Enables you to provide alternate text for the image (required for accessibility).
• DescriptionUrl— Enables you to provide a link to a page that contains a detailed description of the image (required to make a complex image accessible).
• CommandArgument— Enables you to specify a command argument that is passed to the Command event.
• CommandName— Enables you to specify a command name passed to the Command event.
• Enabled— Enables you to disable the ImageButton control.
DISPLAYING IMAGES
The ASP.NET Framework includes two controls for displaying images: Image and ImageMap. The Image control simply displays an image. The ImageMap control enables you to create a client-side, clickable, image map.
The Image control supports the following properties :
• AlternateText— Enables you to provide alternate text for the image (required for accessibility).
• DescriptionUrl— Enables you to provide a link to a page that contains a detailed description of the image (required to make a complex image accessible).
• GenerateEmptyAlternateText— Enables you to set the AlternateText property to an empty string.
• ImageAlign— Enables you to align the image relative to other HTML elements in the page. Possible values are AbsBottom, AbsMiddle, Baseline, Bottom, Left, Middle, NotSet, Right, TextTop, and Top.
• ImageUrl— Enables you to specify the URL to the image.
USING THE IMAGEMAP CONTROL
The ImageMap control enables you to create a client-side image map. An image map displays an image. When you click different areas of the image, things happen.
An ImageMap control is composed out of instances of the HotSpot class. A HotSpot defines the clickable regions in an image map. The ASP.NET Framework ships with three HotSpot classes:
• CircleHotSpot— Enables you to define a circular region in an image map.
• PolygonHotSpot— Enables you to define an irregularly shaped region in an image map.
• RectangleHotSpot— Enables you to define a rectangular region in an image map.
The ImageMap control supports the following properties (this is not a complete list):
• AccessKey— Enables you to specify a key that navigates to the ImageMap control.
• AlternateText— Enables you to provide alternate text for the image (required for accessibility).
• DescriptionUrl— Enables you to provide a link to a page that contains a detailed description of the image (required to make a complex image accessible).
• GenerateEmptyAlternateText— Enables you to set the AlternateText property to an empty string.
• HotSpotMode— Enables you to specify the behavior of the image map when you click a region. Possible values are Inactive, Navigate, NotSet, and PostBack.
• HotSpots— Enables you to retrieve the collection of HotSpots contained in the ImageMap control.
• ImageAlign— Enables you to align the image map with other HTML elements in the page. Possible values are AbsBottom, AbsMiddle, Baseline, Bottom, Left, Middle, NotSet, Right, TextTop, and Top.
• ImageUrl— Enables you to specify the URL to the image.
• TabIndex— Enables you to specify the tab order of the ImageMap control.
• Target— Enables you to open a page in a new window.
The ImageMap control also supports the following method:
• Focus— Enables you to set the initial form focus to the ImageMap control.
USING THE HYPERLINK CONTROL
The HyperLink control enables you to create a link to a page. Unlike the LinkButton control, the HyperLink control does not submit a form to a server.
The HyperLink control supports the following properties
• Enabled— Enables you to disable the hyperlink.
• ImageUrl— Enables you to specify an image for the hyperlink.
• NavigateUrl— Enables you to specify the URL represented by the hyperlink.
• Target— Enables you to open a new window.
• Text— Enables you to label the hyperlink.
The following program illustrates the usage of label, textbox, checkbox, radiobutton and button.
Create an application which will ask the user to input his name and a message, display the two items concatenated in a label, and change the format of the label using radio buttons and check boxes for selection , the user can make the label text bold ,underlined or italic and change its color . include buttons to display the message in the label, clear the text boxes and label and exit.
CODE:
using System;
namespace DisplayMessage {
public partial class DisplayTheMessage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e) { }
protected void btndisplay_Click(object sender, EventArgs e)
{
if (chkbold.Checked == true) lblDisplay.Font.Bold = true; else lblDisplay.Font.Bold = false;
if (chkitalic.Checked == true) lblDisplay.Font.Italic = true; else
lblDisplay.Font.Italic = false;
if (chkunderline.Checked == true) lblDisplay.Font.Underline = true;
lblDisplay.Font.Underline = false;
if (rbred.Checked == true)
lblDisplay.ForeColor = System.Drawing.Color.Red;
else if(rbgreen.Checked == true) lblDisplay.ForeColor = System.Drawing.Color.Green; else if (rbpink.Checked == true) lblDisplay.ForeColor = System.Drawing.Color.Pink; lblDisplay.Text = "Name:" + txtName.Text + "<br/>" + "Message:" + txtMessage.Text; } } }
The output of the above program will be as follows
