Unit 2:

Web Form Fundamentals:

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.
We can use Visual Studio 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, we can 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.

Server Controls
The following table contains the server-side controls for the Web
Forms.

Control Applicable Events Description

Name

Label None It is used to display text on the HTML page.

TextBox TextChanged It is used to create a text input in the form.

Button Click, Command It is used to create a button.

LinkButton Click, Command It is used to create a button that looks similar to the
hyperlink.

ImageButton Click It is used to create an imagesButton. Here, an image

 works as a Button.

Hyperlink None It is used to create a hyperlink control that responds to

a click event.

DropDownLis SelectedIndexChang It is used to create a dropdown list control.

t ed

ListBox SelectedIndexCnhag It is used to create a ListBox control like the HTML

ed control.

DataGrid CancelCommand, It used to create a frid that is used to show data. We

EditCommand, can also perform paging, sorting, and formatting very
DeleteCommand, easily with this control.
ItemCommand,
SelectedIndexChang
ed,
PageIndexChanged,
SortCommand,
UpdateCommand,
ItemCreated,
ItemDataBound

DataList CancelCommand, It is used to create datalist that is non-tabular and used

EditCommand, to show data.
DeleteCommand,
ItemCommand,
SelectedIndexChang
ed,
UpdateCommand,
ItemCreated,
ItemDataBound

Repeater ItemCommand, It allows us to create a non-tabular type of format for

ItemCreated, data. You can bind the data to template items, which
ItemDataBound are like bits of HTML put together in a specific
repeating format.

CheckBox CheckChanged It is used to create checkbox.

CheckBoxList SelectedIndexChang It is used to create a group of check boxes that all work
ed together.

RadioButton CheckChanged It is used to create radio button.

RadioButtonL SelectedIndexChang It is used to create a group of radio button controls that

ist ed all work together.

Image None It is used to show image within the page.

Panel None It is used to create a panel that works as a container.

PlaceHolder None It is used to set placeholder for the control.

Calendar SelectionChanged, It is used to create a calendar. We can set the default

VisibleMonthChange date, move forward and backward etc.
d, DayRender

AdRotator AdCreated It allows us to specify a list of ads to display. Each time

the user re-displays the page.

Table None It is used to create table.

XML None It is used to display XML documents within the HTML.

Literal None It is like a label in that it displays a literal, but allows us

to create new literals at runtime and place them into
this control.

HTML Controls
These controls render by the browser. We can also make HTML
controls as server control.

Controls Description
Name

Button It is used to create HTML button.

Reset Resets all other HTML form elements on a form to a default value
Button

Submit Automatically POSTs the form data to the specified page listed in the Action
Button 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 are
Field 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 controls
Button
Table Allows you to present information in a tabular format

Image Displays an image on an HTML form

ListBox Displays a list of items to the user. You can set the size from two or more to
specify how many items you wish show. If there are more items than will fit
within this limit, a scroll bar is automatically added to this control.

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.

Horizontal Displays a horizontal line across the HTML page

Rule

ASP.NET Web Forms Features

o Server Controls
o Master Pages
o Working with data
o Membership
o Client Script and Client Frameworks
o Routing
o State Management
o Security
o Performance
o Error Handling

1.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 we can use to connect to data sources and display
data.
 2.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 that we want 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.
3.Working with Data
In an ASP.NET Web Forms application, we use data-bound controls
to automate the presentation or input of data in web page UI
elements such as tables and text boxes and drop-down lists.
4.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.
5.Client Script and Client Frameworks
We can enhance the server-based features of ASP.NET by
including client-script functionality in ASP.NET Web Form pages.
We can use client script to provide a richer, more responsive user
interface to the users. We can also use client script to make
asynchronous calls to the Web server while a page is running in
the browser.
6.Routing
We can configure URL routing of our application. A request URL is
simply the URL a user enters into their browser to find a page on
our web site. We use routing to define URLs that are semantically
meaningful to users and that can help with search-engine
optimization (SEO).
7.State Management
ASP.NET Web Forms includes several options that help you
preserve data on both a per-page basis and an application-wide
basis.
8.Security
Developing a secure application is most important aspect of
software development process. ASP.NET Web Forms allow us to
add extensibility points and configuration options that enable us to
customize various security behaviors in the application.
9.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.
10. Debugging and Error Handling
We can diagnose problems that occur in our Web Forms
application. Debugging and error handling are well supported
within ASP.NET Web Forms so that our applications compile and
run effectively.
Writing Code
To start with writing a code i.e. dynamic and operational coding
we need to switch to code-behind class. To switch up and down
the code we use View code or View Designer buttons which
appears just above the Solution Explorer window. Another
approach is by double clicking either on .aspx page in the solution
explorer or .aspx.cs page. Here we will be discussing C# code not
the HTML code .
Using the Code-Behind Class
 Code-Behind class refers to the code that is written in
