You are on page 1of 8

1. What is ASP.NET?

ASP.NET is a programming framework built on the common language runtime that can be used
on a server to build powerful Web applications. ASP.NET offers several important advantages
over previous Web development models.

Enhanced Performance
ASP.NET is a compiled common language runtime code running on the server. Unlike its
interpreted predecessors, ASP.NET can take advantage of early binding, just-in-time compilation,
native optimization, and caching services right out of the box. This amounts to dramatically better
performance before you ever write a line of code.

World-Class Tool Support

The ASP.NET framework is complemented by a rich toolbox and designed in the Visual Studio
integrated development environment. WYSIWYG editing, drag-and-drop server controls, and
automatic deployment are just a few of the features this powerful tool provides.

Power and Flexibility

As ASP.NET is based on the common language runtime, the power and flexibility of that entire
platform is available to Web application developers. The .NET Framework class library,
Messaging, and Data Access solutions are all seamlessly accessible from the Web. ASP.NET is
also language-independent, so you can choose the language that best applies to your application
or partition your application across many languages. Further, common language runtime
interoperability guarantees that your existing investment in COM-based development is preserved
when migrating to ASP.NET.

ASP.NET makes it easy to perform common tasks, from simple form submission and client
authentication to deployment and site configuration. For example, the ASP.NET page framework
allows you to build user-interfaces that cleanly separate application logic from presentation code
and to handle events in a simple, Visual Basic-like forms processing model. Additionally, the
common language runtime simplifies development, with managed code services such as
automatic reference counting and garbage collection.

ASP.NET employs a text-based, hierarchical configuration system, which simplifies the applying
of settings to your server environment and Web applications. As configuration information is
stored as plain text, new settings may be applied without the aid of local administration tools. This
"zero local administration" philosophy extends to deploying ASP.NET Framework applications as
well. An ASP.NET Framework application is deployed to a server simply by copying the
necessary files to the server. No server restart is required, even to deploy or replace running
compiled code.

Scalability and Availability

ASP.NET has been designed with scalability in mind, with features specifically tailored to improve
performance in clustered and multiprocessor environments. Further, processes are closely
monitored and managed by the ASP.NET runtime, so that if one misbehaves (leaks, deadlocks),
a new process can be created in its place, which helps keep your application constantly available
to handle requests.

Customizability and Extensibility

ASP.NET delivers a well-factored architecture that allows developers to "plug-in" their code at the
appropriate level. In fact, it is possible to extend or replace any subcomponent of the ASP.NET
runtime with your own custom-written component. Implementing custom authentication or state
services has never been easier.

With built in Windows authentication and per-application configuration, you can be assured that
your applications are secure

2. Introducing Web Forms

Web Forms consist of a combination of HTML, code, and controls that execute on a Web server
that is running Microsoft Internet Information Services (IIS).
Web Forms display a UI by generating HTML that is sent to the browser, while the supporting
code and controls that run the UI stay on the Web server. This split between client-side interface
and server-side code is a crucial difference between Web Forms and traditional Web pages.
While a traditional Web page requires all of the code to be sent to and be processed at the
Browser, Web Forms need to send only the interface controls to the browser, and the page
processing is kept on the server. This UI/code split increases the range of supported browsers
while increasing the security and functionality of the Web page.

.aspx extension
Web Forms are commonly referred to as ASP.NET pages or ASPX pages. Web Forms have
an .aspx extension and work as the containers for the text and controls that you want to display
on the browser.
ASP.NET (.aspx) pages and Active Server Pages (ASP) (.asp) can coexist on the same server.
The file extension determines whether ASP or ASP.NET processes it.
Web Forms are often comprised of two separate files: the .aspx file which contains the UI for the
Web Form, while the .aspx.vb or .aspx.cs file, which is called a code-behind page, that contains
the supporting code.

Page attributes
The functions of a Web Form are defined by three levels of attributes. Page attributes define
global functions, body attributes define how a page will be displayed, and form attributes define
how groups of controls will be processed. The <@Page> tag defines page-specific attributes that
are used by the ASP.NET page parser and compiler. You can include only one <@ Page> tag
per .aspx file. The following examples are typical <@ Page> tags for Microsoft Visual Basic®
.NET and for Microsoft Visual C#T .NET:
<%@ Page Language="vb" Codebehind="WebForm1.aspx.vb" SmartNavigation="true" %>
<%@ Page Language="c#" Codebehind="WebForm1.aspx.cs" SmartNavigation="true" %>
3. Creating a Web Form in Visual Studio .NET
Depending on where you are in your development cycle, there are several ways that you can
create a Web Form.

