Unit 2: Server Control

2.1. Postback
2.2. Databinding
2.2.1. Grid View
2.2.2. Listbox
2.2.3. Data List
2.2.4. Data binding events
2.2.5. Repeater
2.2.6. Form View
2.3. Web Server Controls, HTML Server Controls (basic HTML Server Control), Validation
Controls, Navigation Controls, Login Control
2.4. Master Page, Themes & CSS

2.1 Postback
• A Post back is an action taken by an interactive webpage, when the entire page and its contents
are sent to the server for processing some information and then, theserver posts the same page
back to the browser.
• To determine whether the page is posted back or it is the first request for the page, you can use
IsPostBack property of the page. Once the page is posted back, IsPostBack property becomes
true.
• IsPostBack Property is false first time the page is loaded and is true when the page is submitted
and processed.
• Example

ProtectedSub btnclick_Click(ByVal sender AsObject, ByVal e As System.EventArgs) Handles

btnclick.Click
MsgBox("Hello India")
EndSub

ProtectedSub Page_Load(ByVal sender AsObject, ByVal e As System.EventArgs)

HandlesMe.Load
If IsPostBack = FalseThen
MsgBox("Page Load")
EndIf
EndSub

AutoPostBack

• It is the mechanism by which the page will be posted back to the server automatically based on
some events in the web controls.
• The AutoPostBack property is used to set or return whether or not an automatic post back occurs
when the user presses "ENTER" or "TAB" in the Textbox control. If this property is set to TRUE
the automatic post back is enabled, otherwise FALSE. Default is FALSE.
• If we set autopostback property to true of any control then after processing on any control a
request (postback) is send to the server.

Example:

<form id="form1" runat="server">

Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 1
Sutex bank college of computer applications and science.
 Unit 2: Server Control

<div>
<asp:DropDownList ID="ddlcity" runat="server" AutoPostBack="true" >
</asp:DropDownList>
<asp:Label ID="lblcity" runat="server" Text="Label"></asp:Label>
</div>
</form>
Protected Sub ddlcity_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)
Handles ddlcity.SelectedIndexChanged
lblcity.Text = ddlcity.SelectedItem.Text
End Sub

Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 2

Sutex bank college of computer applications and science.
 Unit 2: Server Control

2.3 Server Controls

• ASP.Net Server Controls are objects in an ASP.Net web page that runs when the page is
requested and are seen in the output of the page.
• Many server controls are created based upon the HTML form elements. Many server controls
provide complex functionalities such as calendar control.
• All server controls are understood by and executedon the server.
• It must be placed inside a form tag with runat=“server” attribute.
• All server controls must have runat attribute with value “server”. (runat=“server”)

Control Class
• All server controls are derived from this Control class. Its namespace is System.Web.UI. It
applies to the Page class as well. You can use an object of this class to refer any control as it is
parent of all the server controls.
Properties Methods Events
ID DataBind() DataBindings
Page FindControl() Disposed
Parent HasControls() Init
Visible Render() Load
ClientID PreRender
EnableViewState UnLoad

Namespaces of Server Controls

• System.Web.UI.HtmlControls
• System.Web.UI.WebControls

Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 3

Sutex bank college of computer applications and science.
 Unit 2: Server Control

Types of Server Controls

HTML Server Controls

• HTML Form Elements with runat=“server” attributewhich makes them accessible to the server-
side code.
Web Server Controls
• Standard Controls
• Rich Controls
• Validation Controls
• Navigation Controls
• Login Controls
HTML Server Control

• HTML server controls are useful for migrating ASP applications to ASP.Net applications. You
can also turn any HTML tag into a server control and if there is no direct class, ASP.Net will use
theHtmlGenericControl class.
• To change an ordinary HTML element into a server control, simply add the runat=”server”
attribute to the element tag.

Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 4

Sutex bank college of computer applications and science.
 Unit 2: Server Control

Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 5

Sutex bank college of computer applications and science.
 Unit 2: Server Control

Web Server Controls

• Like HTML server controls, Web server controls are also created on the server and they require a
runat="server" attribute to work. However, Web server controls do not necessarily map to any
existing HTML elements.
• The syntax for creating a Web server control is:
o <asp:control_name id="some_id" runat="server" />
(1) Standard Controls
• All standard controls are defined the System.Web.UI.WebControl namespace.
• Web controls have the features, such as automatic postback. Basic Web Controls have same
functionality as HTML server controls.
• Standard Controls inherit all the properties, methods andevents of WebControl class and in
additions; thesecontrols also have their own properties, methods and event.
Label Control
The Label Control is basically used to display the Information (Text) on Web Forms. Any end User can
not Edit (change) the Label Information.
Properties:

