You are on page 1of 4

ASP.

NET
INTRO TO ASP WEB APPLICATION DEVELOPMENT

Web applications are developed using MS ASP.NET technologies.


Utilize web-forms; web-controls and C# code to create web applications.
Web-forms are referred to as .aspx files.

Revision

A web page is an HTML document i.e. .html or .htm. A web browser renders this HTML
document and displays the content and format of the webpage.
Learners should understand the process involved when a webpage is requested from a
server and displayed on the internet browser. (Ref: pg. 780 of prescribed text)

Complete this exercise in conjunction with: CHAPTER 19, Section 19.4.1

1. Create new website


Create a new Website. Click on File, New Web Site.
Check the language (C#); ASP.NET Empty Web Site; and the location + name at bottom. Set
location for web-application files = File System which will create website on your local machine.
Other options are HTTP and FTP. Read these on page 785.
2. Add New Webpage/ Webform
Right click project, add new item, webform. Ensure language is set C#. Ensure place code in
separate file is checked.
Change the name at the bottom to: aspSet1.aspx
3. Examine the solution explorer. Notice the aspx file + code behind file.
4. Toggle Source, Split and Design modes. Note the toolbox.
5. Change the title of the web form on the web form source mode.
6. Designing the webform

Page 1 of 4
Design the web form using controls from the toolbox. Insert a table onto the webpage from
menu item table (page 796). Then place various controls within each cell of the table.
7. A programmer can make use of Cascading Style Sheets (CSS) to develop more attractive
webpages i.e. format colour, background etc. Pages 791-792.
8. Add code to the code behind file.
Open the code behind file i.e. aspSet1.aspx.cs.
The webpage has a page_load event. Change this to page_init event for when the page is
requested by the server.
Add code: txtTime.Text = DateTime.Now.ToString("hh:mm:ss");
9. Set the start page by right-clicking on the .aspx file, set as start page.
10. Run the program
Save the solution first.
Right click; view solution in browser
Or debug, but this must be set in the Web.config file.

Relationship between aspx and code behind Files

1. When a web application is created, two files are created by ASP.NET.


2. Both file’s code are combined during run-time and execute as one object. These are
known as partial classes i.e. you will notice that the names are the same “Webtime”.
Examine pg. 543 of textbook for information on partial classes).

Aspx web form Source Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="aspSet1.aspx.cs"


Inherits="aspSet1" %>

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


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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.style1
{
width: 100%;
}
.style2
{
text-align: center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>

<table class="style1">
<tr>
<td class="style2" colspan="2" style="font-size: x-large">
<b>asp .NET Set One</b></td>
</tr>
<tr>
Page 2 of 4
<td>
<asp:Label ID="Label1" runat="server" Text="Time:"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtTime" runat="server"></asp:TextBox>
</td>
</tr>
</table>

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

1. The “mark-up” of the web form is shown in the aspx file.


2. A Page directive specifies the programming language, the name of the code behind file.
3. The mark-up for the web form is shown in this file i.e. when you drag and drop a textbox
on the form.
4. <head runat="server"> specifies that when a client requests this web form,
ASP.NET processes the <head> and <body> segments on the server, generates the
corresponding XHTML and sends this to the client’s browser.
5. asp: tag specifies a ASP.NET web control. Each web control maps to a corresponding
XHTML element. When processing a web control on the server, ASP.NET generates the
XHTML markup that will be sent to the client’s web browser.
6. Inherits="Webtime" Specifies the class name that this webpage will inherit from.

Code Behind File

Aspx Code Behind File:

Partial Class Webtime


Inherits System.Web.UI.Page

Protected Sub Page_Init(ByVal sender As Object, ByVal e As


System.EventArgs) Handles Me.Init
lblTime.Text = DateTime.Now.ToString("hh:mm:ss")
End Sub
End Class

1. This partial class inherits from class Page in the System.Web.UI namespace which
contains classes and controls for creating web forms.
2. The web application functionality is coded (either in VB or C#) in the code behind file.
This can include any calculations, validations etc.

Aspx and Code Behind Files


1. When a client requests an aspx file, ASP.NET creates two partial classes. One has the
program code and the second has the webform markup.

Page 3 of 4
2. When compiled ASP.NET will combine both to form one complete class. This explains
why the control can be accessed from a second partial class i.e. the code behind file.
3. The markup for the controls will be taken from class WebControls of namespace
System.Web.UI.
4. The first time the web form is requested, it is compiled and an instance is created and
stored on the local machine. Every time a client browser requests this web form, an
instance of the web form is sent. Hence multiple clients can view the same web page at
the same time.

Execution of Web Page


Page_PreInit: fires when an instance of the webform is created.
Page_Init, Page_Load. Both are inherited from class Page.
Page_Unload is used for garbage collection.

Web controls
Textbox; button; hyperlink; dropdown list; radio button list; image; panel.

Web page events


PreInit: before the page is initialized
Init: when the page is initialized i.e. during
InitComplete: after initialize
PreLoad: before the page is loaded
Load: when the page is loaded
LoadComplete: when page loading is complete
PreRender: before the page is rendered
SaveStateComplete: after the page finishes saving view and control state information
Render: when the page is rendered
Unload: when the page is unloaded

IsPostBack Property (page 805)


The web environment is not dynamic in the same way a windows form environment is.
Content on the webpage can only be updated by changes made to the HTML and then
rendering it in the browser.
IsPostBack is used to determine if a webpage has already been submitted i.e. if the webpage
is now loading for a second time.
When the webpage is opened by the user for the first time, the IsPostBack property is set to
set to False. However, when the user submits a webpage and post back occurs, the
IsPostBack property is assigned a value of True.

Page 4 of 4