separate class file that has extension .aspx.cs or .aspx.vb
depending on the language used.
 When we switch to code view we will see the page class for
our webpage.
 For example when we create a webpage named
SamplePage.aspx.cs we will see a code behind class looks
like this :
Using System;
Using.System.Collection.Generic;
Using.System.Linq;
Using.System.Web;
Using.System.Web.UI;
Using.System.Web.UI.WebControls;
Public partial class SamplePage: System.Web.UI.Page
{
Protected void Page_Load(object sender , EventArgs e)
{
}
}

Adding Event Handlers

ASP.NET allows to implement event based model for our
application.
To create an event handler in properties window we do the
following
1) Double-click to create a new event handler for that event.
2) Type the name of the handler to create.
3) In the drop-down list select the name of existing handler.
UNDERSTANDING THE ANATOMY OF AN ASP.NET
APPLICATION
 ASP.NET pages are divided into multiple webpages. Every
webpage shares a common resource and configuration. Each
webpage is executed in separate application domain.
 If error occurs in application domain it does not affect other
applications running on the same computer. Each web
application is a combination of 87 files, pages, handlers,
modules and executable code that can be invoked AWP from
a virtual directory on the web server.
 ASP.NET pages are divided into multiple webpages. Every
webpage shares a common resource and configuration. Each
webpage is executed in separate application domain.
 If error occurs in application domain it does not affect other
applications running on the same computer. Each web
application is a combination of files, pages, handlers, modules
and executable code that can be invoked AWP from a virtual
directory on the web server.
ASP.NET Web Folders
ASP.NET defines several special folders. These special folders
can be
added to a Web site from Visual Studio menu system. We can
add it by
right clicking the Website Application Project and selecting
Add ASP.NET folder.
The diagram shows the following :-

ASP.Net folders are as follows:-

1) App_Browsers - ASP.net reserve this folder name for
storing browser definition files. These files are used to
determine the client browser capabilities and have .browser
extension.

2) App_Code – App_code folder can contain source code for

utility classes as well business objects (i.e .cs, .vb and .jsl
files).The Classes that are present in App_Code folder are
automatically compiled when your web application compiled.

3) App_Data - .App_Data folder is used by ASP.NET

application for storing ASP.NET application local database.
App_Data is used to store files that can be used as database
files (.mdf and xml files). Developers can also use this folder
for storing data for their ASP.NET Application.

4) App_GlobalResources - App_GlobalResources folder

contains resources (.resx and .resources files) that are
compiled into assemblies and have a global scope. These files
are used to externalize text and images from our application
code. This also helps us to support multiple languages and
design-time changes without recompilation of your source
code. These files are strongly
typed and can be accessed programmatically.

5) App_LocalResources - App_LocalResources folder

contains
resources (.resx and .resources files). These files are available
to a
particular project, web page, master page or web user control.

6) App_Themes -These files contain subfolders that defines a

specific
theme or look and feel for your Web site. These consist of files
(such as .skin, .css and image files) that defines the
appearance of
Web pages and controls.

7) App_WebReferences – It contains Web references files

(.wsdl,
.xsd, .disco, and .discomap files) that define references to
Web
services.

8) Bin - Bin folder contains compiled assemblies (.dll files) for

code
that we want to reference in our application. Assemblies in Bin
folder are automatically reference in our application.
 Debugging

 Debugging enables programmers to see how the Code

works step-by-step, how the variables values change,
how objects are created and destroyed, and so on.
Debugging is the application’s method of inserting
breakpoints.
 Such breakpoints are used to pause running a program