Property Description
Text The text to be shown for the label
Font It is used to sets the font of the Label text.
ForeColor It is used to sets the text color in the Label.
Height It is used to Specify the height of the Label Control.
BackColor It is used to Sets the Background color of the Label control.
BorderWidth It is used to Sets the Border color of the Label control.
BorderStyle It is used to Sets the Style of the Label control.
AccessKey Keyboard shortcut used by the control.
Textbox Control
It is used to input the Data (text).Any end user can easily enter the text in this control.
Properties
Property Description
Text It is used to sets the text in TextBox Control.
TextMode It is used to sets the mode of the TextBox Control as Single
Mode,Multiline or Password.
Rows It is used to sets the number of rows display in a TextBox(Multiline).

MaxLength It is used to sets the maximum number of character alloweded in a

TextBox control.
ReadOnly It is used to read the contents by the end used but cannot change it.

Columns It is used to sets the width of character in TextBox.

AutoPostBack It is used to handle the event when the TextBox control loses focus.

Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 6

Sutex bank college of computer applications and science.
 Unit 2: Server Control

Wrap It gets or sets a value indicating whether the text content wraps within a
multiline textbox
Event:
TextChanged It occurs when the end user change the text of the TextBox control.

Button Control: The Button control is used to create an Event and send request to the web
server.ASP.NET provides three types of button control:
• Button: It displays text within a rectangular area.
• Link Button: It displays text that looks like a hyperlink.
• Image Button: It displays an image.
Properties:
Property Description

Text It is used to sets the text to be displayed on the Button Control.

CommandName A string value that is passed to the command event when a user clicks
the button.

OnClientClick It is used to sets the client side script that executes when a Button click
event is fired.
CauseValidation Determines whether page validation occurs when a user clicks the
button. The default is true.
PostBackUrl The URL of the page that is requested when the user clicks the button

ImageUrl For image button control only. The image to be displayed for the button.

AlternateText For image button control only. The text to be displayed if the browser
cannot display the image.
Event:
Click It is an Event that occurs when the Button is clicked.
Command It is also an Event that occurs when the Button is clicked. It is used
whenever we are using multiple Button on one page.

Example:

Source Code
ProtectedSub btnsubmit_Click(ByVal sender AsObject, ByVal e As System.EventArgs) Handles
btnsubmit.Click

Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 7

Sutex bank college of computer applications and science.
 Unit 2: Server Control

Dim str AsString

str = txtname.Text
Label1.Text = str
EndSub

Checkbox Control
• It is used to get multiple inputs from the user. It allows user to select choices from the set of
choices.
• It takes user input in yes or no format. It is useful when we want multiple choices from the user.
Properties
Property Description
AccessKey It is used to set keyboard shortcut for the control.
TabIndex The tab order of the control.
BackColor It is used to set background color of the control.
BorderColor It is used to set border color of the control.
BorderWidth It is used to set width of border of the control.
Font It is used to set font for the control text.
ForeColor It is used to set color of the control text.
Text It is used to set text to be shown for the control.
ToolTip It displays the text when mouse is over the control.
Visible To set visibility of control on the form.
Height
It is used to set height of the control.
Width It is used to set width of the control.
Checked It is used to set check state of the control either true or false

Event
Checkchanged It occurs when someone change the CheckBox true or false state.

• There is other important property of checkbox is Autopostback.

• If we set Autopostback = true on checkbox then the checkbox control CheckedChanged event
enable for user, means we go to the code behind while check or uncheck checkbox control.

List Controls

• The list controls generate list boxes, dropdown lists, and other repeating controls that can be
either bound to a data source such as a database or programmatically filled with items.
• Most of list controls allow the user to select one or more items.

Some of the important common properties of list controls are as follows:

SelectedValue Get the value of the selected item from the dropdown list.
SelectedIndex Gets the index of the selected item from the dropdown box.
SelectedItem Gets the text of selected item from the list.
Items Gets the collection of items from the dropdown list.

Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 8

Sutex bank college of computer applications and science.
 Unit 2: Server Control

DataSourceID ID of the datasource control to provide data.

DataTextField Name of the data source field to supply the text of the items. Generally this
field came from the datasource.
DataValueField Name of the data source field to supply the value of the items. This is not
visible field to list controls, but you can use it in the code.

Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 9

Sutex bank college of computer applications and science.
 Unit 2: Server Control

CheckboxList Control
• It is used to create a multi-selection check box group.
Properties
Property Description
RepeatColumns The number of columns to use when displaying the check box group.
RepeatDirection Specifies whether the check box group should be repeated horizontally
or vertically.
RepeatLayout The layout of the check box group.
TextAlign On which side of the check box the text should appear.
Radiobutton

