Anda di halaman 1dari 74

LESSON: 1A

INTRODUCING ASP.NET

Objectives

In this lesson, you will learn to:


 Identify the components of dynamic Web applications
 Identify the features of ASP.NET
 Describe the working of an ASP.NET application
 Identify the files used in ASP.NET Web applications
 Identify the events associated with a Web page
 Identify the structure of an ASP.NET page
 Identify the intrinsic objects of ASP.NET
 Implement Cascading Style Sheets on ASP.NET pages

Developing Web Applications Using ASP.NET 1A.1


Introducing ASP.NET

Objectives
In this lesson, you will learn to:

• Identify the components of dynamic Web applications


• Identify the features of ASP.NET
• Describe the working of an ASP.NET application
• Identify the files used in ASP.NET Web applications
• Identify the events associated with a Web page
• Identify the structure of an ASP.NET page
• Identify the intrinsic objects of ASP.NET
• Implement Cascading Style Sheets on ASP.NET pages

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 5 of 40

INSTRUCTOR NOTES

The students are well versed with the .NET Framework and Visual Basic .NET as they
have completed the Developing Enterprise Wide Applications – I module, which is
mapped to Microsoft Exam 70-306. You can start the session by asking them some
questions on .NET Framework that are included in the pre-assessment questions of
this lesson. Students are also expected to know Visual C# syntax before doing this
module.

Lesson Overview
This lesson will help students to become familiar with the ASP.NET concepts. In
addition, students will learn to create an ASP.NET Web application by using the Visual
Studio .NET Integrated Development Environment (IDE). You should highlight the
following concepts during the session:

„Creating an ASP.NET application

1A.2 Developing Web Applications Using ASP.NET


„Understanding various files used in ASP.NET Web applications
„Examining the code-behind feature of ASP.NET
„Outlining the events associated with a Web page
„Discussing the intrinsic objects of ASP.NET

Setup Requirements
Ensure the following before conducting the session:
„Windows 2003 Server, Internet Information Server (IIS) 6.0, and Visual
Studio.Net are installed on the faculty node.
„You have copied the all the folders from
the TIRM CD-ROM under the
\DataFiles for Faculty\Cycle 1\OCR1 folder.

Developing Web Applications Using ASP.NET 1A.3


Introducing ASP.NET

Pre-Assessment Questions
1. In .NET, codes are compiled into ________.

a. ByteCode
b. Microsoft International Language
c. BitCode
d. Microsoft Intermediate Language

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 1 of 40

1A.4 Developing Web Applications Using ASP.NET


Introducing ASP.NET

Pre-Assessment Questions (Contd.)


2. The capability of a derived class to hide the characteristics of the parent class
is called:

a. Overloading
b. Overriding
c. Inheritance
d. Structured programming

3. Which of the following is a property of the StatusBar control?


a. ShowPanels
b. Caption
c. Multiline
d. Autosize

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 2 of 40

Developing Web Applications Using ASP.NET 1A.5


Introducing ASP.NET

Pre-Assessment Questions (Contd.)


4. What is the maximum number of characters that you can enter in a
TextBox control?
a. 1024
b. 2048
c. 65
d. 20

5. Which of the following is a feature provided by the Common Language


Runtime (CLR)?
a. Extensibility
b. Resilience to change
c. Automatic memory management
d. Maintainability

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 3 of 40

1A.6 Developing Web Applications Using ASP.NET


Introducing ASP.NET

Solutions to Pre –Assessment


Questions
1. d. Microsoft Intermediate Language
2. b. Overriding
3. a. ShowPanels
4. b. 2048
5. c . Automatic memory management

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 4 of 40

Developing Web Applications Using ASP.NET 1A.7


INTRODUCING WEB
APPLICATIONS

Introducing ASP.NET

Introducing Web Applications


• Web applications:
• Are programs that can be executed either on a Web server or in a Web
browser.
• Enable you to share and access information over the Internet and
corporate intranets.
• Can support online commercial transactions, popularly known as e-
commerce.

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 6 of 40

INSTRUCTOR NOTES

You should start the session with a discussion on the evolution of computer technology
from the viewpoint of how it has evolved from a stand-alone computing environment
to a fully distributed computing environment of the Internet. While discussing the
evolution, you should talk about what a Web server is and how it serves the requests
sent by the client browser. Here, you should also mention the benefits of both client-
side and server-side scripting.

1A.8 Developing Web Applications Using ASP.NET


Among all technologies, the Internet has been the fastest growing technology. Ever
since its inception, the Internet has evolved exponentially. In the recent years, it has
changed the way business is conducted. Organizations are increasingly becoming
dependent on the Internet for sharing and accessing information. This Internet boom
has changed the focus of application development from stand-alone applications to
distributed Web applications.
Web applications are programs that can be executed either on a Web server for server
side scripting or in a Web browser for client side scripting. They enable you to share
and access information on the Internet and corporate intranets. In addition, Web
applications can support online commercial transactions popularly known as e-
commerce. An online store accessed through a browser is an example of a Web
application.
The content of a Web application that consists of only HTML pages is static. It does not
respond dynamically to the actions performed by users. To respond dynamically to
user requests, you can use client side and server side scripting in addition to HTML
pages.

Components of Dynamic Web Applications

Introducing ASP.NET

Components of Dynamic Web


Applications
• An optimal dynamic Web page combines both client-side scripting and server-
side scripting.
• Client-side scripting:
• Enables to develop Web pages that can dynamically respond to user input
without having to interact with a Web server.
• Helps in reducing network traffic.
• Speeds up the response time of a Web application.
• Server-side scripting provides dynamic content to users based on the
information stored in a remote location.

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 7 of 40

Developing Web Applications Using ASP.NET 1A.9


Introducing ASP.NET

Components of Dynamic Web


Applications (Contd.)
• The general rules for using client side scripting and server-side scripting are:
• Any access to data that resides on the client computer or is dependent on
the client computer should be implemented using client-side scripting.
• Any access to data that resides on a Web server or a remote computer,
such as a back-end database should be implemented using server-side
scripting.

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 8 of 40

A dynamic Web application can have client side scripting, server side scripting, or
both.
Client side scripting enables you to develop Web pages that can dynamically respond
to user input without having to interact with a Web server. For example, if there is a
Web application that requires users to enter the user name and the password before
displaying the home page, you need to ensure that a user does not leave the user
name and password fields blank. To check whether a user has left the user name and
password fields blank, you can write client side scripts that execute on the client
computer. A client side script helps reduce network traffic because it does not need to
interact with a Web server to provide dynamic response to user input. In addition to
providing dynamic content, client side scripting speeds up the response time of a Web
application. This happens because a Web server is not overloaded with the job of
processing the client side script for every client. Scripting languages, such as VBScript
and JavaScript, are used to write client side scripts.
Server side scripting provides dynamic content to users based on the information
stored in a remote location, such as a back-end database. It includes code written in
server side scripting languages, such as Active Server Pages (ASP) and Java Server
Pages (JSP). A server side script is executed on a Web server. When a browser
requests for an HTML page containing a server side script, the Web server to which
the request is sent, first processes the script and then sends the results to the

1A.10 Developing Web Applications Using ASP.NET


browser. For this reason, any data that should come from the Web server needs to be
processed using server side scripting. For example, if a Web page is to display the
current time of the system in which the Web site is hosted, you need to implement
server side scripting. If you use client side scripting, then each of the browsers
requesting for the file containing the script will display the current time of the system
in which the browser is located.
An optimal dynamic Web page combines both client side scripting and server side
scripting. The general rules for using client side scripting and server side scripting are:
„Any access to data that resides on the client computer or is dependent on the
client computer should be implemented using client side scripting. For example,
if you need to know the type of browser being used to access a Web site, you
should use client side scripting to retrieve the information.
„Any access to data that resides on a Web server or a remote computer, such as
a back-end database should be implemented using server side scripting. For
example, if you want to retrieve the product details of an online shopping store
from a back-end database, you should use server side scripting to retrieve the
information.

Developing Web Applications Using ASP.NET 1A.11


UNDERSTANDING ASP.NET

Introducing ASP.NET

Understanding ASP.NET
• ASP.NET is a standard HTML file that contains embedded server-side scripts.
• ASP.NET provides the following advantages of server-side scripting:
• Enables to access information from data sources that are stored on a Web
server or a computer that is accessible to a Web server
• Enables to use a set of programming code called templates to create HTML
documents
• Enables to separate HTML design from the data retrieval mechanism

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 9 of 40