New Web applications

When you create a new project in Visual Studio .NET, a default Web Form named
WebForm1.aspx is automatically included in the project.

To create a new ASP.NET Web Application project and a default Web Form:
1. In Visual Studio .NET, on the Start Page, click New Project.
2. In the New Project dialog box, click ASP.NET Web Application, type the project name in
the Location field, and then click OK.
3. Visual Studio .NET creates a new Web application and a default Web Form that is named

Creating additional Web Forms

If you are expanding an existing project, you can use Solution Explorer to quickly add additional
Web Forms.

To add additional Web Forms to a Web Application project:

1. In the Solution Explorer window, right-click the project name, point to Add, and then click
Add Web Form. The Add New Item - ProjectName dialog box opens.
2. In the Add New Item - ProjectName dialog box, change the name of the Web Form, and
then click Open. A new Web Form will be created and added to the project.

4. Introducing ASP.NET Server Controls

When you create Web Forms pages, you can use these types of controls:
• HTML server controls - HTML elements are exposed to the server so that you can program
them. HTML server controls expose an object model that maps very closely to the HTML
elements that they render.
• Web server controls - Controls with more built-in features than HTML server controls. Web
server controls include not only form-type controls such as buttons and text boxes, but also
special-purpose controls such as a calendar. Web server controls are more abstract than
HTML server controls in a way that their object model does not necessarily reflect HTML
• Validation controls - Controls that incorporate logic to allow you to test a user's input. You
attach a validation control to an input control to test what the user enters for that input control.
Validation controls are provided to allow you to check for a required field, to test against a
specific value or pattern of characters, to verify that a value lies within a range, and so on.
• User controls - Controls that you create as Web Forms pages. You can embed Web Forms
user controls in other Web Forms pages, which is an easy way to create menus, toolbars, and
other reusable elements.

4.1 ASP.NET Server Controls

ASP.NET server controls are components that run on the server and encapsulate UI and other
related functionalities. Server controls are used in ASP.NET pages and in ASP.NET code-behind
classes. Server controls include buttons, text boxes, and drop-down lists. The following is an
example of a Button server control:
<asp:Button id="Button1" runat="server" Text="Submit" />

Server controls have a runat="server" attribute, the same attribute as Web Forms. This means
that the logic in the control runs on the server and not on the user's browser. Server controls are
different from HTML controls in a way that they run only on the client's browser and have no
action on the server. Another feature of server controls is that the view state, the settings, and the
user input of the control are automatically saved when the page is sent back and forth between
the client and the server. Traditional HTML controls are stateless and revert to their default
setting when the page is returned from the server to the client.

Built-in functionality
The functionality of a control is what happens when the user clicks a button or a list box. These
processes are called event procedures. As the Web Form programmer, you determine the event
procedures that are associated with each server control.

Common object model

In ASP.NET, server controls are based on a common object model, and as a result, they share a
number of attributes with each other. For example, when you want to set the background color for
a control, you always use the same BackColor attribute, irrespective of the control. The following
HTML for a Web server control button shows some of the typical attributes of a server control:

<asp:Button id="Button1" runat="server" BackColor="red"

Width="238px" Height="25px" Text="Web control">

Create browser-specific HTML

When a page is rendered for a browser, the Web server controls determine which browser is
requesting the page and then delivers the appropriate HTML. For example, if the requesting
browser supports client-side scripting, such as Internet Explorer version 4.0 or later, the controls
create client-side script to implement their functionality. However, if the requesting browser does
not support client-side script, the controls create server-side code and require more round trips to
the server to obtain the same functionality.
The following is the ASP.NET HTML from a Web Form that you would write to create a text box
with the default text: "Enter your Username"

<asp:TextBox id="TextBox1" runat="server" Width="238px" Height="25px">\

Enter your Username

When this page is accessed by a user with Internet Explorer 6, the common language runtime
creates the following HTML customized for Internet Explorer 6:

<input name="TextBox1" type="text" value="Enter your Username"

id="TextBox1" style="height:25px;width:238px" />
As the server control creates customized HTML for the features that are available in the client's
browser, you can write for the latest browsers without worrying about browser errors blocking
your less up-to-date users.

5. Working with Server Control

In this exercise, you will see how to add TextBox, Button, Label and Calendar controls to a
Web Form.

5.1 Exercise 1: Adding Server Controls to a Web Form

The objective of this exercise is to introduce how to create a Microsoft® ASP.NET Web Form,
populate it with Web controls and set properties of Web controls on an ASP.NET Web Form.

Exercise 1: Adding Server Controls to a Web Form

Task 1: Create the ASPNetLabApplicationVB solution

Only perform this procedure if you have not created a ASPNetLabApplicationVB solution file.

• Using Visual Studio .NET, create a new blank solution named ASPNetLabApplicationVB:
1. On the File menu, point to New, and then click Blank Solution.
2. In the New Project dialog box, type ASPNetLabApplicationVB in the Name text box, and then
click OK..

Task 2: Create the ASPNetHOL01 Project

• Create a new ASP.NET Web Application project, named ASPNetHOL01VB for your preferred
language, in the ASPNetLabApplicationVB solution:
1. On the File menu, point to New, and then click Project.
2. In the New Project dialog box, on the Project Types list, click Visual Basic Projects.
3. In the Templates list, click ASP.NET Web Application.
4. Set the Location to http://localhost/ASPNetHOL01VB for a Visual Basic .NET project, click Add to
Solution, and then click OK.

Task 3: Create the Default.aspx Web Form

• You will create a new Web Form named Default.aspx. You will then add a TextBox, Button,
Label and Calendar control to the Default.aspx page. Finally, you will set the format of the
calendar control by using properties window.
1. In Solution Explorer, right-click the project node, choose Add and then Add New Item.
2. Under Categories, choose UI.
3. Under Templates, select Web Form.
4. Type Default.aspx for the Name:
5. Click Open

Task 4: Adding simple Web server controls

1. Open the Default.aspx page in the ASPNetHOL01VB project.

2. Add a TextBox, a Button, and a Label Web server control to the Default.aspx page.
3. Using the Properties window, set the ID and Text properties of the controls to the values in the
following table:
Control ID Text
TextBox txtName Name
Button cmdSubmit Submit
Label lblMessage Message
4. View the page in HTML view.
Notice that the Web Form was created with the runat="server" attributes, and that style attributes
were added to the controls to place them on the Web Form in GridLayout mode. Point out how
the ID and Text properties were implemented in HTML for the different controls.
5. Build and browse Default.aspx.
6. Enter some text in the text box and then click Submit to show that the value is preserved
7. View the source of the page. Notice that the positioning of the controls is done by using DHTML.
8. Close the source view of the page

Task 5: Change the target browser

1. Right-click the form in Design view and then click Properties

2. Change the Target Schema to Internet Explorer 3.02 / Navigator 3.0, and then click OK.
3. Save your changes and view the page in the browser again
4. View the source of the page.
Notice that now the positioning of the controls is done by using HTML tables.
5. Close the source view of the page.
6. Right-click the form in Design view and then click Properties.
7. In the Property Pages dialog box, return the Target Schema to Internet Explorer 5.0.

Task 6: Change the page layout

1. In the Property Pages dialog box, select FlowLayout (instead of GridLayout) in the Page
Layout field, and then click OK. The grid disappears.
2. Add a Button control to the Web form, and view the page in HTML view. The new button does not
have a style attribute.

Task 7: Add a Calendar control

1. In Design view, add a Calendar Web server control onto the Web Form, and then view the page in
HTML view. Locate the HTML for the Calendar control:
<asp:Calendar id="Calendar1" runat="server"></asp:calendar>
2. Save your changes and view the page in the browser, and then view the source of the page.
Notice the entire HTML that is generated by the Calendar control.
3. Close the source view of the page.
4. Edit the page and point out the properties of the Calendar control in the Properties window
5. Right-click the Calendar control on the Web Form in Design view and select Auto Format to
show the different styles in the Calendar Auto Format dialog box. Click Colorful1, and then click
6. Save your changes and view the page in the browser again to see the new appearance of the
Calendar control.