• It is used to select any one option among multiple.

Properties

Property Description
Checked It Indicate the radiobutton control is checked(true) or unchecked(false)
GroupName It is used to make a group of radiobutton. If we assign same value to more
than one radiobutton then we can select only one radiobutton from that group
of radiobutton
RadioButtonList

• It is same as radiobutton but it displays a list of radio buttons that can be arranged either
horizontally or vertically. You can select only one item from the given RadioButtonList of
options.

Properties

Property Description
RepeatColumns The number of columns to use when displaying the check box group.
RepeatDirection Specifies whether the check box group should be repeated horizontally
or vertically.
RepeatLayout The layout of the check box group.
TextAlign On which side of the check box the text should appear.

Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 10

Sutex bank college of computer applications and science.
 Unit 2: Server Control

DropdownlistControl:
• We can use dropdownlist control for hold group of items. It is used to store the multiple items
and allow user to select only one item from it.
• It is also known as combo box.
• In dropdownlist control we can store multiple items but we can select only one item at a time,
that’s why it is also known as Single Row Selection Box.
Properties:
Property Description
Id Identification name of control
Text It is use to specify the Text display in the
dropdownlist.
Value It is invisible value, but we can get the value
while programming
Items It shows the collection of item in the
Dropdownlist.
AutoPostBack Its value is ‘true’ or ‘false’. True represents
that form is posted back automatically to the
server when the user changes the dropdown
list selection. By default it is false
DropDownList1.Items.Count Return the total count of items in the
dropdownlist
DropDownList1.Items.Add(“ItemName”) Add the new item in to the dropdownlist
control
DropDownList1.Items.Insert(int index, Add the new item at specific position in
“ItemName”) dropdownlist control.
DropDownList1.Items.Remove(“ItemName”) Remove the item from the dropdownlist
control
DropDownList1.Items.RemoveAt(int index) Remove the item from the dropdownlist at
desired position index
DropDownList1.Items.Clear() Clear all the items from dropdownlist
control.
DropDownList1.SelectedItem.Text Returns the Text value of selected item of
the dropdownlist.
DropDownList1.SelectedValue Returns the Value property of the selected
item of the dropdownlist.
DropDownList1.SelectedIndex Returns the Index of selected item of
dropdownlist. (Index always start from
Zero).
DropDownList1.DataSource DataTable or DataSet
DropDownList1.DataValueField Bind the Value to listbox (It is Invisible in
listbox)
DropDownList1.DataTextField Bind the Text to listbox (It is visible in
listbox)
DropDownList1.Databind
Event
Selectedindexchanged Fires when the selected index has been changed.

Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 11

Sutex bank college of computer applications and science.
 Unit 2: Server Control

ListboxControl
• It used to store the multiple items and allow user to select multiple item from listbox control. It is
same as dropdownlist control.
• It allow user to select multiple items same time. So we can also say listbox is a multi row
selection box control.

Property Description
Id Identification name of control
Text It is use to specify the Text display in the listbox
Value It is invisible value, but we can get the value while
programming
Items It shows the collection of item in the listbox
AutoPostBack Its value is ‘true’ or ‘false’. True represents that form
is posted back automatically to the server when the
user changes the listbox selection.
SelectionMode It is used To change the mode of section from single to
multiple.
Listbox1.Items.Count Return the total count of items in the listbox
Listbox1.Items.Add(“ItemName”) Add the new item in to the listboxcontrol
Listbox1.Items.Insert(int index, Add the new item at specific position in
“ItemName”) listboxcontrol.
Listbox1.Items.Remove(“ItemName”) Remove the item from the listboxcontrol
Listbox1.Items.RemoveAt(int index) Remove the item from the listboxat desired position
index
Listbox1.Items.Clear() Clear all the items from listboxcontrol.
Listbox1.SelectedItem.Text Returns the Text value of selected item of the listbox.
Listbox1.SelectedValue Returns the Value property of the selected item of the
listbox.
Listbox1.SelectedIndex Returns the Index of selected item of listbox. (Index
always start from Zero).
Listbox1.DataSource DataTable or DataSet
Listbox1.DataValueField Bind the Value to listbox (It is Invisible in listbox)
Listbox1.DataTextField Bind the Text to listbox (It is visible in listbox)
ListBox1.DataBind()
Event
Selectedindexchanged Fires when the selected index has been changed.
HyperlinkControl
• It allowsusers to navigate from one page to another page.
Properties
Properties Description
ImageUrl Path of the image to be displayed by the control.
NavigateUrl Target link URL.
Text The text to be displayed as the link.
Target The window or frame which loads the linked page.
Image Control
Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 12
Sutex bank college of computer applications and science.
 Unit 2: Server Control

