Professional Documents
Culture Documents
Pino ASP - Net Workbook
Pino ASP - Net Workbook
Introduction to ASP.NET
I. Preparation
At the end of this module students will:
• understand the ASP.Net Technology;
• explain the ASP and ASP.Net;
• discuss the .NET Framework;
1|Page
• recognize the .NET versions;
• explain the styles of web development;
• understand the ASP Life Cycle;
• understand Web Forms;
• understand server controls and html controls
II. Presentation
ASP.Net Technology
ASP.Net is a server-side technology for web development. ASP.Net is a open source web
framework for developing a powerful web sites, web application and web services.
ASP.Net is a part of Microsoft .Net Framework. It was released with version 1.0 in 2002 of the
.Net Framework. ASP.Net application can have access to all the libraries and classes provided in
.Net Framework.
It is used to develop websites, web applications and web services. It provides fantastic
integration of HTML, CSS and JavaScript.
ASP.Net is a used for build web sites and web application. ASP.Net web sites contain web
forms which design using HTML, CSS and JavaScript. ASP.Net web application comes with built
in server side control like buttons, text boxes. labels etc.
The .Net Framework offers multiple language to build web application in ASP.Net such as C#,
Visual Basic, C++, J#.
2|Page
ASP.Net use all language supported in .Net framework which built on CLR (Common
Language Runtime). ASP.Net use FCL (Framework Class Library) or BCL supported .Net
languages like C# and VB.Net. Programmer can develop website using C# language, Vb language
and also using J# and C++. But programmer widely used C# programming language for developing
website application.
Before, release ASP.Net Microsoft has ASP(Active Server Page) for developing web sites.
The ASP.Net is a next version of ASP. As a beginner of ASP.Net we need to understand first about
ASP and .Net Framework.
ASP and ASP.Net both are Microsoft Technology for web development. ASP.Net is next
version on ASP.
ASP – Active Server Page ASP.Net
ASP uses language as VBScript, JScrit. ASP.Net uses compiled language like
ASP web pages have an extension with C#, VB, C++ and J#.
.asp like ‘index.asp’. ASP.Net web pages have an extension
ASP is interpreted language not a with .aspx like ‘index.aspx’.
compiled.
ASP.Net is compiled language.
ASP script code Written with in HTML
code.
ASP uses ADO technology to connect ASP.Net programming code written in
database. separate code behind
ASP is a partially object oriented page,
language.
‘index.asp.cs’ file for c# language.
ASP.Net uses ADO.Net technology to
connect database.
ASP.Net is fully object oriented.
3|Page
What is .Net Framework?
ASP.NET is a part of Microsoft .NET Framework. The following image shows the component
stack.
In 2002 Microsoft company release .net framework, the basic first .net framework are .net
framework 1.0 and .net framework 1.1. Microsoft release new framework with some modification
and changes with new .net framework version name. The latest .net frame work last version is .net
framework 4.5 and .net framework 4.5.2.
5|Page
Web Development Styles
1. Web Forms
2. ASP.NET MVC
3. ASP.NET Web Pages
Web Forms
ASP.NET MVC
It gives us a MVC (Model View Controller), patterns-based way to build dynamic websites.
It enables a clean separation of concerns and that gives you full control over markup for enjoyable,
agile development. It also provides many features that enable fast development for creating
outstanding applications. It will be discussed it further in next chapters.
It is used to create dynamic web pages. It provides fast and lightweight way to combine
server code with HTML. It helps to add video, link to the social sites. It also provides other features
like you can create beautiful sites that conform to the latest web standards.
All these are stable and well equipped frameworks. It can create web applications with any
of them. These are also based on the .NET Framework and share core functionalities of .NET and
ASP.NET.
6|Page
Web Win Rapid development using a rich library of Mid-Level,
Forms Forms, controls that encapsulate HTML markup Advanced
WPF, RAD
.NET
MVC Ruby on Full control over HTML markup, code and Mid-Level,
Rails, markup separated, and easy to write tests. The Advanced
.NET best choice for mobile and single-page
applications (SPA).
Web Classic HTML markup and your code together in the New,
Pages ASP, PHP same file MidLevel
Programmers can use any development style to create application. The selection of style is
depends on the skills and experience of the programmer.
Although each framework is independent to other, all of these components can be combined
and used at any stage of our application.. For example, to develop client interaction module, we
can use MVC and for data control, we can use Web Forms.
In ASP.NET, a web page has execution lifecycle that includes various phases. These phases
include initialization, instantiation, restoring and maintaining state etc. it is required to understand
the page lifecycle so that we can put custom code at any stage to perform our business logic.
The following table contains the lifecycle stages of ASP.NET web page.
Stage Description
7|Page
Page request This stage occurs before the lifecycle begins. When a page is
requested by the user, ASP.NET parses and compiles that page.
Start In this stage, page properties such as Request and response are set. It
also determines the Request type.
Initialization In this stage, each control's UniqueID property is set. Master page is
applied to the page.
Load During this phase, if page request is postback, control properties are
loaded with information.
Postback event In this stage, event handler is called if page request is postback. After
handling that, the Validate method of all validator controls is called.
Rendering Before rendering, view state is saved for the page and all controls.
During the rendering stage, the page calls the Render method for each
control, providing a text writer that writes its output to the
OutputStream object of the page's Response property.
Unload At this stage the requested page has been fully rendered and is ready
to terminate.at this stage all properties are unloaded and cleanup is
performed.
A requested page first loaded into the server memory after that processes and sent to the
bowser. At last it is unloaded from the server memory. ASP.NET provides methods and events at
each stage of the page lifecycle to use in the application.
PreLoad This event is occurs before the post back data is loaded in the
controls.
Load This event is raised for the page first time and then recursively for
all child controls.
8|Page
Control events This event is used to handle specific control events such as Button
control' Click event.
LoadComplete This event occurs at the end of the event-handling stage.
Use this event for tasks that require all other controls on the page be
loaded.
PreRender This event occurs after the page object has created all controls that
are required in order to render the page.
PreRenderComplete This event occurs after each data bound control whose
DataSourceID property is set calls its DataBind method.
SaveStateComplete It is raised after view state and control state have been saved for the
page and for all controls.
Render This is not an event; instead, at this stage of processing, the Page
object calls this method on each control.
Unload This event raised for each control and then for the page.
Web Forms are web pages built on the ASP.NET Technology. It executes on the server and
generates output to the browser. It is compatible to any browser to any language supported by .NET
common language runtime. It is flexible and allows us to create and add custom controls.
Visual Studio is use to create ASP.NET Web Forms. It is an IDE (Integrated Development
Environment) that allows us to drag and drop server controls to the web forms. It also allows us to
set properties, events and methods for the controls. To write business logic, choose any .NET
language like: Visual Basic or Visual C#.
Web Forms are made up of two components: the visual portion (the ASPX file), and the
code behind the form, which resides in a separate class file.
9|Page
The main purpose of Web Forms is to overcome the limitations of ASP and separate view
from the application logic.
ASP.NET provides various controls like: server controls and HTML controls for the Web
Forms. Examine the tables all these controls below.
Server Controls
The following table contains the server-side controls for the Web Forms.
10 | P a g e
Hyperlink None It is used to create a hyperlink
control that responds to a click
event.
DropDownList SelectedIndexChanged It is used to create a dropdown list
control.
ListBox SelectedIndexCnhaged It is used to create a ListBox
control like the HTML control.
DataGrid CancelCommand, It used to create a frid that is used
EditCommand, to show data. Can also perform
paging, sorting, and formatting
DeleteCommand, very easily with this control.
ItemCommand,
SelectedIndexChanged,
PageIndexChanged,
SortCommand,
UpdateCommand,
ItemCreated,
ItemDataBound
DataList CancelCommand, It is used to create datalist that is
EditCommand, non-tabular and used to show data.
DeleteCommand,
ItemCommand,
SelectedIndexChanged,
UpdateCommand,
ItemCreated,
ItemDataBound
Repeater ItemCommand, It allows us to create a non-tabular
ItemCreated, type of format for data. You can
bind the data to template items,
ItemDataBound which are like bits of HTML put
11 | P a g e
together in a specific repeating
format.
HTML Controls
These controls render by the browser. HTML controls can also be used as server controls.
12 | P a g e
Controls Name Description
Submit Automatically POSTs the form data to the specified page listed in the
Button Action attribute in the FORM tag
Text Field Gives the user an input area on an HTML form
Text Area Used for multi-line input on an HTML form
File Field Places a text field and a Browse button on a form and allows the user to
select a file name from their local machine when the Browse button is
clicked
Password An input area on an HTML form, although any characters typed into this
Field field are displayed as asterisks
CheckBox Gives the user a check box that they can select or clear
Radio Used two or more to a form, and allows the user to choose one of the
Button controls
Dropdown Displays a list of items to the user, but only one item at a time will appear.
The user can click a down arrow from the side of this control and a list of
items will be displayed.
13 | P a g e
Horizontal Displays a horizontal line across the HTML page
Rule
ASP.NET is full of features and provides an awesome platform to create and develop web
application. Here, are the features of Web Forms.
o Server Controls o
Master Pages o
Membership
Management o Security o
Server Controls
Web Forms provides rich set of server controls. These controls are objects that run when
the page is requested and render markup to the browser. Some Web server controls are similar to
familiar HTML elements, such as buttons and text boxes. It also provides controls that can be use
to connect to data sources and display data.
Master Pages
It allows us to create a consistent layout for the pages in our application. This page defines
the look and feel and standard behavior for all of the pages in our application. When users request
the content pages, they merge with the master page to produce output that combines the layout of
the master page with the content from the content page.
14 | P a g e
Working with Data
Membership
Project's Account folder contains the files that implement the various parts of membership:
registering, logging in, changing a password, and authorizing access. Additionally, ASP.NET Web
Forms supports OAuth and OpenID. These authentication enhancements allow users to log into
your site using existing credentials, from such accounts as Facebook, Twitter and Google.
Routing
ASP.Net is capable of configuring URL routing of the application. A request URL is simply
the URL a user enters into their browser to find a page on our web site. Use routing to define URLs
that are semantically meaningful to users and that can help with search-engine optimization (SEO).
State Management
ASP.NET Web Forms includes several options that help you preserve data on both a
perpage basis and an application-wide basis.
15 | P a g e
Security
Performance
Web Forms provides good performance and allows us to modify performance related to page
and server control processing, state management, data access, application configuration and loading,
and efficient coding practices.
Debugging and error handling are well supported within ASP.NET Web Forms so that the
applications compiled and run effectively.
16 | P a g e
Answer Sheet for Practice Task
⮚ ASP and ASP.Net are both server side framework that is used
develop in 1998 by Microsoft and it was the first server side script
17 | P a g e
18 | P a g e
Answer Sheet for Performance Task
⮚ Web Forms
⮚ ASP.Net MVC
19 | P a g e
Module 2
Getting Started with ASP.NET Web Forms
20 | P a g e
I. Preparation
II. Presentation
Using Visual studio 2017 to create web project. It includes the following steps:
1. Creating a new project
Click on the File menu from the menu bar and select New -> Project.
21 | P a g e
3. Select Project Template
After selecting project types, now, it will prompt for you to pick the type of template
you want to use in the application.
22 | P a g e
After clicking ok, it shows project in solution explorer window that looks like the
below.
This project contains a default.aspx file which is a startup file. When run or execute
the project this file executes first and display a home page of the site.
By selecting the view in browser option, as shown below, the output will be
displayed in the browser selected.
23 | P a g e
Finally, it shows output in the browser like this:
24 | P a g e
How to Create New Web Form
To add a new web form in our existing project, first select project then right click and add
new item.
Here, using the project that is created in last topic. To add a new web form in existing
project, first select project then right click and add new item.
Select web forms option in left corner and then select web form and hit add button.
25 | P a g e
Now click on the add button and this form will add to our project.
After adding the form, this is now the new project content as shown in the image.
26 | P a g e
Double click on this form and
this will show some auto generated
code like this:
27 | P a g e
Sample Code
// user-form.aspx
28 | P a g e
The output for this code by using the browser, does not show any output. So, let's modify
the code to display some message in this form.
// user-form.aspx
For Run Website = Press F5 Key OR Debug Menu -> Start Debugging
For Build website = Press Ctr + Shift + b
29 | P a g e
For Stop Debugging = Shift + F5 OR Debug Menu -> Stop Debugging
Apart from this message, adding controls to this page is possible. It will introduce in next
modules.
30 | P a g e
III. Practice Task 2
Direction: Modify the user-form.aspx. Add VMGO of the university.
31 | P a g e
Answer Sheet for Practice Task
32 | P a g e
33 | P a g e
Answer Sheet for Performance Task
34 | P a g e
35 | P a g e
36 | P a g e
Module 3
Data Types
37 | P a g e
I. Preparation
At the end of this module students will:
• embed comments in the code;
• examine the different data types;
• construct variables;
II. Presentation
Comment code is important part of any kind of programming language. Comment code is only
visible at the part of programming side while run the program the comment code invisible at output
side.
While complex programming have more code at programmer side and many programmer can
work on one project so there is a need to define the code logic with header comment code so other
programmer can easily understood the code.
In single line comments, the syntax is to use double forward slash “//”.
Each variable in C# must be declared with specific data types, which determine the size
and type of value variable can store.Variable is a storage area which store the values, values may
be numbers, strings , floating values or arrays. Data type should be a int, string, char, float.
Importance of Variable
• A variable is a name given to a value.
• A variable can hold value of specific data types like : int, string, float etc.
• A variable can be initialized after declaration or initialized and declared at the same time.
• The value of variable can be changed at any time in a scope.
• Can not declared multiple variable with same name within a scope.
Variable can be declared and initialized later in program or it can be initialized and the declared
at the same time.
Example:
int myno;
string name;
Here, int and string are data type and myno and name are variable name
Syntax:
<data_type> <variable_name>
40 | P a g e
<variable_name> = <value>
Example :
In the above example, in first line, is the declaration of variable myno with int data type. In the
second line, value 10 is assign to variable myno. The next line, the name variable is declared with
string data type and the value ‘CTU’ is assigned to name variable.
Example
Example:
41 | P a g e
Open Visual Studio –> New Website –> Add New Web form in Solution Explorer.
Go to .cs page declare variable with int data types as shown in the figure below.
In this code, myno variable is declared with int data type but not initialize so the c# compiler
shows warning message like The variable ‘myno’ is declared but never used.
In this example, variable myno with int data type and has initialize value of 10, but still the variable
is not been used in the program so the c# compiler shows warning message like: The variable ‘myno’
is assigned but its value is never used.
42 | P a g e
In this example, the variable myno is declared, has initial value of 10 and display the value of
myno using Response.Write(myno), the compiler shows no warning message.
Take note: In c#.net textbox control values are always string value, use string variable for hold
textbox value. If we want to get value from textbox control then we must use string type variable for
store textbox value.
<data_type> <Variable_name>
Example:
Open Visual Studio –> New Website –> Add New Web form in Solution Explorer.
Go to .cs page declare variable with string data types show like below screen.
43 | P a g e
Here, strval variable is declared with string data types and after in second line “Me Academy” is
initialized to variable strval. Above variable declaration first line shows green underling warning
message, because the strval variable is declared and initialized but it is never used in the program.
String Implementation
Design web page with one textbox, a button and a label control. Store textbox value in string
variable and then assign string variable value to label control for display output on web form.
Below is the sample code for above example. In the first line, the value of textbox is assign to
string variable strval and then value of strval variable is assign label control.
44 | P a g e
Float and Double data type
Float and double type of variable store point value something like : 8.10, 123.56.
Declaration of float and double type of variable are same as integer type of variable.
The difference between float and double is the size of the numbers that they can hold.
The float variable can have up to 7 digit numbers. Float is a 32 bit number.
The double variable can have up to 16 digit numbers. Double is a 64 bit number.
Example :
The capital letter ‘F’ on the end means float variable. If you declare float without ‘F’ letter on end
the c# compiler shows error message.
Here, double variable value no need to write ‘F’ at end of the value.
Example
Open visual studio –> Create new website –> Add new web form –> Design form. Design
web form with two button control one for get float value and second for get double value.
Here, declare float and double variable with some values and get that variable value on web
form while fire the button click event in c#.net like below screen.
45 | P a g e
Code for above example:
In the above code example, the fval = 123456.7869F is declared float and display
value in label control lblfloat when button btnfloat is clicked. The result Float = 123456.8 because
float variable can hold up to 7 digit numbers. The last 8th digit number is 8 so the 7 digit converted to
8 digit then the result is 123456.8.
Example :
float fval1 = 123456.7869F //then the result = 123456.8
float fval2 = 123456.743F //then the result = 123456.7
Same thing of the fval = 123456.7869 is declared double. The result is Double =
123456.7869, because double variable can have up to 16 digit numbers.
III. Practice
Direction: Identify if the give variable is valid or invalid. If valid, determine the possible
data type
46 | P a g e
Variable Name Valid/Invalid Data Type
1. Gross_pay ___________, ____________
IV. Performance
Direction: Identify the possible data type and make a variable name for each of the data
items below. Write your answer in a space provided
47 | P a g e
Answer Sheet for Performance Task
48 | P a g e
Module 4
Operators
I. Preparations
At the end of this module students will:
• construct arithmetic, relational and logical expression;
49 | P a g e
• construct simple condition and compound condition
II. Presentation
Operator are used to perform mathematical or logical operation on variable.
Operator is a symbol that perform specific mathematical or logical operation on
variable in any programming language.
List of C# Operators
• Arithmetic Operators
• Logical Operators
• Relational or Comparison Operators
• Assignment Operators
Operator Description
* Multiplication
/ Division
% Reminder
+ Addition
- Subtraction
Example #1 – Addition
Above example as show screen, there are two values 10 and 15 to the textbox and on
Integer Addition and String Addition buttons. The results, for Integer Addition button is 15
while String Addition button is 1015. Here is the c# code for above addition example:
}
protected void btnIntegeraddition_Click(object sender, EventArgs e)
{
;
firstno
int secondno
int;
);
int addanswer = firstno + secondno;
51 | P a g e
lblstringanswer.Text ="String Sum = " + firstno + secondno;
}
Example #2 – Subtraction and Multiplication
}
protected void btnmultiplication_Click(object sender, EventArgs e)
{
; int
firstno int;
52 | P a g e
C# code for example
}
protected void btnmodule_Click(object sender, EventArgs e)
{
firstno;
secondno
int
int;
53 | P a g e
firstno = Convert.ToInt32( TextBox1.Tex );
t
secondno = Convert .ToInt32(TextBox2.Tex
);
t
int answer = firstno % secondno;
Logical Operators
The C# language supports basic three logical operators. The logical operators returns true
or false as output.
The logical operators are used when we have conditional statement such as if statement.
C# Supports following logical operators
Assume variable X is true and variable Y is false then
Here, && operator is use in if condition to check both username and password are right or
wrong. Above c# .net example first input username=Welco and password=123 then result is
54 | P a g e
Welcome to System and try username=Welco and password=234 that time result will be Invalid
Credential because password value is wrong.
Unlike in && operator that both conditions must be TRUE but in || operator it needs only
one true condition to perform the true statements.
Example:
55 | P a g e
Code:
using System ;
System .Collections .Generic ;
System .Linq;
System .Web;
System .Web.UI;
System .Web.UI.WebControls ;
}
protected void btnlogin_Click(object sender, EventArgs e)
{
if (txtuname.Text == "admin" || txtupass.Text == "123")
{
lblmsg.Text = "Welcome to System";
}
else {
lblmsg.Text = "Invalid Credential";
}
}
56 | P a g e
}
Logical NOT (!)
In NOT (!) operator, if the condition is TRUE then logical not operator returns FALSE.
Assume int variable X=10 and variable Y=5 then if
(X != Y)
{
result = “X is not equal to Y”;
}
else
{
result = “X is equal to Y”;
}
Here, output is result = “X is not equal to Y” because value of X and Y not same so return
true block.
Conditional Statements
Conditional statement in C# used to take decision on based the conditions is true or false.
if statement
– this statement is used when we want to execute a code only one condition must
be true.
syntax in C# :
if (condition)
}
57 | P a g e
simple if statement example
int a=10;
int b=7;
if(a>b)
{
Response.Write ("a value is greater than b");
} The output is:
a value is greater than b
in above c# example, two integer variables a and b with values 10 and 7 respectively.
if – else statement
– this statement is used when we want to execute a code in both the condition. if
condition is true execute some code, if false execute another code.
syntax in C# :
if(condition)
{
// condition is true
}
else
{
// condition is false
}
Example #1:
string uname = "jamesbond"; string upass = "semaj"; if
(uname == "jamesbond" && upass == "semaj")
{
Response.Write("welcome to system");
}
else
58 | P a g e
{
Response.Write("Login Error, Please try again");
}
The output is:
welcome to system
In above c# example we have two string variable uname and upass. Here, if condition we
check the uname and upass value is right or wrong. The if condition is true then print “welcome to
system” message and if false then print “Login Error, Please try again” message.
Example #2:
int a=10;
int b=17;
if(a>b)
{
Response.Write("a is greater than b");
}
else
{
Response.Write("a is less than b");
}
The output is:
a is less than b
In above example value a is 10 and b is 17, so if condition is false so execute else code and
print “a is less than b” message in output.
59 | P a g e
if – else if – else statement if-else if-else statement – this statement is used when we want
to execute a code if one of
multiple condition is true.
Syntax:
if (condition)
{
// if this condition is true then code to be executed
}
else if (condition)
{
// if this condition is true then code to be executed
}
else if (Condition)
{
// if this condition is true then code to be executed
}
else
{
// all conditions are false then this code to be executed
}
Example of if-else if-else condition
In below example we calculate the grade for student, each student has only one grade from
various grades like “first class”, “second class”, “pass class” etc.
Here we have various condition but output must be a single, so we need to use if-else ifelse
condition for this c# example.
int maths=60;
60 | P a g e
int biology=65; int physics=73; int result =
(maths + biology + physics)/3;
if(result <35)
{
Response.Write("Fail");
}
else if(result>=35 && result<=50)
{
Response.Write("Pass class");
}
else if(result>50 && result<=60)
{
Response.Write("Second class");
}
else if(result>60 && result<=70)
{
Response.Write("First class");
}
else //or else if(result>70)
{
Response.Write("Distinction class");
}
The output is:
First class
In above C# example the result value is 66, the fourth condition will be true and out put is
“First class”.
61 | P a g e
Nested if statement
– Nested if else statement in C# means, if else statement inside another if else statement.
Syntax
if(condition1)
{
if(condition2)
{
// execute code when condition1 and condition2 are true
}
else if(condition3)
{
if(condition4)
{
// execute code when condition3 and condition4 are true
}
else
{
// execute code when condition3 is true
// execute code when condition4 is false
}
}
}
else
{
// execute code when conditions1 is false
}
62 | P a g e
Example:
int a = 15;
int b = 23;
int c = 10;
if (a > b)
{ if (a
> c)
{
Response.Write("a is greater than b and c");
}
else
{
Response.Write("c is greater than a and b");
}
}
else
{ if (b
> c)
{
Response.Write("b is greater than a and c");
}
else {
63 | P a g e
The output is :
b is greater than a and c
switch statement
– same as if-else if-else this statement is used we have multiple condition but only
one condition true that code will be executed.
Syntax: switch
(a)
{
case statement1:
if a=statement1 then code to be executed;
break; case
statement2:
if a=statement2 then code to be executed;
break; case
statement3:
if a=statement3 then code to be executed;
break; …….
default
:
if “a” is not matches with any statement then code to be executed.
}
III. Practice.
64 | P a g e
IV. Performance.
65 | P a g e
Answer Sheet for Practice Task
66 | P a g e
67 | P a g e
Answer Sheet for Performance Task
68 | P a g e
69 | P a g e
Module 5
Controllers
70 | P a g e
I. Preparations
At the end of this module students will:
• Set the properties of the controllers
• implement the Label, Textbox, Button, RadioButton, Checkbox and Dropdown
List controllers.
II. Presentation Label Controller
This control is used to display textual information on the web forms. It is mainly
used to create caption for the other controls like: textbox.
To create label either we can write code or use the drag and drop facility of visual
studio 2017.
This is server side control, asp provides own tag to create label. The example is
given below.
Property Description
71 | P a g e
Text It is used to set text to be shown for the label.
Textbox Controller
This is an input control which is used to take user input. To create TextBox
either we can write code or use the drag and drop facility of visual studio IDE.
This is server side control, asp provides own tag to create it. The example
is given below.
Property Description
72 | P a g e
ToolTip It displays the text when mouse is over the control.
MaxLength
It is used to set maximum number of characters that can be
entered.
Button Controller
This control is used to perform events. It is also used to submit client request
to the server. To create Button either we can write code or use the drag and drop
facility of visual studio IDE.
This is a server side control and asp provides own tag to create it. The
example is given below.
Property Description
73 | P a g e
Font It is used to set font for the control text.
RadioButton
It is an input control which is used to takes input from the user. It allows
user to select a choice from the group of choices. To create RadioButton we can
drag it from the toolbox of visual studio.
This is a server side control and ASP.NET provides own tag to create it.
The example is given below.
Property Description
74 | P a g e
BackColor It is used to set background color of the control.
DropDownList Controller
75 | P a g e
DataTextField="DataSourceField"
DataValueField="DataSourceField"
AutoPostBack="True|False"
OnSelectedIndexChanged="OnSelectedIndexChangedMethod">
<asp:ListItem value="value" selected="True|False">
Text
</asp:ListItem>
</asp:DropDownList>
76 | P a g e
Now, to add items to the list, visual studio provides Items property where we can add
items. The property window looks like this.
Click on the items (collection) and it will pop up a new window as given below. Initially, it
does not have any item. It provides add button to add new items to the list.
77 | P a g e
Adding item to the DropDownList, by providing values to the Text and Value properties.
We have added more items to it and now, it looks like the following.
78 | P a g e
After clicking OK,
79 | P a g e
All server side control has its own properties and events. below list shows basic
properties of Dropdownlist control.
Properties Description
80 | P a g e
Enable true/false – used to enable or disable control.
81 | P a g e
Remove the item from the dropdownlist
control.
DropDownList1.Items.Remove(“ItemName”)
IV. Performance
Develop a web application to create a customer’s bill for appliance company. The company
sells only 4 different products, LED 32” TV, Water Purifier, DVD Players, and Aircon Inverter.
The price of the ach item are 12,000.25, 2,550.90, 3,520.50, and 16,420.75, respectively. The
application must accept the quantity of each piece of appliances purchased. Compute the total price,
subtotal, tax and the total cost after 8.95% sales tax. See the sample output below.
82 | P a g e
Sample Output 1.
Sample Output 2.
83 | P a g e
Answer Sheet for Practice Task
84 | P a g e
85 | P a g e
86 | P a g e
87 | P a g e
Answer Sheet for Performance Task
88 | P a g e
89 | P a g e
90 | P a g e
91 | P a g e
Module 6
Validation Controls
I. Preparations
At the end of this module students will:
92 | P a g e
implement the RegularExpression, RangeValidators, RequiredField Validator,
and Compare Validator
II. Presentation
RegularExpression validator control mostly use for validate Internet E-mail address
and Internet URL.
The Internet Email address must contain @ after some text and dot(.) before some
text, then the address is right other wise the email address is invalid format.
Same way in Internet URL means internet website name or domain name must start
with http://.
93 | P a g e
Implementation: For email and URL.
1. First Design the web form with Three Texbox control,
Name, Email and Website URL along with the one
button control.
94 | P a g e
For validating the Internet URL, select Internet URL option in Validationexpressions.
95 | P a g e
1. Select Internet URL for
validate website URL.
96 | P a g e
3. Below is the example output using RegularExpression validator control.
RangeValidator Control
Is used to checks the input control’s value is within a specified range, Means input values
must be between two values, It has minimum and maximum value.
Generally we use RangeValidator control for Mobile no and Pincode Number.
The most important properties of the RangeValidator control are MaximumValue,
MinimumValue, and Type.
Note: Specify the Range from Minimum values to Maximum Values and Type of Input Values.
97 | P a g e
How to use Range Validator Control
98 | P a g e
Drag the
RangeValidator to
web forms
99 | P a g e
Example 1: Numbers values
1. The Design
<table>
<tr>
<td style="text-align: right">Name :</td>
<td style="text-align: left"><asp:TextBox ID="txtname"
runat="server"></asp:TextBox></td>
</tr>
<tr>
<td style="text-align: right">Mobile :</td>
<td style="text-align: left"><asp:TextBox ID="txtmobile" runat="server"></asp:TextBox>
<asp:RangeValidator ID="RangeValidator1" runat="server"
ControlToValidate="txtmobile" ErrorMessage="Invalid Mobile !!"
MaximumValue="9999999999"MinimumValue="1111111111"
Type="Double"></asp:RangeValidator>
</td>
</tr>
<tr>
<td style="text-align: right">Pincode :</td>
<td style="text-align: left"><asp:TextBox ID="txtpincode" runat="server"></asp:TextBox>
<asp:RangeValidator ID="RangeValidator2" runat="server"
ControlToValidate="txtpincode" ErrorMessage="Invalid Pincode !!"
MaximumValue="999999" MinimumValue="111111"
Type="Integer"></asp:RangeValidator>
</td>
</tr>
<tr>
<td> </td>
<td style="text-align: left"><asp:Button ID="btnSave" runat="server" Text="SAVE"
style="font-weight: 700" /> </td>
100 | P a g e
2. Drag and drop RangeValidator control on web forms.
</tr>
</table>
be 10 digit.
101 | P a g e
5. Running Output:
102 | P a g e
1. Set the RangeValidator control Property for String
2. Here, the textbox allow only character between D and K.
RequiredFieldValidator
Control
Example:
103 | P a g e
1. The Output Design
HTML Code:
<table>
<tr>
<td style="text-align: right">Name :</td> <td
style="text-align: left">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
<td style="text-align: left">
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="TextBox1" ErrorMessage="Enter Name !!"
SetFocusOnError="True"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td style="text-align: right">City :</td>
<td style="text-align: left">
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</td>
<td style="text-align: left">
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ControlToValidate="TextBox2" ErrorMessage="Enter City
!!"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td> </td>
<td style="text-align: left">
<asp:Button ID="Button5" runat="server" Text="SAVE" />
</td>
<td> </td>
</tr>
</table>
104 | P a g e
2. In Requiredfieldvalidator control property, set ErrorMessage and ControlToValidate
property.
Note: If both textbox name and textbox city will be blank then both validator control show the
ErrorMessage when Save button is click.
3. Here, textbox name has value and textbox city is blank, then validator control shows the
error message.
105 | P a g e
CompareValidator Control
- Mostly this control is used to Entering the Password detail in Registration form.
- For this control, the input Datatype must be specify for comparison.
2. HTML Code
<table align="center" class="style1" style="border: thin solid #008080">
<tr>
<td colspan="2 style="border-bottom: thin solid #008080; font-weight: 700; text-align: center; color: #990033;"
class="style2"> CompareValidator Control in ASP.Net</td>
</tr>
<tr>
<td>
106 | P a g e
</td>
<td>
</td>
</tr>
<tr>
<td style="font-weight: 700; text-align: right">
Name :</td>
<td>
<asp:TextBox ID="txtname" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td style="font-weight: 700; text-align: right">
Password :</td>
<td>
<asp:TextBox ID="txtpassword" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td style="font-weight: 700; text-align: right">
Confirm - Pass :</td>
<td>
<asp:TextBox ID="txtconfipass" runat="server"></asp:TextBox>
<asp:CompareValidator ID="CompareValidator1" runat="server"
ControlToCompare="txtpassword" ControlToValidate="txtconfipass"
ErrorMessage="Password not same !!"></asp:CompareValidator>
</td>
</tr> <tr>
<td>
</td>
<td>
<asp:Button ID="Button1" runat="server" Font-Bold="True" Text="SAVE" />
</td>
</tr>
</table>
107 | P a g e
108 | P a g e
III. Performance
Open and modify your web forms (User Account). Apply the validation controls.
109 | P a g e
Answer Sheet for Performance Task
110 | P a g e
111 | P a g e
112 | P a g e
113 | P a g e
114 | P a g e
115 | P a g e
116 | P a g e
117 | P a g e
118 | P a g e
119 | P a g e
120 | P a g e
121 | P a g e
122 | P a g e
123 | P a g e
124 | P a g e
125 | P a g e
126 | P a g e
127 | P a g e
128 | P a g e
129 | P a g e
130 | P a g e
131 | P a g e
132 | P a g e
133 | P a g e