INSTRUCTOR NOTES

While explaining the features of ASP.NET, you should bring out the relevance of .NET
Framework and discuss how ASP.NET fits in the overall picture of .NET Framework.
You should discuss the how to code-behind feature helps to separate presentation
code and program logic code, as it is critical for the students to know.

1A.12 Developing Web Applications Using ASP.NET


To create dynamic Web pages by using server side scripts, Microsoft has introduced
ASP. The .NET version of ASP is ASP.NET. It is a standard HTML file that contains
embedded server side scripts. ASP.NET provides the following advantages of server
side scripting:
„ASP.NET enables you to access information from data sources such as back-end
databases and text files that are stored on a Web server or a computer that is
accessible to a Web server.
„ASP.NET enables you to use a set of programming code called templates to
create HTML documents. The advantage of using templates is that you can
dynamically insert the content retrieved from data sources, such as back-end
databases and text files, into an HTML document before the HTML document is
displayed to users. For this reason, the information need not be changed
manually as and when the contents retrieved from the data source change.
„ASP.NET also enables you to separate HTML design from the data retrieval
mechanism. As a result, changing the HTML design does not affect the programs
that retrieve data from the databases. Similarly, server side scripting ensures
that changing data sources does not require a change in HTML documents.
In addition to these advantages, ASP.NET has a number of advanced features that
help you to develop robust Web applications. The advanced features of ASP.NET are
based on the .NET Framework.

Developing Web Applications Using ASP.NET 1A.13


ASP.NET in .NET Framework

Introducing ASP.NET

ASP.NET in .NET Framework


• ASP.NET is built on Microsoft .NET Framework.

• Microsoft introduced the .NET Framework to help developers create globally


distributed software with Internet functionality and interoperability.

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 10 of 40

1A.14 Developing Web Applications Using ASP.NET


Introducing ASP.NET

ASP.NET in .NET Framework (Contd.)


• The following figure illustrates the elements of an ASP.NET application:

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 11 of 40

ASP.NET, which is the .NET version of ASP, is built on the Microsoft .NET Framework.
Microsoft introduced the .NET Framework to help developers create globally
distributed software with Internet functionality and interoperability.
The following figure displays the elements of an ASP.NET application and how the
elements fit in the broader context of the .NET Framework:

Developing Web Applications Using ASP.NET 1A.15


ASP.NET Application Elements

As displayed in the preceding figure, the elements of an ASP.NET application include


Web forms, configuration files, and XML Web service files. Web Forms enable you to
include user interfaces, such as Text box, List box controls, and the application logic of
Web applications. Configuration files enable you to store the configuration settings of
an ASP.NET application. The elements of an ASP.NET application also include Web
services to provide a mechanism for programs to communicate on the Internet. Web
Forms and the state management feature of ASP.NET constitute the ASP.NET Page
Framework. There are also a number of runtime services available in ASP.NET. The
ASP.NET runtime services include session and application state management, Web
security, and the caching mechanism of ASP.NET applications. The runtime services of
ASP.NET interact with .NET Framework base classes, which in turn, interact with the
Common Language Runtime (CLR) to provide a robust Web-based development
environment.

1A.16 Developing Web Applications Using ASP.NET


Working of an ASP.NET Application

Introducing ASP.NET

Working of an ASP.NET Application


• After you create an ASP.NET application, the ASP.NET files need to be stored
on an IIS server, which is the Web server for the Windows platform.
• The following figure describes how an IIS server processes the request for an
ASP.NET file:

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 12 of 40

Developing Web Applications Using ASP.NET 1A.17


Introducing ASP.NET

Working of an ASP.NET Application


(Contd.)
• The steps to execute an ASP.NET file are as follows:
• A Web browser sends a request for an ASP.NET file to a Web server by
using a URL.
• The Web server receives the request and retrieves the appropriate
ASP.NET file from the disk or memory.
• The Web server forwards the ASP.NET file to the ASP.NET script engine for
processing.
• The ASP.NET script engine reads the file from top to bottom and executes
any server-side script it encounters.
• The processed ASP.NET file is generated as an HTML document and the
ASP.NET script engine sends the HTML page to the Web server.
• The Web server then sends the HTML page to the client.
• The Web browser interprets the output and displays it.
©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 13 of 40

You create an ASP.NET application by using the tools integrated with the Microsoft
.NET Framework. After you create an ASP.NET application, the ASP.NET files need to
be stored on an IIS server, which is the Web server for the Windows platform. An IIS
server processes the ASP.NET files from top to bottom and then executes the scripts.
Finally, the results are sent to the Web browser that requested the ASP.NET file.

1A.18 Developing Web Applications Using ASP.NET


The following diagram depicts how an IIS server processes the request for an ASP.NET
file:

Processing the Request for an ASP.NET File by a Web Server

As depicted in the preceding diagram, to execute an ASP.NET file, the following steps
are taken:
1. A Web browser sends a request for an ASP.NET file to a Web server by using a
Uniform Resource Locator (URL).
2. The Web server, IIS, receives the request and retrieves the appropriate
ASP.NET file from the disk or memory.
3. The Web server forwards the ASP.NET file to the ASP.NET script engine for
processing.
4. The ASP.NET script engine reads the file from top to bottom and executes any
server side script it encounters.
5. The processed ASP.NET file is generated as an HTML document, and the
ASP.NET script engine sends the HTML page to the Web server.
6. The Web server then sends the HTML page to the client.
7. The Web browser interprets the output and displays it.
A Web server generates and sends only the HTML output to the client. As a result, it
helps to hide the code of the ASP.NET file from the users who access an ASP.NET Web
page.

Developing Web Applications Using ASP.NET 1A.19


Features of ASP.NET

Introducing ASP.NET

Features of ASP.NET
• The features of ASP.NET are as follows:
• Compiled Code
• Enriched Tool Support
• Power and Flexibility
• Simplicity
• Manageability
• Scalability
• Security
• Extensibility

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 14 of 40

In addition to hiding script commands, ASP.NET has the following advanced features
that help develop robust Web applications:
„Compiled Code: The code written in ASP.NET is compiled and not interpreted.
This makes ASP.NET applications faster to execute than other server side scripts
that are interpreted, such as the scripts written in a previous version of ASP.
„Enriched Tool Support: The ASP.NET Framework is provided with a rich toolbox
and designer in the Visual Studio .NET IDE. Some of the features of this
powerful tool are the "what you see is what you get" (WYSIWYG) editor,
drag-and-drop server controls, and automatic deployment.
„Power and Flexibility: ASP.NET applications are based on CLR. As a result, the
power and flexibility of the .NET platform is available to ASP.NET application
developers. ASP.NET applications enable you to ensure that the .NET Framework
class library, messaging, and data access solutions are seamlessly accessible on
the Web. ASP.NET is also language-independent. As a result, you can choose
any .NET language to develop your application.
„Simplicity: ASP.NET enables you to build user interfaces that separate
application logic from presentation content. In addition, CLR simplifies
application development by using managed code services, such as automatic

1A.20 Developing Web Applications Using ASP.NET


reference counting and garbage collection. For this reason, ASP.NET makes it
easy to perform common tasks ranging from form submission and client
authentication to Web site configuration and deployment.
„Manageability: ASP.NET enables you to manage Web applications by storing the
configuration information in an Extensible Markup Language (XML) file. You can
open the XML file in the Visual Studio .NET IDE.
„Scalability: ASP.NET has been designed with scalabilityin mind. It has features
that help improve performance in a multiprocessor environment.
„Security: ASP.NET provides a number of options for implementing security and
restricting user access to a Web application. All these options are configured
within the configuration file.
„Extensibility: ASP.NET provides a number of options to create an extensible Web
application. For example, you can create custom controls; extend the default
Hypertext Markup Language (HTTP) pipeline. Note that the path through which
the data flows from the client to the server is called the HTTP pipeline.

Programming Models in ASP.NET

Introducing ASP.NET

Programming Models in ASP.NET


• The two types of programming models in ASP.NET are as follows:

• Web Forms
• Web Services

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 15 of 40

Developing Web Applications Using ASP.NET 1A.21


Introducing ASP.NET