It is used to display an image on a web page.

Properties
Properties Description
Alternate Text It is used to display alternate text when the image is not present.
ImageAlign It is used to sets the alignment of image control on the web page.
ImageUrl It is used to sets the path to an image to display in the image control.
Font It is used to increase or decrease font of the image control text.
DescriptionUrl It is used to set the location to a detailed description for the image.
Example:For this you can refer the example of fileupload control.
ImageMap Control
FileuploadControl
• It enables you to upload file on the server using SaveAs () method on the click Event.
• It displays a text box control and a browse button that allow users to select a file to upload to the
server.
• dIt used to upload any file like image, document file, and zip file.Etc to asp.net website.
Properties
Properties Description
FileBytes Returns an array of the bytes in a file to be uploaded.
FileContent Returns the stream object pointing to the file to be uploaded.
FileName Returns the name of the file to be uploaded.
HasFile Specifies whether the control has a file to upload.
PostedFile Returns a reference to the uploaded file.
Example:

Source Code
ProtectedSub btnupload_Click(ByVal sender AsObject, ByVal e As System.EventArgs) Handles
btnupload.Click
If FileUpload1.HasFile Then
FileUpload1.SaveAs(Server.MapPath("~/images/") + FileUpload1.FileName)
lblmsg.Text = "Image uploaded sucessfully"
Image1.ImageUrl = "~/images/" + FileUpload1.FileName
Else
lblmsg.Text = "Select Image"
EndIf
EndSub
Registration Form
Panel Control

Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 13

Sutex bank college of computer applications and science.
 Unit 2: Server Control

• We can place multiple web server control in it and make same effect or action on all control by
applying effect of Panel Control
• It is known as container control.
• For example if we want to Hide or visible more than one Control as same time, so we can place
them to in Panel control and Just Visible or Hide Panel control the all the control will be Visible
or Hide according to Panel Control.
Properties
Properties Description
BackImageUrl URL of the background image of the panel
Direction Text direction in the panel
GroupingText Allows grouping of text as a field
HorizontalAlign Horizontal alignment of the content in the pane
ScrollBars Specifies visibility and location of scrollbars within the panel
Example:Make three panels and make it visible true false according to button

Placeholder Control
• It is used to store dynamically add web server controls (button, label etc.)
• It is known as container control.
• You can add controls to a Web Form by using the Controls. Add () Method.
Example:
ProtectedSub Page_Load(ByVal sender AsObject, ByVal e As System.EventArgs) HandlesMe.Load
Dim lblname AsNewLabel
lblname.Text = "Name"
PlaceHolder1.Controls.Add(lblname)

Dim txtname AsNewTextBox

PlaceHolder2.Controls.Add(txtname)

Dim lblcity AsNewLabel

lblcity.Text = "City"
PlaceHolder3.Controls.Add(lblcity)

Dim txtcity AsNewTextBox

PlaceHolder4.Controls.Add(txtcity)
EndSub

Multiview Control

Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 14

Sutex bank college of computer applications and science.
 Unit 2: Server Control

• Multiview and View controls allow you to divide the content of a page into differentgroups,
displaying only one group at a time. Each View control manages one group of content and all the
View controls are held together in a Multiview control.
• The Multiview control is responsible for displaying one View control at a time. The View
displayed is called the active view.
• The CommandName attribute of the button control associated with the navigation of the
Multiview control are associated with some related field of the Multiview control.
• For example, if a button control with CommandName value as NextViewis associated with the
navigation of the Multiview, it automatically navigates to the next view when the button is
clicked.

Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 15

Sutex bank college of computer applications and science.
 Unit 2: Server Control

Properties

Property Description
Views Collection of View controls inside the Multiview control.
ActiveViewIndex The index indicates the active view. The index is -1, if no view is active.
Visible To set visibility of control on the form.
Example:

Source Code:

Design Code:

<formid="form1"runat="server">
<divstyle="width: 294px">
<h1>Students Details</h1>
<asp:MultiViewID="MultiView1"runat="server"ActiveViewIndex="0">
<asp:ViewID="View1"runat="server">
<tableclass="style1">
<tr>
<td>
First Name</td>
<td>
<asp:TextBoxID="txtfname"runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
&nbsp;</td>
<td>
<asp:ButtonID="Button1"runat="server"EnableTheming="False"Text="Next"/>
</td>
Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 16
Sutex bank college of computer applications and science.
 Unit 2: Server Control

