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