Programming Models in ASP.NET


(Contd.)
• Web forms:
• Enable you to create the user interface for a Web application.
• Can be designed and programmed using Rapid Application Development
(RAD) tools.
• Support a rich set of controls, including user-defined and third party
controls that make the application user-friendly.
• Web Forms consist of a user interface and application logic that is applied
to the components of user interfaces.

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 16 of 40

1A.22 Developing Web Applications Using ASP.NET


Introducing ASP.NET

Programming Models in ASP.NET


(Contd.)
• Web Service:
• Is defined as a program unit that can be accessed by other applications
through the Internet.
• Can be called by any application over Hypertext Transfer Protocol (HTTP).
• Make use of Extensible Markup Language to transfer data through HTTP.
• Combine the features of component-based development and the Web
based applications.

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 17 of 40

INSTRUCTOR NOTES

You should not discuss the programming models in detail in this section, as students
already have the knowledge of forms and web services. Moreover, these models will
be covered in detail in later sessions.

ASP.NET provides two types of programming models:


„Web Forms: Enable you to create the user interface for a Web application. You
use server controls to design the user interface of a Web application and then
write code that will be executed at the server side, to handle the events
triggered by these controls.
„Web Services: Enable you to remotely access certain functions at the server
side. These services enable the exchange of data in a client-to-server or a
server-to-server environment over the Web by using the Simple Object Access
Protocol (SOAP).

Developing Web Applications Using ASP.NET 1A.23


Web Forms
You can create dynamic Web forms by using technologies such as JSP and ASP.NET.
Notice that the creation of Web forms by using ASP.NET has the following advantages
over other technologies:
„Web forms can be designed and programmed using Rapid Application
Development (RAD) tools.
„Web forms support a rich set of controls, including user-defined and third party
controls that make the application user-friendly.
„Web Forms can be programmed using any of the .NET Framework languages,
such as C# or Visual Basic .NET.
In ASP.NET, Web forms consist of a user interface and application logic that is applied
to the components of user interfaces.
A user interface consists of static HTML or XML elements and ASP.NET server controls.
When you create a Web application, the HTML or XML elements and server controls
are saved in a file with .aspx extension. This file is called a page file.
Application logic consists of code that is applied to the user interface elements of a
Web Form page. You can use any of the .NET programming languages, such as Visual
Basic .NET or C#, to write the logic for a Web page.

Web Services
Web Services allow you to share business logic with various applications using the
Internet. For instance, a Web Service can be built to provide information about the
climatic conditions of various places in a country. A travel agency building a
commercial Web site can use this Web Service to present climatic information to their
customers.
A Web Service is defined as a program unit that can be accessed by other applications
through the Internet. It can be called by any application over Hypertext Transfer
Protocol (HTTP). Web Services make use of Extensible Markup Language (XML) to
transfer data through HTTP. They combine the features of component-based
development and the Web based applications.

1A.24 Developing Web Applications Using ASP.NET


CREATING AN ASP.NET
APPLICATION USING THE VISUAL
STUDIO .NET IDE

Introducing ASP.NET

Creating an ASP.NET Application


Using Visual Studio .NET IDE
• To create an ASP.NET application, the following steps are performed:
• Select the StartÆProgramsÆMicrosoft Visual Studio .NETÆ Microsoft
Visual Studio .NET command to open the Start Page of the Visual
Studio .NET IDE.
• Select the FileÆNewÆProject command to open the New Project dialog
box.
• Select Visual C# Projects as the Project Types in the left pane and then
select ASP.NET Web Application in the Templates pane. Click the OK
button.

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 18 of 40

Developing Web Applications Using ASP.NET 1A.25


Introducing ASP.NET

Creating an ASP.NET Application


Using Visual Studio .NET IDE (Contd.)
• WebForm1.aspx is displayed in the Design mode. You can add controls
to WebForm1.aspx from the Toolbox by using the drag-drop method.
• Open the Code Editor window by double-clicking Web Form1.aspx in the
Design mode and add the required lines of code for the event handlers.
• Execute the application by selecting Start from the Debug menu.

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 19 of 40

INSTRUCTOR NOTES

This section discusses the general steps to create an ASP.NET application. The
demonstration comes later. While taking this session, you can talk about various
concepts of ASP.NET by taking a small example and showing the students how an
ASP.NET application is created. Students are already familiar with the Visual Studio
.NET IDE as they have developed applications using Visual Basic .NET in Developing
Enterprise Wide Applications –I module.
While creating an ASP.NET application, you can also show them the different files,
which are generated.
The Design and HTML view can also be shown to the class by clicking on the
respective tabs of the IDE, which will help them to understand the concepts better.

The Visual Studio .NET IDE provides a robust and easy environment to create an
ASP.NET application. Designing an ASP.NET page is as easy as dragging and dropping
various controls from the toolbox on to the page. In addition, the VS.NET IDE
automatically generates the basic code of an ASP.NET application. It is pertinent to

1A.26 Developing Web Applications Using ASP.NET


note that an ASP.NET application created by using the Visual Studio .NET IDE is
automatically saved in the wwwroot directory of a Web server. Perform the following
steps to create an ASP.NET web application.
1. Select StartÆProgramsÆMicrosoft Visual Studio .NET Æ Microsoft
Visual Studio .NET to open the Start Page of the Visual Studio .NET IDE.
2. Select the FileÆNewÆProject command to open the New Project dialog
box.
3. Select Visual C# Projects as the Project Types in the left pane and select
ASP.NET Web Application in the Templates pane. Click the OK button.
4. WebForm1.aspx is displayed in the Design mode. You can add controls to
WebForm1.aspx from the Toolbox by using drag-drop method.
5. Open the code editor window by double-clicking on the WebForm1.aspx in
the Design mode and add the required lines of code for the event handlers.
6. Execute the application by selecting Start from the Debug menu.
If you need to execute an ASP.NET application on a computer other
than the one on which the application is created, you must specify
http://localhost as the storage location at the time of creating the
application. To browse an ASP.NET Web application on a computer
other than the one on which the application is created, you need to
create a virtual directory for the Web application.
When you create a Web application project, the Application wizard creates a set of
files that are needed to execute the application.
You can view the list of automatically created files in the Solution Explorer window,
as displayed in the following figure:

Solution Explorer Window

Developing Web Applications Using ASP.NET 1A.27


Files Used in an ASP.NET Application

Introducing ASP.NET

Files Used in an ASP.NET Application


• When you create an ASP.NET application, the following files get created:
• AssemblyInfo.cs
• Global.asax
• Web.config
• WebApplication.vsdisco
• WebForm1.aspx

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 20 of 40

The description of each of the files listed in Solution Explorer is as follows:


„AssemblyInfo.cs: Contains a set of attributes that contain general information
about the assembly such as the name, description, and version of the assembly.
„Global.asax: Contains the scripts that define the start and end events of the
application and its sessions. Each Web application will have one Global.asax file
attached to it. This file is global to an application.
„Web.config: Represents the configuration file for your Web application. It is an
XML file that contains configuration data on each unique URL resource used in
the project.
„WebApplication1.vsdisco: Signifies an XML file containing the URLs that link
to resources with information related to the dynamic discovery of Web services.
The name of the file is same as the name of the Web application.
„WebForm1.aspx: Represents the default Web Form created by the IDE when
you start a new application. It is a page file that consists of the user interface
for the visual representation of the Web form page.

1A.28 Developing Web Applications Using ASP.NET


Views of an ASP.NET Application in the Visual
Studio .NET IDE

Introducing ASP.NET

Views of an ASP.NET Application in


the Visual Studio .NET IDE
• Visual Studio .NET IDE provides the following two views of a Web Form:
• Design view
• HTML view

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 21 of 40

The Visual Studio .NET IDE provides two different views of a Web form:
„Design view
„HTML view

Design View
The Design view represents the user interface of the Web forms page. You can
directly place controls from the toolbox to the Web forms page in the Design view. By
default, the page layout of the Web forms page is GridLayout. You can change the
page layout to FlowLayout in the DOCUMENT Properties dialog box. To open the
DOCUMENT Properties dialog box, right-click the page in the Design view and
select Properties from the shortcut menu.
The following figure displays the Design view of an ASP.NET page, which contains a
text box, label, and command button:

Developing Web Applications Using ASP.NET 1A.29


Design View of an ASP.NET Page