</tr>
</table>
</asp:View>
<asp:ViewID="View2"runat="server">
<tableclass="style1">
<tr>
<td>
Last Name</td>
<td>
<asp:TextBoxID="txtlname"runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
&nbsp;</td>
<td>
<asp:ButtonID="Button2"runat="server"EnableTheming="False"Text="Previous"/>
<asp:ButtonID="Button5"runat="server"EnableTheming="False"Text="Next"/>
</td>
</tr>
</table>
</asp:View>
<asp:ViewID="View3"runat="server">
<tableclass="style1">
<tr>
<td>
Age</td>
<td>
<asp:TextBoxID="txtage"runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
&nbsp;</td>
<td>
<asp:ButtonID="Button4"runat="server"EnableTheming="False"Text="Previous"/>
<asp:ButtonID="Button3"runat="server"EnableTheming="False"Text="Next"/>
</td>
</tr>
</table>
</asp:View>
<asp:ViewID="View4"runat="server">
<tableclass="style1">
<tr>
<td>
FirstName</td>
<td>
<asp:LabelID="lblname"runat="server"Text="Label"></asp:Label>
</td>
</tr>

Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 17

Sutex bank college of computer applications and science.
 Unit 2: Server Control

<tr>
<td>
LastName</td>
<td>
<asp:LabelID="lbllastname"runat="server"Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td>
Age</td>
<td>
<asp:LabelID="lblage"runat="server"Text="Label"></asp:Label>
</td>
</tr>
</table>
</asp:View>
</asp:MultiView>
</div>
</form>

Coding

ProtectedSub btnnext1_Click(ByVal sender AsObject, ByVal e As System.EventArgs) Handles

btnnext1.Click
MultiView1.SetActiveView(View2)
EndSub
ProtectedSub btnprev1_Click(ByVal sender AsObject, ByVal e As System.EventArgs) Handles
btnprev1.Click
MultiView1.SetActiveView(View1)
EndSub
ProtectedSub btnnext2_Click(ByVal sender AsObject, ByVal e As System.EventArgs) Handles
btnnext2.Click
MultiView1.SetActiveView(View3)
EndSub

ProtectedSub btnprev2_Click(ByVal sender AsObject, ByVal e As System.EventArgs) Handles

btnprev2.Click
MultiView1.SetActiveView(View2)
EndSub

ProtectedSub btnnext3_Click(ByVal sender AsObject, ByVal e As System.EventArgs) Handles

btnnext3.Click
' MultiView1.SetActiveView(View4)
MultiView1.ActiveViewIndex = 3
lblname.Text = txtfname.Text
lbllastname.Text = txtlname.Text
lblage.Text = txtage.Text
EndSub

Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 18

Sutex bank college of computer applications and science.
 Unit 2: Server Control

https://www.msdotnet.co.in/2013/06/web-forms-controls-in-aspneti.html#.YOLb_ugzbIU

Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 19

Sutex bank college of computer applications and science.
 Unit 2: Server Control

Validation Controls
• These controls allow you to validate an input control against several standard or user-
defined rules. If validation fails, you can prevent page processing or allow these controls to
showerror messages in the page.
BaseValidator class
• It provides the core implementation for all validation controls.
• Validation controls are used to validate user input in an associated input control.
• When the user enters a value that does not match the validation criteria, the validation control
displays an error message.

Properties Description
ControlToValidate It gets or sets the input control to validate.(Mandatory)
Display It gets or sets the display behavior of the error.
ErrorMessage It gets or sets the text for the error message displayed in the
ValidationSummary control when validation fails.
Text It gets or sets the text displayed in the validation control when validation
fails.
IsValid It gets or sets avalue that indicates whether the associated input control
passes validation or not.
SetFocusOnError It gets or sets a value that indicates whether focus is set to the control
specified by the ControlToValidate property when validation fails.
ValidationGroup It gets or sets the name of the validation group to which this validation
control belongs

• All Validation Controls except Validation Summary control inherits all the common properties of
BaseValidator class.

Note:
• Property named ControlToValidate cannot be left blank.
• Multiple validation controls can be assigned to a web form input control.
• CauseValidation property of the control must be “true” only then server validation will take
place.

Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 20

Sutex bank college of computer applications and science.
 Unit 2: Server Control

There are six types of validation controls in ASP.NET

1. RequiredFieldValidation Control
• It is used to make an input control a required field.
• It checks whether the control is empty or not when the form is submitted. Multiple
validators can also be associated with the same input control.

Properties Description
Initial Value It gets or sets the initial value of the field.

