1.) Standard Controls: The standard controls enable you to render standard form elements such as buttons, input fields, and labels.
Submitting Form Data Control: the Button, LinkButton, and ImageButton controls are use to submit a form to the server
A.) Button : push button that you can use to submit a form to the server
script runat="server"
Sub btnSubmit_Click(ByVal sender As Object, ByVal e As EventArgs)
lblTime.Text = DateTime.Now.ToString("T")
End Sub
script
asp:Button
id="btnSubmit"
Text="Submit"
OnClick="btnSubmit_Click"
Runat="server"
asp:Label
id="lblTime"
Runat="server" />
Some properties
OnClientClick, click, Command Raised when the Button control is clicked. The CommandName and CommandArgument are passed to this event.
B.) ImageButton : However, the ImageButton control always displays an image.
Note: Always include alternate text for any image. The accessibility guidelines require it. Furthermore, remember that some people turn off images in their browsers for a faster surfing experience.
You can use the ImageButton control to create a simple image map.
Sub btnTarget_Click(ByVal sender As Object, ByVal e As ImageClickEventArgs)
Code
If (e.X > 90 And e.X < 110) And (e.Y > 90 And e.Y < 110) Then
lblResult.Text = "You hit the target!"
Else
lblResult.Text = "You missed!"
End If
Design
asp:ImageButton
id="btnTarget"
ImageUrl="Target.gif"
Runat="server" OnClick="btnTarget_Click"
Some Important properties of image button;
AlternateText, CommandArgument, CommandName, GenerateEmptyAlternateText
ImageAlign : Possible values are AbsBottom, AbsMiddle, Baseline, Bottom, Left, Middle, NotSet, Right, TextTop, and Top.
ImageUrl, OnClientClick, Focus, Click, Command
C.) LinkButton : Unlike a Button control, however, the LinkButton control renders a link instead of a push button.
Example:
Code
Sub lnkSubmit_Click(ByVal sender As Object, ByVal e As EventArgs)
lblResults.Text = "First Name: " & txtFirstName.Text
lblResults.Text &= "
Last Name: " & txtLastName.Text
End Sub
Design
asp:LinkButton
id="lnkSubmit"
Text="Submit"
OnClick="lnkSubmit_Click"
Runat="server"
hyperlink rendered by the LinkButton control looks like this:
a id="lnkSubmit" href="javascript:__doPostBack('lnkSubmit','')">Submit a
Supports the following properties : AccessKey, Enabled, OnClientClick, PostBackUrl, TabIndex, Text, Focus, click, Command
Displaying Images
A.) Image : The image is displayed by setting the ImageUrl property of the Image control contained in the body of the page.
Sub Page_Load()
Dim rnd As New Random()
Select Case rnd.Next(3)
Case 0
imgRandom.ImageUrl = "Picture1.gif"
imgRandom.AlternateText = "Picture 1"
Case 1
imgRandom.ImageUrl = "Picture2.gif"
imgRandom.AlternateText = "Picture 2"
Case 2
imgRandom.ImageUrl = "Picture3.gif"
imgRandom.AlternateText = "Picture 3"
End Select
End Sub
Image control supports the following properties
AlternateText, DescriptionUrl, GenerateEmptyAlternateText, ImageAlign, ImageUrl
k) Label : Whenever you need to modify the text displayed in a page dynamically, you can use the Label control
script runat="server"
Sub Page_Load()
lblTime.Text = DateTime.Now.ToString("T")
End Sub
script
form id="form1" runat="server"
div
asp:Label
id="lblTime"
Runat="server" /
/div
/form
/body Output
you can place the text between the Label control's opening and closing tags
By default, a Label control renders its contents in an HTML span tag.
The Label control supports several properties Some of them are describe here
• BackColor, BorderColor, BorderStyle, BorderWidth , CssClass,Font, ForeColor Style , ToolTip
Note: use Cascading Style Sheets to format the rendered output of the Label control.
Accepting User Input Control : The ASP.NET Framework includes several controls that you can use to gather user input. TextBox, CheckBox, and RadioButton controls. These controls correspond to the standard types of HTML input tags.
A.) TextBox : The TextBox control can be used to display three different types of input fields depending on the value of its TextMode property
a. SingleLine Displays a single-line input field.
b. MultiLine Displays a multi-line input field.
c. Password Displays a single-line input field in which the text is hidden.
asp:TextBox
id="txtUserName"
TextMode="SingleLine"
Runat="server" /
br / br /
asp:TextBox
id="txtPassword"
TextMode="Password"
Runat="server" /
br / br /
asp:TextBox
id="txtComments"
TextMode="MultiLine"
Runat="server" /
You can use the following properties to control the rendering characteristics of the TextBox contro
AccessKey: AutoCompleteType: The ASP.NET Framework does not support AutoComplete for other browsers such as FireFox or Opera.
AutoPostBack: You should avoid using the AutoPostBack property for accessibility reasons. Because it’s very confusing to someone
Columns: Enabled: MaxLength: ReadOnly: Rows: TabIndex: Wrap:
Focus: You can also set the form focus by setting either the Page.SetFocus() method or the server-side HtmlForm control's DefaultFocus property.
TextChanged
B.) CheckBox: enables you to display, well, a check box.
asp:CheckBox
id="chkNewsletter"
Text="Receive Newsletter?"
Runat="server" /
• CheckBox includes a Text property that is used to label the CheckBox
• If you use this property, then the proper (accessibility standardscompliant) HTML label tag is generated for the TextBox.
• Some Properties
o Checked, Enabled, Text, TextAlign, Focus, CheckedChanged
C.) CheckBoxList : The CheckBoxList control renders a list of check boxes.
• rendered horizontally or vertically
• can select multiple items when using a CheckBoxList control.
asp:CheckBoxList id="cblMovies"
DataSourceID="srcMovies"
DataTextField="Title"
DataValueField="Id"
RepeatColumns="2"
Runat="server" /
three properties that affect its layout
• RepeatColumns , RepeatDirection ,RepeatLayout
D.) RadioButton : use the RadioButton control in a group. Only one radio button in a group of RadioButton controls can be checked at a time.
Example:
How did you hear about our Website?
ul
li
asp:RadioButton
id="rdlMagazine"
Text="Magazine Article"
GroupName="Source"
Runat="server" /
/li
li
asp:RadioButton
id="rdlTelevision"
Text="Television Program"
GroupName="Source"
Runat="server" /
/li
li
asp:RadioButton
id="rdlOther"
Text="Other Source"
GroupName="Source"
Runat="server" /
/li
/ul
Some properties of radio button
Checked, GroupName, TabIndex, TextAlign, CheckedChanged
E.) RadioButtonList : like the DropDownList control, enables a user to select only one list item at a time, arranged either horizontally or vertically
Example: asp:RadioButtonList
id="rblMovies"
DataSourceID="srcMovies"
DataTextField="Title"
DataValueField="Id"
RepeatColumns="3"
Runat="server" /
asp:SqlDataSource
id="srcMovies"
SelectCommand="SELECT Id, Title FROM Movies"
ConnectionString=" %$ ConnectionStrings:Movies % "
Runat="server" /
Using the Panel Control
A.) Panel : The Panel control enables you to work with a group of ASP.NET controls. you can use a Panel control to hide or show a group of ASP.NET controls.
Design view’s code
asp:Panel
id="pnlOther"
Visible="false"
Runat="server"
asp:Label
id="lblOther"
Text="Other Language:"
AssociatedControlID="txtOther"
Runat="server" /
asp:TextBox
id="txtOther"
Runat="server" /
/asp:Panel
The Panel control supports the following properties:
DefaultButton, Direction, GroupingText, HorizontalAlign, ScrollBars
If you set the GroupingText property, however, the Panel control renders a fieldset tag. The value that you assign to the GroupingText property appears in the fieldset tag's legend tag.
Notes: Don't use the values Horizontal or Vertical with the ScrollBars property when you want the scrollbars to appear in browsers other than Microsoft Internet Explorer. If you want the scrollbars to appear in FireFox and Opera, use either the value Auto or Both.
Note: Every control in the ASP.NET framework supports the Visible property.
h) HyperLink : 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.
Example:
Code
Sub Page_Load()
lnkRandom.NavigateUrl = GetRandomFile()
End Sub
Design
asp:HyperLink
id="lnkRandom" Text="Random Link" Runat="server" /
HyperLink control supports the following properties
Enabled, ImageUrl, NavigateUrl, Target, Text
Note: Notice that you can specify an image for the HyperLink control by setting the ImageUrl property. If you set both the Text and ImageUrl properties, then the ImageUrl property takes precedence.
Using the Rich Controls
A.) FileUpload : control enables users to upload files to your web application.
Enabled, FileBytes, FileContent, FileName, HasFile, PostedFile, Focus, SaveAs
The HttpPostedFile class has the following properties (this is not a complete list): ContentLength, FileName, InputStream
Design asp:FileUpload
id="upImage"
Runat="server" /
B.) Calendar: The Calendar control enables you to display a calendar
You can use the calendar as a date picker or you can use the calendar to display a list of upcoming events.
Design: asp:Calendar
id="Calendar1"
Runat="server" /
Calendar control supports the following properties
DayNameFormat(FirstLetter, FirstTwoLetters, Full, Short, and Shortest), NextMonthText, NextPrevFormat(CustomText, FullMonth, and ShortMonth.), PrevMonthText, SelectedDate, SelectedDates, ShowTitle, TodaysDate, VisibleDate
The Calendar control also supports the following events:
• DayRenderRaised as each day is rendered.
• SelectionChangedRaised when a new day, week, or month is selected.
• VisibleMonthChangedRaised when the next or previous month link is clicked
e) DropDownList
g) HiddenField
m) ListBox
n) MultiView and View
p) PlaceHolder
2.) Data Controls
a) GridView
b) DataList
c) DetailsView
d) FormView
e) Repeater
f) SqlDataSource
g) SiteMapDataSource
3.) Validation Control
Technically, you can use the validation controls with any control that is decorated with the ValidationProperty attribute.
By default, the validation controls perform validation on both the client (the browser) and the server. The validation controls use client-side JavaScript.
You can use the validation controls with browsers that do not support JavaScript (or do not have JavaScript enabled). If a browser does not support JavaScript, the form must be posted back to the server before a validation error message is displayed.
a) RequiredFieldValidator : control enables you to require a user to enter a value into a form field before submitting the form.
set two important properties when using the RequiredFieldValdiator control:
• ControlToValidate The ID of the form field being validated.
• Text The error message displayed when validation fails.
Design code is
asp:TextBox
id="txtFirstName"
Runat="server" /
asp:RequiredFieldValidator
id="reqFirstName"
ControlToValidate="txtFirstName"
Text="(Required)"
Runat="server" /
Note: By default, the RequiredFieldValidator checks for a nonempty string (spaces don't count).
b) RangeValidator : control enables you to check whether the value of a form field falls between a certain minimum and maximum value.
Using the RangeValidator Control
The RangeValidator control enables you to check whether the value of a form field falls between a certain minimum and maximum value. You must set five properties when using this control:
• ControlToValidate The ID of the form field being validated.
• Text The error message displayed when validation fails.
• MinimumValue The minimum value of the validation range.
• MaximumValue The maximum value of the validation range.
• Type The type of comparison to perform. Possible values are String, Integer, Double, Date, and Currency.
Example: asp:TextBox
id="txtAge"
Runat="server" /
asp:RangeValidator
id="reqAge"
ControlToValidate="txtAge"
Text="(Invalid Age)"
MinimumValue="5"
MaximumValue="100"
Type="Integer"
Runat="server" /
with an age less than 5 or greater than 100, then the validation error message is displayed.
Note: Don't forget to set the Type property when using the RangeValidator control. By default, the Type property has the value String, and the RangeValidator performs a string comparison to determine whether a values falls between the minimum and maximum value.
D) CompareValidator: can use the CompareValidator to perform a data type check. In other words, you can use the control to determine whether a user has entered the proper type of value into a form field, such as a date in a birth date field.
The CompareValidator has six important properties: ControlToValidate, Text
• Type: The type of value being compared. Possible values are String, Integer, Double, Date, and Currency.
• Operator The type of comparison to perform. Possible values are DataTypeCheck, Equal, GreaterThan, GreaterThanEqual, LessThan, LessThanEqual, and NotEqual.
• ValueToCompare The fixed value against which to compare.
• ControlToCompare The ID of a control against which to compare.
Design Code:
asp:CompareValidator
id="cmpBirthDate"
Text="(Invalid Date)"
ControlToValidate="txtBirthDate"
Type="Date"
Operator="DataTypeCheck"
Runat="server" /
C) RegularExpressionValidator : You can use a regular expression to represent string patterns such as email addresses, Social Security numbers, phone numbers, dates, currency amounts, and product codes.
Code: enables you to validate an email address
asp:RegularExpressionValidator
id="regEmail"
ControlToValidate="txtEmail"
Text="(Invalid email)"
ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
Runat="server" /
Note: There are huge collections of regular expression patterns living on the Internet. The easiest way to find a good regular expression for a pattern is to simply Google it.
E) CustomValidator : If none of the other validation controls perform the type of validation that you need, you can always use the CustomValidator control.
The CustomValidator control has three important properties:
• ControlToValidate The ID of the form field being validated.
• Text The error message displayed when validation fails.
• ClientValidationFunction The name of a client-side function used to perform client-side validation.
The CustomValidator also supports one event:
• ServerValidate This event is raised when the CustomValidator performs validation.
You associate your custom validation function with the CustomValidator control by handling the ServerValidate event.
Code:
Protected Sub valComments_ServerValidate(ByVal source As Object, ByVal args As System
.Web.UI.WebControls.ServerValidateEventArgs)
If args.Value.Length 10 Then
args.IsValid = False
Else
args.IsValid = True
End If
End Sub
Design
asp:CustomValidator
id="valComments"
ControlToValidate="txtComments"
Text="(Comments must be less than 10 characters)"
OnServerValidate="valComments_ServerValidate"
Runat="server" /
The second parameter passed to the ServerValidate event handler is an instance of the ServerValidateEventArgs class
• Value Represents the value of the form field being validated.
• IsValid Represents whether validation fails or succeeds.
• ValidateEmptyText Represents whether validation is performed when the form field being validated does not contain a value.
F) ValidationSummary : The ValidationSummary control enables you to display a list of all the validation errors in a page in one location.
If a user enters the wrong value for a form field located toward the end of the page, then the user might never see the error message. If you use the ValidationSummary control, however, you can always display a list of errors at the top of the form.
You might have noticed that each of the validation controls includes an ErrorMessage property. We have not been using the ErrorMessage property to represent the validation error message. Instead, we have used the Text property.
The distinction between the ErrorMessage and Text property ?? ErrorMessage property appears in the ValidationSummary control, and any message that you assign to the Text property appears in the body of the page
NOTE: If you don't assign a value to the Text property, then the value of the ErrorMessage property is displayed in both the ValidationSummary control and the body of the page.
Example: asp:ValidationSummary
id="ValidationSummary1"
Runat="server" /
4.) Login Controls
a) Login
b) LoginView
c) PasswordRecovery
d) LoginStatus
e) LoginName
f) ChangePassword
5.) Navigation Control
a) SiteMapPath
b) Menu
c) TreeView
6.) Data source Controls
d) Sql Datasource
e) Xml Datasource
f) Object Datasource
g) Sitemap Datasource
Themes
12. Applying Styles, Themes, and Skins
a) Applying Styles to Controls
b) The App_Themes Folder
You create a Theme by adding a new folder to a special folder in your application named App_Themes.
When using Visual Web Developer, you can create a new Theme folder by right-clicking the name of your project in the Solution Explorer window and selecting Add ASP.NET Folder, Theme.
A Theme folder can contain a variety of different types of files, including images and text files.
The most important types of files in a Theme folder are the following:
• Skin Files
• Cascading Style Sheet Files
Warning: Be careful about how you name your Theme (the folder name). The contents of a Theme folder are automatically compiled in the background into a new class. So you want to be careful not to name a Theme with a class name that conflicts with an existing class name in your project.
C) Global and Application Themes
You can share the same Theme among multiple web applications running on the same web server. A Global Theme can contain both Skin files and Cascading Style Sheet files.
You create a Global Theme by adding the Theme to the Themes folder located at the following path:
WINDOWS\Microsoft.NET\Framework\[version]\ASP.NETClientFiles\Themes
After you add a Theme folder to this path, you can immediately start using the Theme in any file systembased website.
If you want to use the Theme in an HTTP-based website, you need to perform an additional step. You must add the Theme folder to the following path:
Inetpub\wwwroot\aspnet_client\system_web\[version]\Themes
You can copy the Theme to this folder manually or you can use the aspnet_regiis tool to copy the Theme folder. Execute the aspnet_regiis tool from the command line like this:
aspnet_regiis -c
D) Assigning a Theme to a Page
A Theme can contain one or more Skin files. A Skin enables you to modify any of the properties of an ASP.NET control that have an effect on its appearance.
The Skin is applied to every page to which the Simple Theme is applied.
Add Code in Head %@ Page Language="C#" Theme="Simple" %
Note: By default, all control properties are themeable (can be modified in a Skin file). However, certain control properties are decorated with the Themeable(False) attribute, which disables theming.
e) Assigning a Theme in Config
Rather than add the Theme or StyleSheetTheme attribute to each and every page to which you want to apply a Theme, you can register a Theme for all pages in your application in the web configuration file.
Code in Web.Config
?xml version="1.0"?
configuration xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0"
system.web
pages theme="Site" /
/system.web
/configuration
Rather than use the theme attribute, you can use the styleSheetTheme attribute to apply a Theme to the pages in an application.
?xml version="1.0"?
configuration xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0"
system.web
pages styleSheetTheme="Site" /
/system.web
/configuration
After you enable a Theme for an application, you can disable the Theme for a particular page by using the EnableTheming attribute with the %@ Page % directive.
Code: %@ Page Language="VB" EnableTheming="false" %
f) Disabling Themes for a Control
Every ASP.NET control includes an EnableTheming property.
You can use the EnableTheming property to prevent a Skin from being applied to a particular control in a page.
g) Default and Named Skins
Default:
Create: Simple\TextBox.skin
Code:
asp:TextBox
BackColor="Yellow"
BorderStyle="Dotted"
Runat="Server" /
And add code before the head
%@ Page Language="VB" Theme="Simple" %
Now all textbox in that particular form become dotted and yellow
Named Skins : When you create a Named Skin, you can decide when you want to apply the Skin.For example, you might want required fields in a form to appear with a red border. In that case, you can create a Named Skin and apply the Skin to only particular TextBox controls.
Create: Simple2\TextBox.skin
asp:TextBox
SkinID="DashedTextBox"
BorderStyle="Dashed"
BorderWidth="5px"
Runat="Server" /
asp:TextBox
BorderStyle="Double"
BorderWidth="5px"
Runat="Server" /
Design Code:
asp:TextBox
id="txtFirstName"
SkinID="DashedTextBox"
Runat="server" /
br / br /
asp:TextBox
id="txtLastName"
Runat="server" /
the first TextBox appears with a dashed border and the second TextBox appears with a double border
h) Contents of a Theme and Skin
i) Using CSS in Themes
As an alternative to Skins, you can use a Cascading Style Sheet file to control the appearance of both the HTML elements and ASP.NET controls contained in a page.
If you add a Cascading Style Sheet file to a Theme folder, then the Cascading Style Sheet is automatically applied to every page to which the Theme is applied.
For example, App_Themes\StyleTheme\SimpleStyle.css
Write code in simplestyle.css is
html
{
background-color:gray;
font:14px Georgia,Serif;
}
Now just add %@ Page Language="VB" Theme="StyleTheme" %
The Cascading Style Sheet is used to style several HTML elements in
Style Sheet sets the background color of the page to the value Gray.
The advantage of using Cascading Style Sheets is that they result in leaner and faster loading pages. The more content that you can place in an external Style Sheet, the less content must be loaded each time you make a page request
When you add multiple Style Sheets to a Theme, the style sheets are linked to a page in alphabetical order
link href="App_Themes/Simple/ThemeA.css" type="text/css" rel="stylesheet" /
link href="App_Themes/Simple/ThemeB.css" type="text/css" rel="stylesheet" /
link href="App_Themes/Simple/ThemeC.css" type="text/css" rel="stylesheet" /
j) Using Images in Themes
k) Assigning the Theme in Code
http://quickstarts.asp.net/QuickStartv20/aspnet/doc/themes/default.aspx
