1 / 23

CSCI 6962: Server-side Design and Programming

CSCI 6962: Server-side Design and Programming. Introduction to the ASP User Interface. Active Server Pages. Active Server Page approach: Create “form” which is translated to html. Active Server Pages. Server-side code manipulates “form elements” Subroutine called when page submitted

adeola
Télécharger la présentation

CSCI 6962: Server-side Design and Programming

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related