Flowlayout: In the FlowLayout mode, controls are placed in rows


in the order in which they are added.
Gridlayout: In the GridLayout mode, control positions are
specified by using style. The style attribute of the control will
contain the XY coordinates of the control.

HTML View
The HTML view represents HTML code of an ASP.NET Web form. To open the HTML
view, click the HTML tab in the designer. If the Web application project is a Visual
Basic project, the scripting language used on the HTML page is Visual Basic. If the
Web application project is a C# project, the scripting language used on the HTML page
is C#.
The following figure displays the HTML view of the page that was displayed in the
Design view in the preceding figure:

1A.30 Developing Web Applications Using ASP.NET


HTML View of an ASP.NET Page

Developing Web Applications Using ASP.NET 1A.31


Code-behind Feature of ASP.NET

Introducing ASP.NET

Code-Behind Feature of ASP.NET


• The code-behind feature enables to divide an ASP.NET page into two files.
• .aspx file containing the presentation content.
• .cs file containing all the application logic, which is called the code-
behind file.

• The advantages of code-behind feature are as follows:


• Makes the code easy to understand and debug, by separating
application logic from HTML tags.
• Allows the separation of effort between graphic designers who design
pages and software engineers who write code.
• Eliminates the issues of browser incompatibility by allowing code files
to exist on the Web server and supporting Web pages to be compiled
on demand.

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 22 of 40

1A.32 Developing Web Applications Using ASP.NET


Introducing ASP.NET

Code-Behind Feature of ASP.NET


(Contd.)
• In the presentation (.aspx) file and the code-behind (.cs) file, ASP.NET
automatically generates some lines of code.
• In the HTML mode, the first line of an .aspx file contains the following line of
code:
<%@ Page language="c#“
Codebehind="WebForm1.aspx.cs"AutoEventWireup="false“
Inherits="WebApplication1.WebForm1"%>
• The @ Page directive is used to specify the page attributes based on which a
page will be created. The different page attributes are:
• Language
• AutoEventWireup
• Codebehind
• Inherits

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 23 of 40

Developing Web Applications Using ASP.NET 1A.33


Introducing ASP.NET

Code-Behind Feature of ASP.NET


(Contd.)
• The code-behind file starts with a list of namespaces.

Namespace Description
System Contains classes for implementing base data
types. In addition, it contains classes for working
with date and time.
System.Collections Contains classes for working with standard
collection types, such as hash tables and array
lists.
System.ComponentModel Contains classes for implementing both design-
time and run-time behaviors of components and
controls.
System.Data Contains classes for implementing the ADO.NET
architecture.
©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 24 of 40

1A.34 Developing Web Applications Using ASP.NET


Introducing ASP.NET

Code-Behind Feature of ASP.NET


(Contd.)
Namespace Descriptions
System.Drawing Contains classes for providing access to GDI
+ basic graphics functionality and
manipulating the contents of strings.
System.Web Contains classes and interfaces that enable
browser/server communication.
System.Web.SessionState Contains classes for implementing session
states.
System.Web.UI Contains the base classes used in building
the user interfaces of the ASP.NET page.
System.Web.UI.WebControls Contains classes for providing Web controls.
System.Web.UI.HtmlControls Contains classes for providing HTML controls.

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 25 of 40

The code-behind feature of ASP.NET enables you to divide an ASP.NET page into two
files. One file contains the presentation content and the other file, which is called the
code-behind file, contains all the application logic. The presentation content consists of
user interface elements, and the code consists of the event-handling procedures to
handle the events that are fired by these controls. The presentation content is stored
in a file with .aspx extension and the code is stored in a separate file with the .cs
extension.
The code-behind feature of ASP.NET offers a number of advantages:
„Makes the code easy to understand and debug by separating the application
logic from HTML tags.
„Allow the separation of effort between the graphic designers who design pages
and the software engineers who write code.
„Eliminate the issues of browser incompatibility
by allowing code files to exist on
the Web server and supporting the Web pages to be compiled on demand.
The code-behind feature of ASP.NET implements multiple inheritance to create a Web
page. When you create a Web application in ASP.NET, Visual Studio .NET creates a
separate .aspx file and a class file by default. The class file that Visual Studio .NET
automatically creates is the code-behind file. In a code-behind file, you will find the
following entry by default:
public class WebForm1: System.Web.UI.Page

Developing Web Applications Using ASP.NET 1A.35


The preceding statement indicates that the WebForm1 class defined in the code-behind
file inherits from the Page class. For this reason, when you create a code-behind file,
you create an instance of an ASP.NET page. The .aspx file that stores the details of
presentation contents in turn inherits from the WebForm1 class. The first line in the
.aspx file contains the following line of code:
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs"
AutoEventWireup="false" Inherits="WebApplication1.WebForm1"%>
As a result, the code-behind file inherits from the Page class and the .aspx file
containing the details of presentation contents inherit from the code-behind file. This
hierarchy of inheritance ensures that the properties, methods, and events of the Page
class are available to the code-behind file and the properties, methods, and events of
the code-behind file are available to the .aspx file.

Understanding the Automatically Generated Code

INSTRUCTOR NOTES

The purpose of this topic is to make student understand the meaning of the auto-
generated code. Explain in brief the function of each section of auto-generated code.

In the presentation file, .aspx, and the code-behind file,.cs, ASP.NET automatically
generates some lines of code. You can view the presentation file in the HTML mode
and the code-behind file by using Code Editor.
In the HTML mode, the first line of an .aspx file contains the following line of code:
<%@ Page language="c#"
Codebehind="WebForm1.aspx.cs"AutoEventWireup="false"
Inherits="WebApplication1.WebForm1"%>
The @ Page directive is used to specify the page attributes based on which a page will
be created. The different page attributes used in @ page directive are:
„Language: Specifies the .NET Framework supported language.
„AutoEventWireup: Indicates whether the page framework calls page events and
methods automatically for an ASP.NET page. Page events are the events, which
are associated to an ASP.NET page lifecycle. In the Visual Studio .NET
environment, the default value of the AutoEventWireup attribute is set to false.
A false value indicates that you must explicitly write code to bind events related
to a page, such as the Load event of a page to the Page_Load()method.
„Codebehind: Specify the code-behind file for a page.

1A.36 Developing Web Applications Using ASP.NET


„Inherits: Specifies the class in the code-behind file that a page inherits. This
class can be any class derived from the Page class.
The <Meta> elements in the <Head> element define document information, such as the
code language and the default client script.
The <Body> </Body> block contains the HTML specifications for the Web Form. It is
important to note that when you add any control to the Web Form in the design mode,
the HTML code corresponding to it is automatically added within the <Body> </Body>
block. You can also add a control to the Web Form by writing the HTML code for it
within the <Body> </Body> block. Any HTML text or code in the <% %> block within
the <Body> </Body> block is rendered in the page when it is displayed in a Web
browser.
You can also write application logic within the <Head> element. The practice of writing
application logic in the presentation file is known as code inline and it is used for
backward compatibility in ASP.NET. To write application logic in an .aspx file, you need
to use the <Script> tag.
For example, consider the following code snippet that uses the <Script> tag:
<Script runat="server" language="c#">
//code here
</Script>
The code-behind file also contains automatically generated code as follows:
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace WebApplication1
{
/// <summary>
/// Summary description for WebForm1.
/// </summary>
public class WebForm1 : System.Web.UI.Page
{
private void Page_Load(object sender, System.EventArgs e)
{
// Put user code to initialize the page here
}
}
}
The code-behind file starts with a list of namespaces. The following table describes the
contents of few namespaces:

Developing Web Applications Using ASP.NET 1A.37


Namespace Descriptions
System
Contains classes for implementing base data
types. In addition, it contains classes for
working with date and time.
System.Collections
Contains classes for working with standard
collection types, such as hash tables and
array lists.
System.ComponentModel
Contains classes for implementing both the
design-time and run-time behaviors of
components and controls.
System.Data
Contains classes for implementing the
ADO.NET architecture.
System.Drawing
Contains classes for providing access to the
GDI + basic graphics functions and
manipulating the contents of strings.
System.Web
Contains classes and interfaces that enable
browser/server communication.
System.Web.SessionState
Contains classes for implementing session
states.
System.Web.UI
Contains the base classes used in building
the user interfaces of the ASP.NET page.
System.Web.UI.WebControls
Contains classes for providing Web controls.
System.Web.UI.HtmlControls
Contains classes for providing HTML
controls.