from running.
 We start the debugging session using F5(Debug/Start
Debugging). This command starts our app with the
debugger attached.
 The Green arrow also starts the debugger

Run to a specific location or function

These methods are useful when we know exactly what
code we want to inspect and where we want to start
debugging.
1. Set breakpoints in the code :- To set a simple
breakpoint in our code, open the source file in the Visual
Studio editor. Set the cursor at the line of code where we
want to suspend execution and then right-click in the code
window to see the context menu and choose
Breakpoint/Insert Breakpoint(or Press F9)

After compiling the program:

After pressing F5 to continue code execution:

2.Conditional Breakpoints:
-These breakpoints are used when you want to stop the
code the particular condition or value has been
occurred.
-Write click on red breakpoint and select condition.

- After clicking on condition breakpoint following

window will get opened
 -Now breakpoint will work only if the value of a==2;
means if a==2 true then program will stop
3.Tracepoint:
Tracepoints are used in debugging to monitor and record
specific events or states within a running program without
stopping its execution. Here are some key reasons why
tracepoints are useful in debugging.

-Press F9 and set breakpoint and double click on Hit Count:

-set (Name:{name}, Age:{age})

 - Compile program and execute

-You will find values in Debug window

• Run to the cursor location:- To run to the cursor
location, place the cursor on an executable line of code in a
source window. On the editors context menu, choose Run
to Cursor.
• Manually break into the code :- To break into the line
of code in
an executing app, choose Debug, Break All
(Keyboard:Ctrl+Alt+Delete)
• Run to a function on call stack :- In the Call Stack
Window, select the function, right-click and choose Run to
Cursor.
When the site is executed for the first time, Visual Studio
displays a
prompt asking whether it should be enabled for debugging:
INTRODUCTION TO SERVER CONTROLS

The server controls are the heart of ASP.NET pages

which represents
dynamic elements that our user can interact with.
Server controls are tags that are understood by the
server. There are three kinds of server controls
1) HTML Server Controls – Traditional HTML tags.
2) Web Server Controls – New ASP.NET tags.
3) Validation server Controls – For input validation.

Advantages of Server Controls

• ASP .NET Server Controls can detect the target browser's
capabilities and render themselves accordingly.
• Newer set of controls that can be used in the same
manner as any
HTML control like Calender controls.
• ASP .NET Server Controls have an object model different
from the
traditional HTML and even provide a set of properties and
methods
that can change the outlook and behavior of the controls.
• ASP .NET Server Controls have higher level of
abstraction.

HTML Server Controls :-

The HTML elements are considered as text in ASP.NET file.
They cannot
be referred as server side code. These controls can be treated
as server
control by adding runat= “server” attribute. The id attribute
in the
element can be added as reference to the control. All the
HTML server
controls are written in the <form> tag.

HTML Control Events

Events Controls
ServerClick HtmlAnchor, HtmlButton,
HtmlInputButton,
HtmlInputImage, HtmlInputReset
ServerChange HtmlInputText, HtmlInputCheckBox,
HtmlInputRadioButton, HtmlInputHidden,
HtmlSelect, HtmlTextArea
Some of the HTML Controls are as follows:-
• HtmlAnchor – Controls an <a> HTML element
• HtmlButton – Controls a <button> HTML element
• HtmlForm – Controls a <form> HTML element
• HtmlGeneric – Controls other HTML element not specified
by a specific HTML server control.
• HtmlImage – Controls an <image> HTML element
• HtmlInputButtonControl - The HtmlInputButton control is
used to
control <input type= “button”>, <input type= “reset”>
and
<input type= “submit”> elements.
• HTMlInputCheckbox control - The HtmlInputCheckBox
control is
used to control as <input type=”checkbox”> element.
• HtmlInputFile control - The HtmlInputFile control is used
to control
an <input type= “file”> element.
• HtmlInputHidden control - The HtmlInputHidden control is
sued to
control an <input type= “hidden”> element.
• HtmlInputRadioButton -The HtmlInputRadioButton control
is used AWP to control an <input type= “radio”> element.
• HtmlSelect control - The HtmlSelect control is used to
control <select> element.
• HtmlTextArea control – The HtmlTextArea control is used
to control <textarea> element
• HtmlTable control - The HtmlTable control is used to
control <table> element.
Create Web Application using HTML control
Write down appropriate code

 AutoEventWireup="true": When AutoEventWireup is true