2. CompareValidator Control
• It is used to compare the value entered by the user in an input control, such as a TextBox control,
with the value entered in another input control or constant value.
• It passesvalidation if the value of the input control matches the criteria.

Properties Description
Type It defines the type of the data.
ControlToCompare It gets or sets the input control to compare with input control being
validated.
ValueToCompare It gets or sets the constant value to compare with value entered by the user
in the input control being validated.
Operator It specifies the comparison operator, the available values are: Equal,
NotEqual, GreaterThan, GreaterThanEqual, LessThan,
LessThanEqual, and DataTypeCheck.

3. RangeValidator Control
• It is used to tests whether the value of an input control is within a specified range or not.
Properties Description
Type It defines the type of the data. The available values are: Currency, Date,
Double, Integer, and String
MinimumValue It gets or sets the minimum value of the range.
MaximumValue It gets or sets the maximum value of the range.

4. RegularExpressionValidator Control
• It is used to check whether the value of an input control matches a pattern defined by a regular
expression.
• This type of validation allows you to check e-mail addresses, telephone numbers, and postal
codes.

Properties Description
ValidationExpression It gets or sets regular expression that determine the pattern used to
validate filed. There are various predefine expression available. So you
can use it.
5. CustomValidator Control

• It is used to provide a user-defined validation function for an input control. Validation controls
always perform validation on the server.
• They also have complete client-side implementation that allows script-enabled browsers to
perform validation on the client.

Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 21

Sutex bank college of computer applications and science.
 Unit 2: Server Control

• To create a server-side validation function, you need to provide a handler for the
ServerValidateevent that performs the validation.
• The value of the input control that is to be validated can be accessed by using the Value property
of the ServerValidateEventArgs object passed into the event handler as a parameter.
• The result of the validation is then stored in thelsValid property of the
ServerValidateEventArgs object.
• Default event: ServerValidate()
6. ValidationSummary
• It is used to summarize the error messages from all validators on a Web page in a single location.
• You can also summarize the error messages from particular group of validators using
ValidationGroup property.

Properties Description
DisplayMode It gets or sets the display mode of the validation
summary(List,BulletList,Sinlgeparagraph)
ShowMessageBox It gets or sets a value indicating whether the validation summary is
displayed in message box or not.
ShowSummary It gets or sets a value indicating whether the validation summary is
displayed or not.

Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 22

Sutex bank college of computer applications and science.
 Unit 2: Server Control

Rich Controls

(1) Calendar
- It is used to displays a single month calendar that allows the user to select a date and move to
the next or previous month.
- Users can use this control to view dates or select a specific day, week, or month.

Properties

Property Description
DayNameFormat It is used to specify the name format of the days of a week

VisibleDate It is used to specify the month to be displayed in a Calendar control. The

property is updated after the VisibleMonthChanged event is raised.
FirstDayOfWeek To specify the day of the week to be displayed in the first column of the
Calendar control
SelectedDate It is used to represent the date selected in a Calendar control
SelectionMode It is used to specify whether a user can select a day, a week, or a month.
The default value is a day.
ShowGridLines Either true/false
ShowTitle Either true/false
ShowDayHeader Either true/false
ShowNextPrevMonth Either true/false
NextMonthText Gets or sets the text for next month navigation control. The default value
is>.
PreMonthText Gets or sets the text for previous month navigation control. The default
value is <.
TitleFormat Display the format of title.

Event
SelectionChanged This event is raised when the user select a new
date, week or month.

Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 23

Sutex bank college of computer applications and science.
 Unit 2: Server Control

(2) AdRotator
- It is used to randomly select banners (Images) graphics from a list, which is specified in an
external XML (Extensible Markup Language) file.
- This external XML schedule file is called an Advertisement File.
Properties
Property Description
AdvertisementFile The path to the advertisement file
AlternateTextFeild The element name of the field where the alternate text is provided. The
default value is AlternateText
ImageUrlField The element name of the field where the URL for the image is provided.
The default value is ImageUrl
KeywordFilter For displaying the keyword-based ads only
NavigateUrlField The element name of the field where the URL to navigate to is provided.
The default value is NavigateUrl.
Steps to create AdRotator control
- Right-click the project name in the Solution Explorer and select Add -> Add New Item.
- Then add images to the project which we want to use in the Advertisement File
- Select XML File and set name Advertisement.xmlclick Add.
- Open the Advertisement.xml file and add the code in it.

Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 24

Sutex bank college of computer applications and science.
 Unit 2: Server Control