After the list of namespaces, the code-behind file contains the project namespace
block. The project namespace is defined using the following declaration:
namespace WebApplication1
{
// code here
}
The project namespace block contains the WebForm1 class. Notice that the project
namespace is defined so that other Web applications can access the functions of the
WebForm1 class declared in this project. Within the project namespace, the WebForm1
class is defined using the following declaration:
public class WebForm1 : System.Web.UI.Page

1A.38 Developing Web Applications Using ASP.NET


{
private void Page_Load(object sender, System.EventArgs e)
{
// Put user code to initialize the page here
}
}
The preceding code snippet indicates that WebForm1 is a class inherited from the Page
class. The WebForm1 class contains the various event handlers for the page and server
controls. You can use these event handlers to ensure that an ASP.NET page
appropriately responds to the various events triggered during a Web page request
from the client and a Web page submission to the Web server.

Page Events

Introducing ASP.NET

Page Events
• ASP.NET uses an event-driven model of programming. The following table
lists some of these events:

Event Generated when


Init Is the first event that occurs when the server executes an
ASP.NET page. The initialization is performed during this
event. Init event occurs only once in the entire life cycle of
an ASP.NET page
Load Is fired after the init event, when the page is requested
for the first time and whenever the page is reloaded. This
event can be used to initialize the variables and the state
of the controls that are used in the page.
Unload Is the last event that occurs in the life cycle of an ASP.NET
page. This event is used to perform final cleanup work,
such as the closing of open database connections,
discarding objects, or closing the files.

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 26 of 40

Developing Web Applications Using ASP.NET 1A.39


INSTRUCTOR NOTES

You should discuss the various events that are associated with an ASP.NET page and
clearly explain the concept of postback to the students.

ASP.NET uses an event-driven model of programming. This model of ASP.NET defines


a sequence of events that are fired during the lifecycle of a Web page.
The following table lists some of these events:

Event Generated when


Init
Represents the first event that occurs
when the server executes an ASP.NET
page. The initialization is performed
during this event. The Init event
occurs only one time in the entire
lifecycle of an ASP.NET page
Load
Is fired after the init event, when the
page is requested for the first time
and whenever the page is reloaded.
This event can be used to initialize
the variables and the state of the
controls that are used in the page.
Unload
Represents the last event that occurs
in the lifecycle of an ASP.NET page.
This event is used to perform final
cleanup work, such as the closing of
open database connections,
discarding objects, or closing files.

With each event that is raised, you may have some tasks to accomplish. You can
accomplish these tasks by writing code in special procedures called event-handling
procedures or simply event handlers. For example, you can write the page
initialization code in the Init or Load event of the Web page. The Page_Init event
handler is the event handler for the Init event of the page, and Page_Load is the
event handler for the Load event of the page. There is a difference between the Init
event and the Load event. When the Init event is fired, the controls are loaded with

1A.40 Developing Web Applications Using ASP.NET


their default values. On the other hand, when the Load event is fired, all controls are
loaded in the memory with values that are set during the round trip. A round trip is a
sequence of events that a Web page follows to complete the journey from a Web
browser to a Web server.
When a user closes the page or exits from the browser, the page is unloaded from the
memory and the Unload event is fired.
Before the Unload event of a Web page is fired, the Web page usually undertakes a
number of trips form the client to the server and then back to the client. The trip of a
Web page from the client to the server and then back to the client involves the use of
a number of ASP.NET built-in-objects.

Intrinsic Objects of ASP.NET

Introducing ASP.NET

Intrinsic Objects of ASP.NET


• ASP.NET has a number of built-in objects that run on a Web server
• The following table lists the ASP.NET built-in objects and their description:

Object Description
Application Provides methods and properties to access information
related to the entire Web application. Information is
stored in either variables or objects.
Request Provides methods, properties, and collections to access
the information about the client requesting the page.
Response Provides methods, properties, and collections to access
information related to the response generated by the
server.
Server Provides methods and properties to access information
related to the server.
Session Provides methods, properties, and collections to access
information related to the user’s session.

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 27 of 40

Developing Web Applications Using ASP.NET 1A.41


INSTRUCTOR NOTES

While covering this topic, the focus should be more on the purpose of the various
intrinsic objects rather than getting into details about the implementation of these
objects.

ASP.NET has a number of built-in objects that run on a Web server and are
programmed using methods, properties, and collections. These objects are made
available to the Page object, which is an instance of the System.Web.UI.Page class
from which all ASP.NET pages are inherited.
The following table describes the ASP.NET built-in objects:

Object Description
Application
Provides methods and properties to access information
related to the entire Web application. Information is
stored in either variables or objects.
Request
Provides methods, properties, and collections to access
the information about the client requesting the page.
Response
Provides methods, properties, and collections to access
information related to the response generated by the
server.
Server
Provides methods and properties to access information
related to the server.
Session
Provides methods, properties, and collections to access
information related to the user’s session.

The Application Object


The Application object provides a reference to an object of the
HttpApplicationState class. The Application object is used to access information
that is defined for the entire Web application. For example, the connection string used
to connect to the database sever can be stored in the Application object. The
following table describes some of the methods of the Application object:

1A.42 Developing Web Applications Using ASP.NET


Method Description
public void Lock()
Blocks the access to an Application variable or
object. The Lock() method enables access
synchronization when more than one process is
accessing a particular variable or object.
public void UnLock()
Releases the lock procured on an application
variable or object by calling the Lock() function.

The following table describes some of the properties of the Application object:

Properties Description
Count
Returns the number of objects in the
HttpApplicationState collection.
Item
Provides access to an object in the
HttpApplicationState collection.

You can use the following code snippet to create an Application object having the
name, MyName, which stores the value, John:
Application["MyName"]= "John";
You can use the following code snippet to lock the application object, retrieve the
value from the MyName Application object created in the preceding code, and finally
release the lock:
Application.Lock();
string Local_name= Application["MyName"];
Application.UnLock();

The Request Object


The Request object provides a reference to an object of the HttpRequest class. The
object enables ASP.NET applications to access information sent by the client during a
Web request. The following table describes some of the properties of the Request
object:

Properties Description

ApplicationPath Returns the application root path


of ASP.NET on the server. This is
a read-only property.

Developing Web Applications Using ASP.NET 1A.43


Properties Description

Url Returns a URI object, which will


contain the complete address of
the requested page. This is a
read-only property.

UserHostAddress Returns the IP host address of the


requesting client.

UserLanguage Returns a sorted string array


containing the language
preferences of the client.

Browser Returns the


HttpBrowserCapabilities
object, which contains information
about the browser capability of
the client.

Cookies Returns the


HttpCookieCollection object,
which provides access to the
cookie variables of the client.

QueryString Provides access to the parameters


passed from the client to the
server along with a GET request.