, handlers are automatically bound to events at run time
based on their name and signature. For each event, ASP.NET
searches for a method that is named according to the pattern
Page_ eventname, such as Page_Load or Page_Init .

 CodeBehind="Default.aspx.cs":When you use Visual

Studio .NET to create ASP.NET Web Forms, code-behind pages
are the default method. In addition, Visual Studio .NET
automatically performs pre-compilation for you when you
build your solution.

 Inherits="WebApplication10._Default":If you create

default.aspx then it can't use a class called default as that is a
reserved word, so it makes a class called _default instead, and
all the code in code-behind goes there.

Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
Inherits="WebApplication7._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div style="height: 225px">
<asp:TextBox id="TextBox1" runat="server" />
<asp:Button id="Button1" runat="server" Text="Click Me"
onclick="Button1_Click1" /></br> </br>
<%-- server control(data submitted to server after click on button)--
%>
<input type="text" name="TextBox2" />
<%--<input type="submit" name="Submit1" value="Click Me" />--%> <
%--//html control--%>

</div>
</form>
</body>
</html>

Default.aspx.cs
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication7
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

protected void Button1_Click1(object sender, EventArgs

e)
{
string s1=TextBox1.Text; //return The server form
Value
from TextBox
Response.Write(s1);
Response.Write("<br>");
string s2=Request.Form["TextBox2"]; //html form
value
//All the HTML Server controls can be accessed
through the Request object.
Response.Write(s2);
}
}}
Click on
Output:

View State:
View State is used to store user data on page at
the time of post back of web page. It does not hold
the controls; it holds the values of controls.
It does not restore the value to control after page
post back.
View State can hold the value on single web page,
if we go to other page using response.redirect
then View State will be null.
Example:
Click on Table>Insert Table>

Add 2 rows, 2 columns>click on OK

Add controls respectively

Rename button names and button_id for both
button
Button1: (name- Set Date) (id-setdate)
Button2: (name- Post Back) (id- postback)
Label1: (EnableViewState=False)
Double click on Set Date button and write down
code

Default.aspx.cs
namespace WebApplication21
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void setdate_Click(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToString();
}
}
}
Output:

After click post back button or any date from calender

Using Page Class:
Every web Page is a custom class that inherits
from the system. web.UI.Page control. By
inheriting form this class, your page class acquires
a number of properties that our code can use.
These include properties for enabling caching,
validation and tracing.

Property Description

IsPost Returns true if the HTTP data transfer method used by the client is a POST request

Layout Gets or sets the path of a layout page

Page Provides property-like access to data shared between pages and layout pages

Request Gets the HttpRequest object for the current HTTP request

Server Gets the HttpServerUtility object that provides web-page processing methods

Session Instance of the HttpSessionState class; manages userspecific data. It is functionally

the ASP intrinsic Session object

Response Instance of the HttpResponse class; sends HTTP response data to the client. It is fun
equivalent to the ASP intrinsic Response object

Calendar Control:
The calendar control is used to display a calendar
in the browser. This control displays a one month
calendar that allows the user to select dates and
move to the next and previous months. It is a
functionality rich web control which provides
displaying one month at a time, selecting a day, a
week or a month, selecting a range of days
moving from month to month and controlling the
display of the days programmatically.
Syntax:-
<asp:Calendar ID=”Calendar1” runat=”server”>
</asp:Calendar>

Properties Description
Gets or sets the caption for the
Caption
calendar control.
Gets or sets the alignment for
CaptionAlign
the caption.
Gets or sets the number of
CellPadding spaces between the data and
the cell border.
Gets or sets the space between
CellSpacing
cells.
Gets the style properties for the
DayHeaderStyle section that displays the day of
the week.
DayNameFormat Gets or sets format of days of
 the week.
