ASP .Net, Web Forms and Web Controls

childlikenumberΑσφάλεια

5 Νοε 2013 (πριν από 3 χρόνια και 9 μήνες)

61 εμφανίσεις

ASP
.Net
, Web Forms and Web Controls

1

Outline


Introduction


Simple HTTP Transaction


System Architecture


Creating and Running a Simple Web Form Example


Web Controls




Text and Graphics Controls




AdRotator

Control




Validation Controls


Introduction


Web
-
Based Application Development


Creates Web content for Web browser clients, includes


HyperText Markup Language (HTML)


Client
-
side scripting


Images and binary data


Uses Web Forms, Web Controls, and C# programming


Web Forms (Web Form pages)


Represent what the Web page sent to client will look like


File extension .
aspx


ASPX
(Web Form files) contain written code, event handlers, utility
methods and other supporting code


Every ASPX file has a corresponding class written in .NET language
(C#) called the
code
-
behind file

2

Simple HTTP Transaction


HyperText Transfer Protocol (HTTP)


Defines methods and headers which allows clients and servers
exchange information in uniform way


Uniform Resource Locator (URL)


IP

address indicating the location of a resource


All HTML documents have a corresponding URL


Domain Name Server (DNS)


A computer that maintains a database of hostnames and their
corresponding
IP

addresses



Microsoft Internet Information Services (IIS)


Web server that programmers use when developing ASP.NET Web
applications in Visual Studio

3

A Simple HTTP Transaction

4


Client interacting with Web server.


Step 1: The
GET

request,
GET /books/downloads.htm HTTP/1.1
.

A Simple HTTP Transaction

5


Client interacting with Web server.


Step 2: The HTTP response,
HTTP/1.1

200

OK

or
HTTP/1.1 404 Not found

System Architecture


Most Web
-
based applications are multi
-
tier applications


Tiers are logical groupings of functionality



Information Tier (data tier or bottom tier)


Maintains data pertaining to the applications


Usually stores data in a relational database management systems
(RDBMS)


Middle Tier


Implements the business logic, controller logic and presentation logic


Acts as an intermediary between data in the information tier and the
application's clients


Client Tier


application’s user interface (Web browser)



6

System Architecture

7


Three
-
tier architecture.

Creating and Running a Simple
Web
-
Form Example


Program consists of two related files


ASPX file


C# code
-
behind file


Example


Show the output


Step
-
by
-
step process to create the program


Present the code (much of which is generated by Visual Studio)

8

WebTime.cs


Program Output

9

WebTime ouput

Creating and Running a Simple
Web Form Example

10

Adding Web Form for project
WebTime

(Right click on project in Solution Explorer)

Creating and Running a Simple
Web Form Example

11

Click on Add New Item and Add a Web Form for project
WebTime

.

Creating and Running a Simple
Web Form Example

12

code
-
behind
file

ASPX file

Creating and Running a Simple
Web Form Example

13

Solution Explorer window for project
WebTime

.

code
-
behind file

ASPX file

Creating and
Running a
Simple Web
Form Example

14

Toolbox
in
Visual Web
Developer.

Creating and Running a Simple
Web Form Example

15

Source
mode of Web Forms designer.

Design

mode

button

Creating and Running a Simple
Web Form Example

16

Design
mode of Web Forms designer.

Cursor’s
current
location

Cursor

Creating and Running a Simple Web
Form Example

17

Split
mode of Web Forms designer.

Creating and Running a Simple
Web Form Example

18

Code
-
behind file for
WebTime.aspx.cs

generated by Visual Web Developer.

Designing the Page


Designing a
Web Form
as simple as a
Windows Form


Use
Toolbox
to add controls to page in
Design
mode


Unlike working with
Windows Form
, type text directly on a
Web Form
at the cursor location or insert XHTML elements
using menu commands


Control and other elements are placed sequentially on a
Web
Form


position is relative to
Web Forms
upper left corner


Alternate type layout (absolute positioning) is discouraged

19

Designing the Page

20

WebForm.aspx

after adding
Label

and setting its properties.

label

Web Form

Adding Page Logic


Open WebTime.aspx.cs


Add to Page_Load event handler


//display the server's current time in timeLabel


timeLabel.Text =


DateTime.Now.ToString("hh:mm:ss");

21

Running the Program


Can view the Web Form several ways


Select Debug > Start Without Debugging


runs the app by opening it in a browser window


If created on a local file system URL
http://localhost:
PortNumber/
WebTime/WebTime.aspx


Debug>Start Debugging


view web app in a web browser with debugging enabled


Do you want IDE to modify the web.config file to enable debugging?
Click OK


To view ASPX file


right click either the Web Forms Designer or the ASPX file name and
select View in Browser to load the page


Finally, can open web browser and type the web page’s URL in the
Address field

22

WebTime.aspx

<%
--

Fig. 22.4: WebTime.aspx
--
%>

<%
--

A page that displays the current time in a Label.
--
%>

<%@ Page Language="C#"
AutoEventWireup
="true"
CodeFile
="
WebTime.aspx.cs
" Inherits="
WebTime
"
EnableSessionState
="False" %>


<!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>Simple Web Form Example</title>


<style type="text/
css
">


#form1


{


height: 255px;


width: 655px;


}


.style1


{


font
-
size: large;


}


</style>

</head>

23

This attribute determines
how event handlers are
linked to a control’s events

AutoEventWireUp

set to
true
so ASP.NET treats method of
name Page_eventName as an
event handler for a specified
event

Specify class in the code
-
behind file from which this
ASP .NET document

Document type
declaration, specifies
document element name
and URI

Title for web page

Directive to specify
information needed to process
file



<body>


<form id="form1" runat="server">


<div>




<h2>


Current time on the Web Server:</h2>


<p>


&nbsp;</p>




</div>


<asp:Label ID="timeLabel" runat="server"


BackColor="Black" Font
-
Size="XX
-
Large"


ForeColor="Lime"></asp:Label>


</form>

</body>

</html>

24

Body tag, beginning of Web
page’s viewable content

Attribute indicates the
server processes the
form

and generates HTML for
client

The asp:Label control maps to
HTML
span

element


markup for
the
Label

Web control

//
WebTime.aspx.cs

// The code
-
behind file for a page that displays the Web server's time.

using System;

using
System.Configuration
;

using
System.Data
;

using
System.Linq
;

using
System.Web
;

using
System.Web.Security
;



// definitions for graphical controls used in Web Forms

using
System.Web.UI
;

using
System.Web.UI.HtmlControls
;

using
System.Web.UI.WebControls
;

using
System.Web.UI.WebControls.WebParts
;


public partial class
WebTime

:
System.Web.UI.Page


{


protected void
Page_Load
(object sender,
EventArgs

e)


{


//display the server's current time in
timeLabel


timeLabel.Text

=
DateTime.Now.ToString
("
hh:mm:ss
");


}

}

25

Contains classes that manage
client requests and server
responses

Contain classes for creation
of Web
-
based applications
and controls

Set
timeLabel
’s
Text

property to Web server’s time

Event raised when Web page
loads

Creating and Running a Simple Web
-
Form Example


How are ASPX file and code
-
behind file used to create the Web
page that is sent to the client?


WebTimeTest.aspx.cs is the base class specified in the ASPX file


WebTimeTest


inherits from Page, which defines general functionality of a Web page


Also defines some of its own functionality (displaying time)


WebTime.ASPX defines the GUI


When client requests an ASPX file…


Class is created behind the scenes that contains both the visual
aspect of our page (.aspx) and the logic of our page (.aspx.cs)


New class inherits from Page


First time Web page is requested, class is compiled, and instance
created (put in project’s bin directory)


This instance represents the page


creates the HTML sent to the
client

26

Creating and Running a Simple
Web
-
Form Example


Once the web page has been created


Multiple clients can use that instance (w/o recompilation)


Project is recompiled only when programmer modifies the
application; this is detected by the runtime environment



How does it execute?


When the Web server creates an instance of our page to serve a
client request


The Init event occurs first, invoking method OnInit


This method calls InitializeComponent


Then Load event is generated, which calls Page_Load


Page_Load executes processing


time will be updated with every page request


After this event handler finishes, the page processes any events raised by
page’s controls (such as button clicks).


When ready for garbage collection, an UnLoad event is generated and
method Page_Unload is called

27

1
<!
--

WebTime.html
--
>

2
<!
--

The HTML generated when
WebTime

is loaded.
--
>


3
<!DOCTYPE html PUBLIC "
-
//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1
-
transitional.dtd">


4
<html
xmlns
="http://www.w3.org/1999/xhtml">

5
<head><title>

6

Simple Web Form Example

7
</title>

8

<style type="text/
css
">

9

#form1

10

{

11

height: 255px;

12

width: 655px;

13

}

14

.style1

15

{

16

font
-
size: large;

17

}

18

</style>

19
</head>

20
<body>

21

<form name="form1" method="post" action="WebTime.aspx" id="form1">

22
<div>

23
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwUJODExMDE5NzY5ZGTHi7f/xNriT14LWNspMfB7YfGTVA==" />

24
</div>


25

<div class="style1">

26


27

Current time on the web server:<
br

/>

28

<span id="
timeLabel
" style="
color:LimeGreen;background

29

color:Black;font
-
size:XX
-
Large
;">03:10:03</span>

30


31

</div>

32

</form>

33
</body>

34
</html>


28

Defines the body of the document

Hidden inputs from the user

Look at HTML
response when
browser requests
WebTime.aspx

span element to represent the text in the label

Using Cascading Style Sheets

Instructions to get IIS and
ASP.NET running


First


Install IIS (need Windows 7 CD)


Start IIS by executing inetmgr.exe (?)


Expand node representing your computer


Right click Default Web Site and select Start


Run

C:
\
WINDOWS
\
Microsoft.NET
\
Framework
\
v4.nnnn
\
aspnet_regiis /i



29

Summary Instructions to
Create a Web App project

1.
File>New Web Site



Type in project name in the Location field

2.
Examine the newly created project


View
aspx

file


Click on display all files icon and expand the node for ASPX page


View code
-
behind file

3.
Rename the ASPX file and the Class in the code
-
behind file

4.
Design the page


Change page title


EnableSessionState

property set to false


Add labels, rename, change
BackColor
,
ForeColor

and Font
-
Size
properties

5.
Add page logic in code
-
behind file in
Page_Load



30

Instructions to Run the
Program

Three ways

1.
Debug>Start Without Debugging

2.
Right
-
click Web Form designer or ASPX file name in Solution
Explorer and select
View In Browser

3.
Open browser and type in URL


http://localhost/ProjectFolder/PageName.aspx

31