You can use the following code snippet to display the client information such as the IP
address, browser name, and browser version on the page:
void Page_Load()
{
//Using the Browser property of the Request object to obtain an
instance //of HttpBrowserCapabilities which contain the details
about the client //browser
HttpBrowserCapabilities bc = Request.Browser;

///Using the UserHostAddress property of the Request object to


obtain // //the IP Address of requesting client
lbl1.Text = "IP Address = " + Request.UserHostAddress;
//Using instance of HttpBrowserCapabilities for displaying the
client browser details.
lbl2.Text = "Browser Name = " + bc.Browser;
lbl3.Text = " Browser Version = " + bc.Version;

1A.44 Developing Web Applications Using ASP.NET


The Response Object
The Response object provides a reference to an object of the HttpResponse class. The
object enables ASP.NET applications to send information to the client.
The following table describes some of the properties of the Response object:

Properties Description

Buffer Used to set the buffer feature of the


Response object. When the buffer
property is set to true, the response
object will buffer the response
together. When it is set to false, the
Response object will send the
response as it receives. The default
value is true.

Cache Provides access to the caching policy,


such as the expiration time and
privacy settings of the Web page. This
is a read-only property.

ContentType Enables to set or get the type of data


that is send to the client through the
Response object.

Cookies Enables to set a cookie to the client


browser.

IsClientConnected Returns a Boolean value indicating


whether the client is connected or
disconnected.

The following table describes some of the methods of the Response object:

Method Description

public void Clear() Used to clear the content in the buffer


of the Response object.

public void Close() Used to close the connection to the


client.

Developing Web Applications Using ASP.NET 1A.45


Method Description

public void End() Used to send the buffered data to the


client and close the connection to the
client. The End() method will raise an
Application_EndRequest event.

public void Flush() Used to send the data in the buffer to


the client but does not close the
connection to the client.

public void Redirect(string) Used to redirect the new URL specified


in the string form to the client.

public void Write(string) Used to send a string to the buffer of


the Response object. The Write()
method is an overloaded method.

The Server Object


The Server object provides a reference to an object of the HttpServerUtility class.
The object provides methods that can be used to access the methods and properties
of the Web server. The following table describes some of the properties of the Server
object:

Property Description

MachineName Returns the name of the server


machine.

ScriptTimeout Used to get and set the request time-


out in seconds for the Web server.

The following table describes some of the methods of the Server object:

Method Description

public void ClearError() Used to clear the last error that has
occurred on the server.

public object Used to create the server instance of a


CreateObject(string) COM object.

1A.46 Developing Web Applications Using ASP.NET


Method Description

public Exception GetLastError() Used to return an Exception object,


which represents the last error that
has occurred on the server.

public string MapPath(string Used to return the physical file path on


path) the Web server that corresponds to
the specified virtual path.

public void Transfer(string) Used to terminate the processing of


the current page and load the page
specified in the string format.

The Session Object


The Session object provides a reference to an object of the HttpSessionState class.
The object enables ASP.NET applications to keep the status of the client. The Session
object also provides access to the session wide cache, which can be used to store
information pertaining to the client. The session starts and ends when the client
connects and disconnects to a Web site. The session is also terminated if the client
remains inactive for a specific period. The default timeout period is 20 minutes. The
following table describes some of the properties of the Session object:

Property Description

Count Returns the number of items in the


session-state collection.

SessionID Returns the unique session id assigned


for a session.

Timeout Enables to get and set the period in


minutes allowed between requests by
the client before the session-state
provider terminates the session.

The following table describes some of the methods of the Session object:

Method Description

public void Add(string name, Used to add a new item to the


object value) session-state collection.

public void Clear() Used to clear all the values stored in


th i t t ll ti

Developing Web Applications Using ASP.NET 1A.47


Method Description
the session-state collection.

public void Remove( string name) Used to delete an item from the
session-state collection.

Structure of an ASP.NET Page

Introducing ASP.NET

Structure of an ASP.NET Page


• The structure of an ASP.NET page includes:

• Directives
• Code declaration blocks
• Code render blocks
• Server-side comments
• Server-side Include directives

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 28 of 40

INSTRUCTOR NOTES

HTML codes are discussed in the following topics to give students a better
understanding of the structure of an ASP.NET Page. Focus should be more on the
function of each section an note on the different element in each section. Moreover,
the past trend of Microsoft Exam 70-315 shows that few questions are asked on HTML
codes.

1A.48 Developing Web Applications Using ASP.NET


The structure of an ASP.NET page includes:
„Directives
„Code declaration blocks
„Code render blocks
„Server side comments
„Server side Include directives

Directives
A directive specifies how an ASP.NET page is compiled. The beginning of a directive is
marked with the characters, <%@, and the end of the directive is marked with the
characters, %>. The most frequently used directives are Page directives and Import
directives.
Page directives are used to specify the default programming language of a page. For
example, if you want to change the programming language of an ASP.NET page from
Visual Basic to C#, you will use the language attribute of the page directive, as shown
here:
<%@ Page Language="C#" %>
The Import directive is used to import additional namespace to a Web Application. For
example, if you want to send an e-mail from an ASP.NET page, you need to use the
Send method of the SmtpMail class. The SmtpMail class is included in the
System.Web.Mail namespace, which is not imported to a Web application by default.
To explicitly import this namespace, you need to use the import directive, as shown
here:
<%@ Import Namespace="System.Web.Mail" %>

Code Declaration Blocks


You can add application logic in either a code-behind file or the .aspx file of a Web
application. If you want to add the application logic in the .aspx file, you need to write
the application logic in a code declaration block. The application logic of an ASP.NET
page and the global variable declarations, subroutines, and functions, are contained in
a code declaration block. The <Script Runat=”Server”> tag accepts two attributes.
The first attribute, Language, enables you to specify the language that is to be used
within the <Script> tag. The second attribute, SRC, is an optional attribute, which
enables you to specify an external file that contains the code block. You specify these
attributes in the HTML mode of the .aspx file, as shown here:
<Script language="C#" runat="server">
// The beginning of code
//declaration block
void AddEmp() // A user-defined method called AddEmp
{

Developing Web Applications Using ASP.NET 1A.49


Label1.Text = "Hello! Welcome to ASP.NET";
}
</script> // The end of code declaration block.

Code Render Blocks


If you want to execute code within the HTML content of an ASP.NET page, you need to
use code render blocks. There are two types of code render blocks, Inline code and
Inline expressions. Inline code can execute a statement or a series of statements. The
code begins with the characters, <%, and ends with the characters, %>. Inline
expressions display the value of a variable or a method.
Inline expressions begin with the characters, <%=, and end with the characters, %>, as
shown here:
<form runat="server">
<% str="Hello World"; %> // Assigning "Hello World" string to str
The value of str is:
<%=str%> // Displaying "Hello World"
</form>
The preceding code, <%=str%> the value of str, "Hello World" is displayed on the
Web page.

Server Side Comments


You can include comments in an ASP.NET page by using server side comments. Server
side comments begin with <%-- and end with --%>. They are included in an ASP.NET
page for the purpose of documentation, as shown here:
<%-- This is an example of server-side comments! --%>
Server side comments are also useful when debugging an ASP.NET application.

Server Side Include Directive


If you want to include an external file in an ASP.NET application, you need to use
server side Include directives. If the file is located in the same directory or in a
subdirectory of the directory in which the ASP.NET application is stored, you need to
use the Include directive, as shown here:
<!-- #Include file="<name of the file>" -->
You can also include the file by supplying the full virtual path. For example, if you
have a subdirectory named My_directory under the wwwroot directory, you can
include the file by using the Include directive, as shown here:
<!-- #Include virtual="/My_directory/<name of the file>" -->
The following code is an example of an ASP.NET page that uses all the preceding
elements:

1A.50 Developing Web Applications Using ASP.NET


<%@ Page language="C#" Codebehind="WebForm1.aspx.cs"
AutoEventWireup="false" Inherits="sss.WebForm1" %>
<%@ Import Namespace="System.Net" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
<%@ Page language="C#" Codebehind="WebForm1.aspx.cs"
AutoEventWireup="false" Inherits="sss.WebForm1" %>
<%@ Import Namespace="System.Net" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<script language="C#" runat="server">
<!-- This is Code Declaration block -->
private void Button1_Click(object sender, System.EventArgs e)
{
Label1.Text="Hello There! Welcome to ASP.NET";
}
</script>
</HEAD>
<BODY>
&nbsp;
<form id="Form1" method="post" runat="server">
<%-- This is an example of server-side comment --%>
<asp:Label id="Label1" style="Z-INDEX: 101;LEFT: 16px;
POSITION: absolute; TOP: 39px" runat="server"
Width="298px">Label</asp:Label>
<asp:Button id="Button1" OnClick="Button1_Click"
style="Z-INDEX: 102; LEFT: 283px; POSITION: absolute;
TOP: 195px" runat="server" Text="Button">
</asp:Button>
</form>
<p><% for (int i=3; i<6; i++) { %>
<font size="<%=i %>">Hello World! </font>
<% } %>
</p>
<p><!-- #Include virtual="\mydir\BookData.xml" --></p>
<p><!-- #Include file="BookData.xml" --></p>
</BODY>
</HTML>

It is important to remember that the server side Include


directive does not allow you to use variables to specify the path
of a file that you want to include in an ASP.NET application.

Developing Web Applications Using ASP.NET 1A.51


CASCADING STYLE SHEETS

Introducing ASP.NET

Cascading Style Sheets


• Styles define the appearance of an HTML element.

• A style sheet is a document, which defines a group of styles. Each style in


the group has its own properties.

• Styles can be applied to any element in the web page.

• The style definition consists of a property name followed by a property


value. The property name and value are separated by a colon.

• Multiple properties may be specified by property name-value pairs,


separated by semicolons.

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 29 of 40

INSTRUCTOR NOTES

Explain the use of style sheets for implementing consistent layout in Web application.
Also explain in which scenario each type of style sheet is used.

Styles define the appearance of an HTML element. For example, you can define a color
or a font to be used for an element, such as a paragraph <P>. You can also make that
element bold or italicized.

1A.52 Developing Web Applications Using ASP.NET


A style sheet is a document that defines a group of styles. Each style in the group has
its own properties. These styles can be applied to any element on the Web page. For
example, you can define a style to be used for the heading element, having properties
such as a blue colored background, red colored text, and an Arial typeface.
Before the existence of style sheets, changing the appearance of an element that
appeared on a page a number of times required applying the style properties to the
element on each occurrence of the element on the page. For example, to create a
page where each instance of the heading element text is red with an Arial typeface,
you would have to apply the following style for each appearance of the <H1> tag on
the Web page:
<H1>
<font face="Arial" color="red"> Hello world </font>
</H1>
A style sheet allows you to specify this style for all the <H1> tags in one step by
defining what is called a selector, as shown here:
h1 { font-family: Arial; color:red }

selector property name property value


Here, h1 is a selector followed by the style definition. This style definition applies to all
the <H1> tags in the page.
The style definition consists of a property name followed by a property value. The
property name and value are separated by a colon.
Multiple properties may be specified by property name-value pairs separated by
semicolons. You can apply styles to the various controls of a Web form using CSS.

Developing Web Applications Using ASP.NET 1A.53


Different Ways to Use Style Sheets

Introducing ASP.NET

Different Ways to Use Style Sheets


• The three different ways to add style sheet properties to a document are as
follows:

• Using an external (linked ) style sheet


• Using an embedded style sheet
• Using an inline style sheet

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 30 of 40

1A.54 Developing Web Applications Using ASP.NET


Introducing ASP.NET

Different Ways to Use Style Sheets


(Contd.)
• External (Linked) Style Sheets

• The style definitions in an external style sheet are stored in a separate


file with the extension .CSS.
• Only the <STYLE>…</STYLE> tags should present in .CSS file and
the style definitions are defined inside these tags.
• Consider the sample code that describes the .CSS file:
<STYLE>
H1 { font-style:italic;background:yellow;color:red
}
P { background:purple}
</STYLE>

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 31 of 40

Developing Web Applications Using ASP.NET 1A.55


Introducing ASP.NET

Different Ways to Use Style Sheets


(Contd.)
• Embedded Style Sheets
• Style definitions are included in the HTML page itself.
• The following example code shows an embedded style sheet:
<HEAD><TITLE>
An Embedded Style
</TITLE>
<STYLE TYPE="text/css">
H1 { font-style:italic;background:yellow;color:red }
</STYLE></HEAD>
• A HTML page can contains both external and embedded style sheet
associated with it.
• The style definition for a particular element in the embedded style
sheet will override the style definition in the external style sheet for the
same element.

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 32 of 40

1A.56 Developing Web Applications Using ASP.NET


Introducing ASP.NET

Different Ways to Use Style Sheets


(Contd.)
• Inline Style Sheets
• Inline styles are style definitions applied to the style property of an
element.
• The following example code shows an embedded style sheet:
<HTML> <BODY>
<P style="font-family:arial;font-style:italic">
This came from a P tag with a style.<BR>
font-family:arial and font-style:italic
</P> <P>
This came from a P tag without a style.
</P> </BODY></HTML>
• The inline or embedded styles will override the properties, which are
specified in the external style sheet.

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 33 of 40

You can define styles either within an HTML document or in an external file. This
external file can be attached to any HTML document. There are three ways to add
style sheet properties to a Web form. They are:
„Using an external (linked) style sheet
„Using an embedded style sheet
„Using an inline style sheet

External (Linked) Style Sheets


The style definitions in an external style sheet are stored in a separate file. The file
storing the external style sheet uses the .css extension, style.css. This file should
have only the <STYLE>…</STYLE> tags in which the style definitions are defined. Note
that no other HTML element apart from the <STYLE>…</STYLE> pair should be used in
this file.
The file is linked with HTML documents by using the <LINK> tag defined within the
<HEAD> element. The following code shows how to link a style sheet by using <LINK>
tag:

Developing Web Applications Using ASP.NET 1A.57


<HEAD>
<LINK REL=stylesheet HREF="style.css" TYPE="text/css">
</HEAD>
In the preceding code snippet, REL=stylesheet specifies that the document will use
a style sheet, HREF="style.css" specifies that the document will refer to the file,
style.css, for the style definition, and TYPE="text/css" signifies that it refers to a
.css file for picking up the style definitions.
Consider the sample code snippets stated below. The first file, style.css, is an
external file storing style sheet definitions. The second file, MyStylePage.html, is an
HTML document using the style definitions stored in the file, style.css:
File: style.css (File storing style sheet definitions)
<STYLE>
H1 { font-style:italic;background:yellow;color:red }
P { background:purple}
</STYLE>
File: MyStylePage.html (File using the styles defined in style.css)
<HTML>
<HEAD>
<TITLE> An External Style Sheet </TITLE>
<LINK REL=stylesheet HREF="style.css" TYPE="text/css">
</HEAD>
<BODY>

<H1> An External Style Sheet </H1>


<P> External Style Sheet is a master style sheet stored in
an external file.
</P>
</BODY>
</HTML>

Embedded Style Sheets


In case of embedded style sheets, the style definitions are not saved in a separate file.
Instead, style definitions are included in the HTML page itself. The following code
shows an embedded style sheet:
<HTML> <HEAD>
<TITLE>
An Embedded Style
</TITLE>
<STYLE TYPE="text/css">
H1 { font-style:italic;background:yellow;color:red }
</STYLE>
</HEAD>
<BODY>
<H1> In Line Style </H1>
<P> An inline style is included with the tag it affects.

1A.58 Developing Web Applications Using ASP.NET


</P>
<H1> An Embedded Style </H1>
<P> Embedded style sheet is a part of HTML document.
</P>
</BODY>
</HTML>
A HTML page can contain both an external style sheet and an embedded style sheet
associated with it. In such a case, the style definition for a particular element in the
embedded style sheet will override the style definition in the external style sheet for
the same element.

Inline Style Sheets


Inline styles are style definitions applied to the style property of an element. For
example, you can define a style for a <P> tag having the properties, font type Arial
and text italicized as follows:
<P style="font-family:arial;font-style:italic">
Consider the following code, which uses the inline style:
<HTML>
<HEAD>
<TITLE>
An Inline Style
</TITLE>
</HEAD>
<BODY>
<P style="font-family:arial;font-style:italic">
This came from a P tag with a style.<BR>
font-family:arial and font-style:italic
</P>
<P>
This came from a P tag without a style.
</P>
</BODY>
</HTML>

Developing Web Applications Using ASP.NET 1A.59


CREATING A WEB FORM IN
ASP.NET

Introducing ASP.NET

Demonstration-Creating a Web Form


In ASP.NET
• Problem Statement

• The WebShoppe Mall has decided to launch the WebShoppe


Web site. The WebShoppe wants you to design the new user
sign-up form to register the new users for accessing the
WebShoppe Web site. The sign-up form should have the first
name, last name, user name, password, confirm password,
address, city, state, postal code, country, telephone number,
and e-mail id fields. The form should display a welcome
message when the registration is successful.
Hint: Apply styles using CSS to enhance the Web form.

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 34 of 40

1A.60 Developing Web Applications Using ASP.NET


Introducing ASP.NET

Demonstration-Creating a Web Form


In ASP.NET (Contd.)
• Solution

1. Create an ASP.NET Web application.


2. Design a Web form.
3. Add a style sheet to the WebShoppeSite project.
4. Redirect a page.
5. Run the application.

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 35 of 40

INSTRUCTOR NOTES

The solution for this demo is stored in the \TIRM\Data Files For Faculty\ Cycle
1\OCR1\WebShoppeSite folder. Double-click the WebShoppeSite.sln file to view
the solution.

Problem Statement
The WebShoppe Mall has decided to launch the WebShoppe Web site. The WebShoppe
wants you to design the new user sign-up form to register the new users for accessing
the WebShoppe Web site. The sign-up form should have the first name, last name,
user name, password, confirm password, address, city, state, postal code, country,
telephone number, and e-mail id fields. The form should display a welcome message
when the registration is successful.
Hint: Apply styles by using Cascading Style Sheets to enhance the appearance of the
Web form.

Developing Web Applications Using ASP.NET 1A.61


Solution
To solve the preceding problem, perform the following tasks:
1. Create an ASP.NET Web application.
2. Design a Web form.
3. Add a style sheet to the WebShoppeSite project.
4. Redirect a page.
5. Run the application.

1. Create an ASP.NET Web Application


To create ASP.NET application by using the Visual Studio .NET IDE, perform the
following steps:
1. Select StartÆProgramsÆMicrosoft Visual Studio .NET ÆMicrosoft Visual
Studio .NET to open the Start Page of the Visual Studio .NET IDE.
2. Select the FileÆNewÆProject command to open the New Project dialog
box.

1A.62 Developing Web Applications Using ASP.NET


3. Select Visual C# Projects form the Project Type pane and ASP.NET Web
Application from the Templates pane, as displayed in the following figure:

New Project Dialog Box

4. Rename the WebApplication1 application in the Name textbox as


WebShoppieSite and click the OK button.

2. Design a Web Form


To design a Web form, perform the following steps:
1. Select the WebForms tab from the Toolbox.

Developing Web Applications Using ASP.NET 1A.63


2. Select the controls, as defined in the table, and place them on WebForm1.
Change the Text and Name properties of the controls, as displayed in the
following table:

Control For Control Type Text ID

First Name Label First Name Lblfname

TextBox txtfname

Last Name Label Last Name lbllname

TextBox Txtlname

User name Label User Name Lbluname

TextBox Txtuname

Password Label Password lblpassword

TextBox txtpassword

Confirm Label Confirm lblcpassword


Password Password

TextBox txtcpassword

Address Label Address Lbladdress

TextBox txtaddress

City Label City Lblcity

TextBox Txtcity

State Label State Lblstate

TextBox Txtstate

Postal code Label Postal Code Lblpcode

TextBox Txtpcode

Country Label Country Lblcountry

DropDownList ddlcountry

1A.64 Developing Web Applications Using ASP.NET


Control For Control Type Text ID

Telephone No. Label Telephone Lbltelno


No.

TextBox Txttelno

E-mail Id Label E-mail Id Lblemail

TextBox Txtemail

Submitting the Button Submit btnsubmit


form

3. To add a new Web form, select the File Æ Add New Item command, as
displayed in the following figure:

Add New Item Dialog Box

4. Select the Web form and save it as Webform2.

Developing Web Applications Using ASP.NET 1A.65


3. Redirect the Page
To redirect the page, perform the following steps:
1. Click the WebForm1.aspx tab.
2. Double-click on the Webform1 to open the code window.
3. Write the following code under Page_Load function:
private void Page_Load(object sender, System.EventArgs e)
{

if(this.IsPostBack)
{
Response.Redirect ("WebForm2.aspx");
}
}
4. Click on the WebForm2.aspx and click on the HTML tab for the HTML view.
5. Add the following statement within the <Body></Body> tag:
<h1>Welcome, You have successfully registered</h1>

4. Add a Style Sheet to the WebShoppeSite Project


To add a style sheet to the project, perform the following steps:
1. Select File Æ Add New Item.
2. Select Style Sheets from the Templates pane.
3. Go to Solution Explorer. A style sheet will be added in Solution Explorer.
4. Add the following set of instructions:
<!— The following body block will set the page properties like
background color, font etc. of the page, those are linked with the
style sheet. -->
BODY
{
BACKGROUND-COLOR:Aqua;
FONT-FAMILY: Verdana, Helvetica, sans-serif;
FONT-SIZE: .8em;
FONT-WEIGHT: normal;
LETTER-SPACING: normal;
TEXT-TRANSFORM: none;
WORD-SPACING: normal
}
<!--The following code block will set the style of all the Div
elements those are placed on the linked page. -->
DIV
{

1A.66 Developing Web Applications Using ASP.NET


font-weight: bold;
font-size: 12pt;
text-transform: capitalize;
color: slateblue;
font-style: normal;
}

5. Run the Application


Select Start from the Debug menu or press the F5 key to compile and run the
application.

Developing Web Applications Using ASP.NET 1A.67


SUMMARY

Introducing ASP.NET

Summary
In this lesson, you learned that:
• A Web application can have client-side scripting, server-side scripting, or both.
• ASP.NET, the .NET version of ASP, is built on Microsoft .NET Framework. After
creating an ASP.NET application, the ASP.NET files need to be stored on the IIS
server.
• The features of ASP.NET are:
• Compiled Code
• Enriched Tool Support
• Power and Flexibility
• Simplicity
• Manageability
• Scalability
• Security
• Customizability
• Extensibility

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 36 of 40

1A.68 Developing Web Applications Using ASP.NET


Introducing ASP.NET

Summary (Contd.)
• ASP.NET provides two types of programming models:
• Web Forms
• Web Services
• Web Forms enable you to create form-based dynamic Web pages.
• A Web Service is defined as a program unit that can be accessed by other
applications through the Internet.
• The following are the files that get generated when you create an ASP.NET
application:
• AssemblyInfo.cs
• Global.asax
• Web.config
• WebApplication.vsdisco
• WebForm1.aspx

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 37 of 40

Developing Web Applications Using ASP.NET 1A.69


Introducing ASP.NET

Summary (Contd.)
• Web forms have two views:
• Design view
• HTML view
• The code-behind feature of ASP.NET enables you to divide an ASP.NET page into
two files:
• The presentation file that stores the user interface contents.
• The code-behind file that stores the application logic.
• The sequence of events that are fired during the life cycle of a Web page are:
• Init
• Load
• Unload

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 38 of 40

1A.70 Developing Web Applications Using ASP.NET


Introducing ASP.NET

Summary (Contd.)
• Some of the built-in intrinsic objects are:
• Application
• Request
• Response
• Server
• Session
• The structure of an ASP.NET page includes:
• Directives
• Code declaration blocks
• Code render blocks
• Server-side comments
• Server-side Include directives
• A style sheet is a document, which defines a group of styles.

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 39 of 40

Developing Web Applications Using ASP.NET 1A.71


Introducing ASP.NET

Summary (Contd.)
• The three ways to add a style sheet to a Web page are:
• Using an inline style sheet
• Using an embedded style sheet
• Using an external (linked) style sheet

©NIIT Developing Web Applications Using ASP.NET Lesson 1A / Slide 40 of 40

In this lesson, you learned that:


„A Web application can have client side scripting, server side scripting, or both.
„ASP.NET, the .NET version of ASP, is built on the Microsoft .NET Framework.
After creating an ASP.NET application, the ASP.NET files need to be stored on
the IIS server.
„The features of ASP.NET are:
x Compiled code
x Enriched tool support
x Power and flexibility
x Simplicity
x Manageability
x Scalability
x Security
x Extensibility
„ASP.NET provides two types of programming models:
x Web forms
x Web services

1A.72 Developing Web Applications Using ASP.NET


„Web forms enable you to create form-based dynamic Web pages.
„A Web Service is defined as a program unit that can be accessed by other
applications through the Internet.
„The following are the files that get generated when you create an ASP.NET
application:
x AssemblyInfo.cs
x Global.asax
x Web.config
x WebApplication1.vsdisco
x WebForm1.aspx
„Web forms have two views:
x Design view
x HTML view
„The code-behind feature of ASP.NET enables you to divide an ASP.NET page into
two files:
x The presentation file that stores the user interface contents.
x The code-behind file that stores the application logic.
„The sequence of events that are fired during the life cycle of a Web page are:
x Init
x Load
x Unload
„Some of the built-in intrinsic objects are:
x Application
x Request
x Response
x Server
x Session
„The structure of an ASP.NET page includes:
x Directives
x Code declaration blocks
x Code render blocks
x Server side comments
x Server side Include directives
„A style sheet is a document, which defines a group of styles.
„The three ways to add a style sheet to a Web page are:

Developing Web Applications Using ASP.NET 1A.73


x Using an inline style sheet
x Using an embedded style sheet
x Using an external (linked) style sheet

1A.74 Developing Web Applications Using ASP.NET

Anda mungkin juga menyukai