Following are the elements of XML file used for storing information of Advertisements.
Property Description
Advertisements Encloses the advertisement file
Ad Delineates separate ad
ImageUrl The path of image that will be displayed
NavigateUrl The link that will be followed when the user clicks the ad.
AlternateText The text that will be displayed instead of the picture if it cannot be
displayed.
Keyword Keyword identifying a group of advertisements. This is used for filtering.
Impressions The number indicating how often an advertisement will appear.
Height Height of the image to be displayed
Width Width of the image to be displayed.
- Now, let’s add a new AdRotator.aspx file, right-click the project name in the Solution Explorer
and select Add -> Add New Item, select Web Form and click Add.
- Open the AdRotator.aspx file and add the code in it.
Or
- Set the AdvertisementFile Property of the AdRotator control to the XML file that you have added
in the website.

Navigation Controls
Login Control

Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 25

Sutex bank college of computer applications and science.
 Unit 2: Server Control

2.4 Master Page, Themes &CSS

Master Pages are used when user needs a consistent look and behavior over all web pages in an
application.
When a user needs to attach header and footer for all the web pages in an application, the master pages
are used. Master pages provide a template for all otherpages in an application.
The master pages define placeholders for the content, which are overridden for the content. The result is
combination of master and content page. Every master page has one or more content pages in an
application.
The advantages of the master page are as mentioned below:

• They provide an object model allowing users to customize the master page from the individual
content pages.
• They allows user design the rendering of the controls in the placeholder
• It is centralized with common functionality of all pages to makes updates in one place
• Code can be applied on one set of controls and the results to the set of pages in the application

The @Master directive is defines in the master page. The master page contains one or
more <asp:ContentPlaceHolder> for an individual content. The id attribute identifies the placeholder from
all present in a web page. The master page has .master extension. The syntax of the master directive is as
shown below:

<%@ Master Language=”VB” CodeFile=”MasterPage.master.cs” Inherits=”MasterPage” %>

To start - open your Visual Studio 2010, File and choose New Web Site,

Choose ASP.NET Empty Web Site. Make the default File System; you can change the file directory of
your file. Just simply browse and name your folder where your file is being saved and click Ok.

Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 26

Sutex bank college of computer applications and science.
 Unit 2: Server Control

When we notice there’s no display, what are we going to do? We are going to add a Master Page. To do
that, in your solution explorer, right click the name of your website and choose Add new item.
Choose MasterPage.master,, the default name is MasterPage.. Make sure that the check box is checked,
only place code in a separate file, not a select master page.

This is the master build in code:

(M.C.A,NET,GSET)
Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 27
Sutex
utex bank college of computer applications and science.
 Unit 2: Server Control

Under the code, either you can choose Source, Split, and design. In order to show only the code, use the
design just like above, split shows both source and design and design shows only a design.

Now, we are going to use design in order to see the full design of our Master Page. Click design; first
delete the current placeholder because we are going to create a new one.

In the above menu, click table and insert table:

Click Ok, we are going to merge cells, the header and footer. Highlight the entire first row, right click and
choose modify merge cells. Expand the height - it looks like a website and fill some color to make it look
like an interesting site, look at the properties settings. If you want to add color for header and footer, click
the cells and locate the properties and choose Bgcolor.

Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 28

Sutex bank college of computer applications and science.
 Unit 2: Server Control

So, this is how your Master Page looks like. In order to make multiple Web Forms, in your Solution
Explorer, click your web site name, right click and Add new item and click Web Form. The default name
is default, change it to Home to make it more meaningful. Remember; make sure to check the select
master page and Add. When you notice another dialog box appears, it does mean that you are in the
Master Page control. Click MasterPage.master,
MasterPage.master then Ok.

This is the build in code.

Do the same procedure like what you created in the Home web form and name it About and Setting. Now
you’ve already created 3 Web Forms.

Back to the Master Page, drag Content PlaceHolder from your toolbox in your Master Page.

(M.C.A,NET,GSET)
Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 29
Sutex
utex bank college of computer applications and science.
 Unit 2: Server Control

Click Home menu hyperlinks, in your properties setting, locate Navigate URL, click … and choose Home
Web Form that corresponds to your menu. Do the same procedure when you link About and Settings
Menu.

In Solution Explorer, double click Home Web Form. When you notice your cursor,
only ContentPlaceHolder is active, it means you could not write anything except the place holder. Now,
we are going to put something in the place holder. Type “This is my Home Page”, do the same as what
you created in your home web form and type that relate in every pages.

Note: If you couldn’t write in the placeholder, click the place holder and click the greater

than arrow >.Save your work.Now, click debug to start debugging or press F5 to run you program. The
first time you run your program, it shows dialog box, click ok to continue. Thenthe output of your
program looks like.Navigate your HOME, ABOUT, and SETTING menus to see if they work!

Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 30

