CSCI 6962: Server-side Design and Programming

1. CSCI 6962: Server-side Design and Programming Introduction to the ASP User Interface

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

5. 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

6. Visual Studio Express • IDE for developing ASP applications • Express version is free download • http://www.microsoft.com/visualstudio/eng#downloadsChoose Visual Web Developer 2012 Express • Will need to registerwith MicroSoft to usefor more than 30 days

7. Creating a 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

8. Adding a Web Form • Solution Explorer contains files related to application • Initially Web.config (like web.xml) • Right-click site name in Solution Explorer  Add  New Item

9. Adding a Web Form • Select Web Form • Choose name of file • Default.aspxdefault initialfile (like index.xhtml)

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

11. Viewing the Web Page • Simplest method: Cntrl-F5 • Runs page in default browser

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

13. Example: Adding a Button • Click on the Buttonoption and drag it onto the screen • Drag to desired location • Design or Split mode • Within defined area of page

14. Properties Window • Visual components commonly edited with Properties box on RHS • Example: Textproperty controls text displayed on button

15. Setting Component ID • Visual components referred to using ID property • Most important property to set (like name in JSP) • Allows codeto get/set property values

16. 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

17. “Hello World” Example • Textboxfor name • ID = nameBox • Label for greeting • ID= greetLabel, Text = “” • Button to activate code • ID = helloButton(not strictly necessary, but good practice)

18. Accessing Code Window • Double-click on window shows code associated with events (“code behind”) • .vb file associated with all events • Page_Load= code executed when page loaded • helloButton_Clickexecuted when button pressed

19. Adding Code • Code added to helloButton_Clickexecuted 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 greetingLabel

20. 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

21. Default Post Back Mode • By default, same pagerequested from server • All component values automatically echoed in page sent back as response • Similar to JSF

22. 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

23. 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