Gets the style properties for the
DayStyle
days in the displayed month.
Gets or sets the day of week to
FirstDayOfWeek
display in the first column.
Gets or sets the text for next
NextMonthText month navigation control. The
default value is >.
Gets or sets the format of the
NextPrevFormat next and previous month
navigation control.
Gets the style properties for the
OtherMonthDayS days on the Calendar control
tyle that are not in the displayed
month.
Gets or sets the text for
PrevMonthText previous month navigation
control. The default value is <.
SelectedDate Gets or sets the selected date.
Gets a collection of DateTime
SelectedDates objects representing the
selected dates.
SelectedDayStyl Gets the style properties for the
e selected dates.
Gets or sets the selection mode
that specifies whether the user
SelectionMode
can select a single day, a week
or an entire month.
Gets or sets the text for the
SelectMonthText month selection element in the
selector column.
Gets the style properties for the
SelectorStyle week and month selector
column.
Gets or sets the text displayed
SelectWeekText for the week selection element
in the selector column.
Gets or sets the value indicating
ShowDayHeader whether the heading for the
days of the week is displayed.
Gets or sets the value indicating
ShowGridLines whether the gridlines would be
shown.
ShowNextPrevMo Gets or sets a value indicating
 whether next and previous
nth month navigation elements are
shown in the title section.
Gets or sets a value indicating
ShowTitle whether the title section is
displayed.
Gets or sets the format for the
TitleFormat
title section.
Get the style properties of the
Titlestyle title heading for the Calendar
control.
Gets the style properties for
TodayDayStyle today's date on the Calendar
control.
Gets or sets the value for
TodaysDate
today's date.
Gets or sets a value that
indicates whether to render the
UseAccessibleHe table header <th> HTML
ader element for the day headers
instead of the table data <td>
HTML element.
 Gets or sets the date that
VisibleDate
specifies the month to display.
Gets the style properties for the
WeekendDayStyl
weekend dates on the Calendar
e
control.
The Calendar control has the following three most
important events that allow the developers to
program the calendar control. They are:

Events Description

It is raised when a day, a

SelectionChanged week or an entire month is
selected.

It is raised when each data

DayRender cell of the calendar control is
rendered.

VisibleMonthChan It is raised when user

ged changes a month.

Calendar Control Example 1:

using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication1
{
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

protected void Calendar1_SelectionChanged(object sender,

EventArgs e)
{
Response.Write(Calendar1.SelectedDate.ToString());
Response.Write("<br>"+
Calendar1.SelectedDate.ToShortDateString());
Response.Write("<br>" +
Calendar1.SelectedDate.ToLongDateString());
Response.Write("<br>" +
Calendar1.SelectedDate.ToLongTimeString());
Response.Write("<br>" +
Calendar1.SelectedDate.ToString("dd/MM/yy"));
Response.Write("<br>" +
Calendar1.SelectedDate.ToString("ddd/MMM/yyyy"));
Response.Write("<br>" +
Calendar1.SelectedDate.ToString("dddd/MMMM/yyyy"));
Response.Write("<br>" +
Calendar1.SelectedDate.ToString("dddd:MMMM:yyyy"));
}
}
}
Calendar Control Example 2:
 Create a new Web Application
 Drag and Drop calendar, Textbox and Image Button in Design

tab.
 Click on Calendar property to change format > click on
apply>OK
 Write click on project and create new Image Folder > add
image
 Click on Image Button > properties > click on
ImageURL>select img folder>select image >OK

 Image added to Image button >

 Open Image Button properties > set height and width as 25px
image will get adjust in that size.
 Double click Image Button> Default.aspx.cs will get open
 Now, set calendar property:visible=false> double click on
Calendar

 Right Click> View in Browser

 Output
 Again add Textbox, Image button and Calendar

 Write down below code

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication11
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

protected void ImageButton1_Click(object sender, ImageClickEventArgs e)

{
Calendar1.Visible = true;
}

protected void Calendar1_SelectionChanged(object sender, EventArgs e)

{
TextBox1.Text = Calendar1.SelectedDate.ToString("dd-MM-yyyy");
Calendar1.Visible = false;
}
protected void ImageButton2_Click(object sender, ImageClickEventArgs e)
{
Calendar2.Visible = true;
}

protected void Calendar2_SelectionChanged(object sender, EventArgs e)