Sutex bank college of computer applications and science.
 Unit 2: Server Control

Theme
A theme decides the look and feel of the website. It is a collection of files that define the looks of a page.
It can include skin files, CSS files & images.
We define themes in a special App_Themes folder. Inside this folder is one or more subfolders named
Theme1, Theme2 etc. that define the actual themes.
The theme property is applied late in the page's life cycle, effectively overriding any customization you
may have for individual controls on your page.

How to apply themes

there are 3 different options to apply themes to our website:

1. Setting the theme at the page level: the Theme attribute is added to the page directive of the page.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Def

ault" Theme="Theme1"%>

2. Setting the theme at the site level: to set the theme for the entire website you can set the theme in
the web.config of the website. Open the web.config file and locate the <pages> element and add
the theme attribute to it:

<pages theme="Theme1">
....
....
</pages>

3. Setting the theme programmatically at runtime: here the theme is set at runtime through coding. It
should be applied earlier in the page's life cycle i.e. Page_PreInit event should be handled for
setting the theme. The better option is to apply this to the Base page class of the site as every page
Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 31
Sutex bank college of computer applications and science.
 Unit 2: Server Control

in the site inherits from this class.

Page.Theme = Theme1;
Let's create a theme application with the help of the following steps:
Right-click in the application name in the Solution Explorer window and select Add
ASP.NET Folder->Theme from the context menu.

- A sub folder named Theme1 is automatically created inside the APP_Themes folder in
the Solution Explorer.

- Right-click on the Theme1 folder and select the Add New Item option.
- Select the Skin file and click the Add button.

Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 32

Sutex bank college of computer applications and science.
 Unit 2: Server Control

Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 33

Sutex bank college of computer applications and science.
 Unit 2: Server Control

- Now write the following code in the skin file.

- Write the following code for Default.aspx page.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" Theme="Theme1" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
<asp:Label ID="Label2" runat="server" Font-Bold="False"
Font-Names="Comic Sans MS" Font-Underline="True"
Text="THEME EXAMPLE"></asp:Label>
<br />
<br />
<asp:Label ID="Label1" runat="server" Text="enter the data in the text box">
</asp:Label>
<br />
<br />
<asp:TextBox ID="TextBox1" runat="server" Height="42px" Width="237px"></asp:T
extBox>
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Click Button"
BorderColor="#996633" BorderStyle="Solid" BorderWidth="5px" Height="60px" /
>
<br />
<br />
<br />
<asp:Label ID="Label3" runat="server" Text="Select the Theme"></asp:Label>
<br />
<br />
<br />
<br />

Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 34

Sutex bank college of computer applications and science.
 Unit 2: Server Control

<br />
<br />
</div>
</form>
</body>
</html>
The design window will look like:

- Now Press F5 key to run the application.

Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 35

Sutex bank college of computer applications and science.
 Unit 2: Server Control

- Now we will create an application for applying the theme at run time.
- To do this adds another skin file to the application and write the following code for both
skin files.

Code for simple theme is as follows:

- Code for coloured theme is as follows:

Add the following code to the Default.aspx file:

- The design window looks like:
Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 36
Sutex bank college of computer applications and science.
 Unit 2: Server Control

4.
Now write the following code for the default.aspx.cs file:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
void Page_PreInit(object sender, EventArgs e)
{
// Get the theme name from a QueryString variable
string ThemeName;
ThemeName = Request.QueryString["Theme"];
if (ThemeName != null)
{
Page.Theme = ThemeName;
}
}
}

Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 37

Sutex bank college of computer applications and science.
 Unit 2: Server Control

CSS (Cascading Style Sheets)

• It is for the formatting side of the Web
• it describes how rendered HTML documents should look
• There are three ways to use CSS
• External Style Sheets
- It is collections of css styles stored outside the web pages. These are the files using the
.css extension. Following steps are used to add css
- Add new item-> select style sheet template
- Uses the LINK tag (in the document HEAD)
<linkhref="../demo.css"rel="stylesheet"type="text/css"/>
• Internal Style Sheets –
- It iscollections of css styles stored internally in a single page.It is located inside on the
html<style> tag.
<styletype="text/css">
p
{
background-color:Gray ;
border:solid2pxred;
height:100px;
width:100px:
}
</style>
• Inline STYLE attribute
– it is css styles that are applied directly to an individual HTML element’s style
attribute
<pstyle="background-color: #996600; font-size: larger"> Inline style Sheet</p>

Asst.Prof. Nayna N Mistry(M.C.A,NET,GSET) Page 38

Sutex bank college of computer applications and science.