CSCI 6962: Server-side Design and Programming

Introduction to Active Server Pages

2

Active Server Pages• Active Server Page approach:

Create “form” which is translated to html

3

Active Server Pages• Server-side code manipulates “form elements” – Subroutine called when page submitted– Data read from elements (actually request string)– Used to set value of other elements

4

Active Server Pages• Resulting form translated to response page

ASP/IIS Architecture

• IIS routes request to ASP.NET if .aspx file requested• ASP.NET loads requested .aspx file, runs code, and converts

resulting form to html file

Creating a New Web Site• Choose File

New Web Site• Choose “ASP.NET

Empty Web Site”– Can select either

Visual Basic or Visual C#

– Can set name/location of site at bottom

Adding a Web Form• Solution Explorer contains files related

to application– Initially Web.config (like web.xml in JSF)

• Right-click site name in Solution Explorer Add New Item

Ways to View Page• Source: Html source code (can insert html tages)• Design: WYSIWYG mode showing corresponding page• Split: Both simultaneously

Viewing the Web Page

• Simplest method: Cntrl-F5 • Runs page in default browser

Toolbox

• Toolbox on LHS lets you drag components onto page– Similar to VB, VC#– Components not created programmatically

Example: Adding a Button

• Click on the Button option and drag it onto the screen• Drag to desired location

– Design or Split mode– Within defined area

of page

Properties Window

• Visual components commonly edited with Properties box on RHS– Example: Text property controls text displayed on button

Setting Component ID

• Visual components referred to using ID property – Most important property to set (like name in JSP)– Allows code to get/set property values

ASP and Dynamic Pages

• Code used to manipulate ASP site– Code activated by event (such as submit button

being pressed)– Code can read properties of visual controls– Code can modify properties of other visual

controls to change page

“Hello World” Example

• Textbox for name – ID = nameBox

• Label for greeting – ID = greetLabel, Text = “”

• Button to activate code – ID = helloButton (not strictly necessary, but good practice)

Accessing Code Window

• Double-click on window shows code associated with events (“code behind”)– .cs file associated with all events– Page_Load = code executed when page loaded– helloButton_Click executed when button pressed

Adding Code• Code added to helloButton_Click executed when button

pressed

Get the Text property of the nameBox

Append that name to the rest of the string using “+”

Write that string into the Text property of the greetLabel

Viewing the Result

• Run with Cntrl-F5, enter a name and press the button• The code is executed:– String read from Text property of nameBox– String written to Text property of greetLabel

Default Post Back Mode

• By default, same page requested from server• All component values automatically echoed in page

sent back as response– Similar to JSF

How Does This Work?

• At client side, these components displayed as corresponding html

• Event causes page to be submitted to server– Form data included in request

How Does This Work?

• By default, same page requested (“postback”)

• Implemented as Visual Basic/C# form at server side• Form data from request written into the properties of the form

elements– Parameter value for text element Text property of TextBox