{
DateTime dt = Convert.ToDateTime(Calendar2.SelectedDate.ToShortDateString());
TimeSpan ts = new TimeSpan(DateTime.Now.Hour, DateTime.Now.Minute,DateTime.Now.Second);
dt = dt.Add(ts);
Label1.Text = dt.ToString();
TextBox2.Text = dt.ToString();
Calendar2.Visible = false;

}
}
Calendar Control Video Link:
https://www.google.com/search?q=how+to+use+calendar+control+in+asp.net+c
%23+in+visual+studio+2010&rlz=1C1OPNX_enIN1082IN1082&oq=how+to+use+calen
dar+control+in+asp.net+c
%23+in+visual+studio+2010&gs_lcrp=EgZjaHJvbWUyBggAEEUYOdIBCTIxMDA3ajBqNKg
CALACAQ&sourceid=chrome&ie=UTF-
8#fpstate=ive&vld=cid:a2d868b3,vid:XiXZFvnx8jU,st:63

Simple Code for calendar control

https://www.youtube.com/watch?v=Ue4PEeNj01c

Calendar Control Date Time operations

https://www.youtube.com/watch?v=p1TtrLMeZnM

List Controls
These controls are used to display the list with some list
items in the page. These controls include List Box, Drop
Down List, Check Box List, Radio Button List and Bulleted
List. To add items to the list we have to define elements
between the opening and closing tags of the control.
DropDownList
DropDownList control is used select single option from
multiple listed items. Basic syntax of DropDown List :
<asp:DropDownList ID="DropDownList1"
runat="server">
 </asp:DropDownList>

Common properties of List Box and Drop Down List are

as follows
Properties Description
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.
DataTextField Name of the data source field to
supply the text of the items.
Generally this field came from the
data source.
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.
DataSourceID ID of the data source control to
provide data.

Common properties of each list item objects:

• Text :- The text displayed for the item.
• Selected :- Indicates whether the item is selected.
• Value :- A string value associated with the item

Code:
<body style="background-color:aliceblue;text-align:center;font-
family:'Arial Rounded MT'">
 <form id="form1" runat="server">
<div>
<h2> Practical 3 A - AutoPostback</h2>
<asp:Label ID="Label2" runat="server" Text="Name :
"></asp:Label>
<asp:TextBox ID="TextBox2"
runat="server"></asp:TextBox><br /><br />
<asp:Label ID="Label1" runat="server" Text="Roll no :
"></asp:Label>
<asp:TextBox ID="TextBox1"
runat="server"></asp:TextBox><br /><br />
<asp:Label ID="Label3" runat="server" Text="Class :
"></asp:Label>
<asp:RadioButton ID="RadioButton1" runat="server" Text="FY"
GroupName="class"
AutoPostBack="True" /></asp:RadioButton>
<asp:RadioButton ID="RadioButton2" runat="server" Text="SY"
GroupName="class"
AutoPostBack="True" /></asp:RadioButton>
<asp:RadioButton ID="RadioButton3" runat="server" Text="TY"
GroupName="class"
AutoPostBack="True" /></asp:RadioButton> <br /><br />
<asp:Label ID="Label4" runat="server" Text="Course :
"></asp:Label>
<asp:DropDownList ID="DropDownList1" runat="server"
AutoPostBack="True"

onselectedindexchanged="DropDownList1_SelectedIndexChanged
">
<asp:ListItem>Select</asp:ListItem>
<asp:ListItem >IT</asp:ListItem>
<asp:ListItem>CS</asp:ListItem>
<asp:ListItem>Bvoc</asp:ListItem>
</asp:DropDownList><br /><br />
 <asp:Button ID="Button1" runat="server" Text="Submit"
onclick="Button1_Click" />
<br /><br />
<asp:Label ID="Label5" runat="server"
Text=""></asp:Label><br /><br />
<asp:Label ID="Label6" runat="server" Text=""></asp:Label>
</div>
</form>
</body>

C# code:
namespace AutoPostBack
{
public partial class AutoPostBack : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
string s;
if (RadioButton1.Checked == true)
{
s = RadioButton1.Text;
}
else if (RadioButton2.Checked == true)
{
s = RadioButton2.Text;
 }
else
{
s = RadioButton3.Text;
}
Label5.Text = Convert.ToString("Class : " + s);
}
protected void DropDownList1_SelectedIndexChanged(object
sender, EventArgs e)
{
Label6.Text = "You have been enrolled in " +
DropDownList1.SelectedItem;
}
}
}
Table Control:
A table Web control creates an HTML table in simple HTML
with the help of the <tr> and <td> tags.
You can use the <table>,<tr>, and <td> tags to create a
table and its rows in HTML. For example, the HTML code in
Listing 7-25 creates a table with two rows and three
columns with their values.

Manages a collection of table cells such as adding a cell to

a row or removing a cell from it.
CONTROL CODE DESCRIPTION
 The System.Web.UI.Table class
encapsulates an HTML table. An HTML
Table <asp:Table>
table control, used to creates a table with the
help of TableRow and TableCell.
The System.Web.UI.TableRow class
encapsulates a row within a table, which
TableRow <asp:TableRow>
later can be used to get or set row's cells
values using TableCell.
The System.Web.UI.TableCell class
TableCell <asp:TableCell>
encapsulates a cell within a table.
The System.Web.UI.TableCell class
<asp:TableRowCollection encapsulates a TableRowCollection and is
TableRowCollection
> used to manage a collection of table a
collection or removing a row from it.
Manages a collection of table cells such as
TableCellCollection <asp:TableCellCollection> adding a cell to a row or removing a cell
from it.
TableHeaderCollectio
<asp:TableHeaderCell> Encapsulate a table header cell.
n

Asp.code :

<body style="background-color:aliceblue">
<center>
<h1>Student Form</h1><hr />
<form id="form1" runat="server">
<div>
<label for="Label1">Student Name : </label>
<asp:TextBox ID="TextBox1" runat="server" /><br /><br />
<label for="Label3">Student ID : </label>
<asp:TextBox ID="TextBox2" runat="server" /><br /><br />
<asp:Label ID="Label3" runat="server" Text="Course Name : "></asp:Label>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox><br /><br />
<asp:Label ID="Label4" runat="server" Text="Date of Birth : "></asp:Label>
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox><br /><br />
<asp:Button ID="Button1" runat="server" Text="Submit"
OnClick="Button1_Click"/><br/><br />
<asp:Table ID="Tabel1" runat="server" Border="ActiveBorder">
<asp:TableHeaderRow>
<asp:TableHeaderCell>Student Name</asp:TableHeaderCell>
<asp:TableHeaderCell>Student ID</asp:TableHeaderCell>
<asp:TableHeaderCell>Course Name</asp:TableHeaderCell>
<asp:TableHeaderCell>Date of Birth</asp:TableHeaderCell>
</asp:TableHeaderRow>
</asp:Table>
</div>
</form>
</center>
</body>

C# Code:

protected void Button1_Click(object sender, EventArgs e)

{
string name = TextBox1.Text;
string studentID = TextBox2.Text;
string coursename =TextBox3.Text;
string DOB = TextBox4.Text;

TableRow newRow = new TableRow();

TableCell nameCell = new TableCell();
TableCell idCell = new TableCell();
TableCell courseCell = new TableCell();
TableCell dob=new TableCell();

nameCell.Text = name;
idCell.Text = studentID;
courseCell.Text = coursename;
dob.Text = DOB;

newRow.Cells.Add(nameCell);
newRow.Cells.Add(idCell);
newRow.Cells.Add(courseCell);
newRow.Cells.Add(dob);

Tabel1.Rows.Add(newRow);

TextBox1.Text = string.Empty;
TextBox2.Text = string.Empty;
TextBox3.Text = string.Empty;
TextBox4.Text = string.Empty;
}

VALIDATION CONTROLS:
There are six types of validation controls in ASP.NET
1. Required Field Validation Control
2. Compare Validator Control
3. Range Validator Control
4. Regular Expression Validator Control
5. Custom Validator Control
6. Validation Summary
Insert table>add 5 rows 3 columns

Design following page

Add dropdown list and insert values

Click on edit items and add values to the dropdown list>add>select

ListItem>add Text
Add validations to fields

Add requiredvalidator to each textbox

Change properties of required validator for each control i.e.

ErrorMessage and ControlToValidate
Add regularexpression validation to email textbox and change
following properties
Click on ValidationExpression properties and select Internet e-
mail address and click on ok
Add CompreValidator on confirm password field
Put ErrorMessage , ControlToValidate & ControlToCompare

Double click on submit button and run the code

Output: