Introduction to ASP.NET


Published on

Overview of ASP.NET
Server Controls
User Controls
Master Pages
Themes & skins
Page Cycle Events
Menu, Navigation & Sitemaps
Some cool new ASP.NET 2 Server Controls

Published in: Education

Introduction to ASP.NET

  1. 1. Developing Windows and Web Applications using Visual Studio.NET<br />Peter Gfader<br />Senior Software Architect<br />
  2. 2. Peter Gfader<br />SSA @ SSW<br />Loves C# and .NET (Java not anymore)<br />Specializes in <br />Windows Forms<br />ASP.NET<br />TFS testing<br />Automated tests<br />Silverlight<br />
  3. 3. Homework?<br /><ul><li>Consume a public web service
  4. 4. Show users where they are</li></li></ul><li>Agenda<br />The course ten sessions – Overview so far<br />Overview of ASP.NET<br />An ASP.NET Page<br />Server Controls<br />User Controls<br />Validation<br />Master Pages<br />Themes & skins<br />LAB<br />Page Cycle Events<br />Menu, Navigation & Sitemaps<br />Some cool new ASP.NET 2 Server Controls<br />
  5. 5. Session 6: ASP. NET<br /><ul><li> The course ten sessions – Overview so far
  6. 6. Overview of ASP.NET
  7. 7. An ASP.NET Page
  8. 8. Server Controls
  9. 9. User Controls
  10. 10. Validation
  11. 11. Master Pages
  12. 12. Themes & skins</li></ul>LAB<br /><ul><li> Page Cycle Events
  13. 13. Menu, Navigation & Sitemaps
  14. 14. Some cool new ASP.NET 2 Server Controls</li></li></ul><li><br />Part 1: .NET Winforms<br />Overview of .NET<br />Data in Forms<br />Usability - Rules to Better Windows Forms<br />Deployment and Security of Windows Forms<br />Web Services and Threading<br />The 10 SessionsFirst 5 – Done – Winforms<br />
  15. 15.<br />Part 2: .NET Webforms<br />Overview of .NET WebformsTODAY<br />Data in Webforms<br />Usability<br />Rich Web Forms and <br />Other ASP.NET Features <br />Web Security <br />Advanced Topics & Future Technology (Silverlight)<br />The 10 SessionsNext 5 – To Do – Webforms<br />
  16. 16. The web<br />
  17. 17. HyperTextMarkupLanguage<br />Describes a web page<br /><br />HTML<br /><html><br /> <head><br /> <title>Hello HTML</title><br /> </head><br /> <body><br /> <p>Hello World!</p><br /> </body><br /></html><br />
  18. 18. Hypertext Transfer Protocol<br />Request – Response<br /><br />HTTP<br />GET /index.html HTTP/1.1 Host: <br />HTTP/1.1 200 OK<br /> Date: Mon, 23 May 2005 22:38:34 GMT<br /> Server: Apache/ (Unix) (Red-Hat/Linux)<br /> Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT<br /> Content-Length: 438<br /> Content-Type: text/html; charset=UTF-8<br />
  19. 19. Your<br />Computer<br />Hosting<br />Computer<br />Internet<br />The<br />Internet<br />Server<br />Client<br />How a web page is shown<br />
  20. 20. Request / Response<br />Request<br /><br />The<br />Internet<br />Response<br />Server<br />HTML<br />Client<br />
  21. 21. IL = Intermediate Language<br />CLR = Runtime<br />.NET Overview<br />
  22. 22. CLR<br />Common<br />Language<br />Runtime<br />= Virtual machine <br />
  23. 23. What Is ASP.NET?<br />ASP.NET provides a complete environment for building, deploying, and running .NET Web applications.<br />Developer Productivity<br />Simplified page development model<br />Target any Web client (PC or mobile device) <br />Modular, well-factored, extensible architecture<br />Superior debugging and tracing support<br />Enhanced Performance, Scalability, and Reliability<br />Compiled, not interpreted<br />Rich caching support<br />Web farm scalable session state<br />Automatically detects and recovers from errors<br />Simple Deployment and Configuration<br />No need to bring down Web server<br />Deploy and upgrade running applications with XCOPY<br />XML configuration files <br />
  24. 24. User requests an application resource from the Web server.<br />IIS forwards the call to ASP.NET’s process<br />Application manager calls the Application domain & Processes the page.<br />ASP.NET Page Request<br />
  25. 25. Evolution<br />The whole .NET FX<br /><br />.NET Framework<br />
  26. 26. Generate<br />Parse<br />Code-behindclassfile<br />ASPX<br />Engine<br />Request<br />Gen’dPageClassFile<br />ASPX<br />File<br />Instantiate<br />Request<br />Page<br />Class<br />Response (HTML/js/dhtml/etc…)<br />Instantiate, process and render<br />ASP.NET Compilation<br />
  27. 27. 2 Types of Projects – 1 – Web Site<br />Web Site<br />Don’t use this, here for compatibility only<br />File > New > Web Site<br />Each page is dynamically loaded into memory<br />Slow on first load after deployment<br />No need to recompile for code change<br />
  28. 28. 2 Types of Projects – 2 – Web Application<br />Web Application -<br />Recommended<br />File > New > Projects, then Select Web Application<br />Compiles all pages into one DLL<br />Faster on first load after deployment<br />Must recompile whole site for code change<br />Not available in Default VS 2005, requires SP2<br />
  29. 29. ASP.NETCompilation<br />Generate<br />Parse<br />Code-behindclassfile<br />ASPX<br />Engine<br />Request<br />Gen’dPageClassFile<br />ASPX<br />File<br />Instantiate<br />Request<br />Page<br />Class<br />Response (HTML/js/dhtml/etc…)<br />Instantiate, process and render<br />Web Site<br />
  30. 30. ASP.NETCompilation<br />Generate<br />Parse<br />Code-behindclassfile<br />ASPX<br />Engine<br />Request<br />Gen’dPageClassFile<br />ASPX<br />File<br />Instantiate<br />Request<br />Page<br />Class<br />Response (HTML/js/dhtml/etc…)<br />All pre compiled!<br />Web Application<br />
  31. 31. The Page<br />
  32. 32. ASP.NET –Page/Web Form<br />An ASP.NET Web page consists of two parts: <br />Visual elements, which include markup, server controls, and static text.<br />Programming logic for the page, which includes event handlers and other code. <br />
  33. 33. Things to Notice<br />ASP.NET – Page/Web Form<br />
  34. 34. Things to Notice<br />Page Directive<br />ASP.NET – Page/Web Form<br />
  35. 35. Things to Notice<br />Page Directive<br />Server side code<br />ASP.NET – Page/Web Form<br />
  36. 36. Things to Notice<br />Page Directive<br />Server side code<br />Form<br />ASP.NET – Page/Web Form<br />
  37. 37. Things to Notice<br />Page Directive<br />Server side code<br />Form<br />Normal HTML Structure<br />ASP.NET – Page/Web Form<br />
  38. 38. Things to Notice<br />Page Directive<br />Server side code<br />Form<br />Normal HTML Structure<br />Server Controls<br />ASP.NET – Page/Web Form<br />
  39. 39. ASP.NET – Page Code Model<br />ASP.NET provides two models for managing the visual elements and code:<br />The Single-File Page Model<br /> <%@ Page Language="VB“><br /> <script runat=“server”> … </script><br />The Code-Behind Page Model <br /> <%@ Page Language="VB“<br />CodeFile="SamplePage.aspx.vb“<br />Inherits="SamplePage“<br />AutoEventWire="false" %><br />
  40. 40. A Page's Life<br />
  41. 41. Page request<br />Start<br /> Page Initialization<br />Load<br />Validation<br />PostbackEvent handling<br />Rendering<br />Unload<br /><br />ASP.NET – Page Life Cycle Stages (SILVER-U)<br />
  42. 42. ASP.NET – Page Life Cycle Stages (SILVER-U) 1) Page request<br />Occurs before the page life cycle begins. <br />When the page is requested by a user<br />ASP.NET determines whether the page needs to be parsed and compiled (therefore beginning the life of a page), or if a cached version of the page can be sent in response without running the page.<br />
  43. 43. ASP.NET – Page Life Cycle Stages (SILVER-U) 2) Start <br />Page properties set<br />Request and <br />Response<br />Determines whether the request is a postback or a new request and sets the IsPostBack property. <br />Sets the page's UICulture property<br />
  44. 44. ASP.NET – Page Life Cycle Stages (SILVER-U) 3) Page Initialization<br />Controls on the page are available<br />Each control's UniqueID property is set. <br />Themes are applied to the page. <br />If the current request is a postback, the postback data has not yet been loaded and control property values have not been restored to the values from view state.<br />
  45. 45. ASP.NET – Page Life Cycle Stages (SILVER-U) 4) Page Load<br />If the current request is a postback, control properties are loaded with information recovered from view state and control state.<br />
  46. 46. ASP.NET – Page Life Cycle Stages (SILVER-U) 5) Page Validation<br />The Validate method of all validator controls is called<br />Sets the IsValid property of <br />Individual validator controls<br />The page<br />
  47. 47. ASP.NET – Page Life Cycle Stages (SILVER-U) 6) Postback Event Handling<br />If the request is a postback, <br />Event handlers are called<br />
  48. 48. ASP.NET – Page Life Cycle Stages (SILVER-U) 7) PageRendering<br />Before rendering, view state is saved for the page and all controls. <br />During the rendering phase, the page calls the Render method for each control, providing a text writer that writes its output to the OutputStream of the page's Response property.<br />
  49. 49. ASP.NET – Page Life Cycle Stages (SILVER-U) 8) Page Unload<br />Unload is called after the page has been:<br />Fully rendered, <br />Sent to the client, and <br />Is ready to be discarded. <br />At this point, page properties such as Response and Request are unloaded and any cleanup is performed.<br />
  50. 50. Page request<br />Start<br /> Page Initialization<br />Load<br />Validation<br />PostbackEvent handling<br />Rendering<br />Unload<br /><br />ASP.NET – Page Life Cycle Stages (SILVER-U)<br />
  51. 51. PreInit<br />Init<br />InitComplete<br />PreLoad<br />Load<br />Control events<br />LoadComplete<br />PreRender<br />SaveStateComplete<br />Render <br />Unload <br />ASP.NET – Page Life Cycle Events<br />
  52. 52. Postback & ViewState<br />
  53. 53. ASP.NET Postbacks<br />A Page Postback is:<br />Where the client communicates back to the server, <br />Through the page that was originally served. <br />The post back is a submission of the Form element.<br />
  54. 54. ASP.NET Viewstate<br />Page ViewState<br />Allows the state of objects (serializable) to be stored in a hidden field on the page.  <br />ViewState is transported to the client and back to the server, <br />Is not stored on the server or any other external source.  <br />ViewState is used to retain the state of server-side objects between postbacks. <br />So program can see if values have changed<br />
  55. 55. Server states<br />
  56. 56. ASP.NET States<br />Session State – allows the state of objects (serializable) to be stored for a single session (lifetime of the user’s browser or specific timeout)<br />Application State – allows the state of objects (serializable) to be stored for the application across different sessions.<br />
  57. 57. Server controls<br />
  58. 58. ASP.NET – Server Controls<br />Server controls are tags that are understood by the server. <br />Syntax: <br /><asp:control_name id="some_id" runat="server" /> <br />Example:<br /><asp:Button<br /> id="button1" <br /> Text="Click me!" <br />runat="server" <br />OnClick="submit" /><br />
  59. 59. Demo<br />How to create a web application<br />How to create a web form<br />Designer Features<br />Different Page Code models<br />Postbacks<br />Viewstate, Session State, Application State<br />
  60. 60. User controls<br />
  61. 61. ASP.NET User Controls<br />A group of server controls that are created by the user.<br />Encapsulates certain functionality<br />Can be used on multiple pages<br />E.g Address User control (in your lab)<br /> Contact User Control<br />
  62. 62. ASP.NET Configuration<br />
  63. 63. ASP.NET Configuration<br />Web.Config<br />Similar to app.config in windows<br />Application-wide configuration<br />Provide application settings<br />In XML, so it’s easy to change<br />
  64. 64. Who is the Master?<br />
  65. 65. ASP.NET 2: Master Pages<br />Master pages new concept in ASP.NET 2.0<br />Allows site developers to build master templates for their site's look and feel <br />Put common code shared by all the pages on the master page<br />A page that references a Master Page is called a Content Page.<br />
  66. 66. ASP.NET 2: Master Pages<br />
  67. 67. How to define the Master page<br />At the page level (in the page)<br /><%@ Page Language="C#“<br />MasterPageFile="MySite.Master" %> <br />At the application level (in web.config)<br /><pages masterPageFile="MySite.Master" /> <br />
  68. 68. Validation<br />
  69. 69. ASP.NET: Validation<br />A Validation server control is used to validate the data of an input control. If the data does not pass validation, it will display an error message to the user.<br />
  70. 70. Important Properties:<br />ControlToValidate:The ID of the control that this validator validates. <br />Display: Has three possible values:<br />Dynamic space the control uses isn’t reserved for the control<br />Static space control uses is always reserved<br />None control is invisible<br />EnableClientScript: Validation occurs on the Client’s Browser (default). <br />Text: Displayed when validation fails; often used to put an asterisk or an icon next to the error or for displaying the error message in a validation summary. <br />ASP.NET: Validation<br />
  71. 71. Themes & Skins<br />
  72. 72. ASP.NET 2: Themes & Skins<br />What is a theme?<br />A theme is a collection of property settings that allow you to define the look of pages and controls, and then apply the look consistently across pages in a Web application, across an entire Web application, or across all Web applications on a server.<br />A theme contains:<br />skins, <br />cascading style sheets (CSS),<br />images, <br />and other resources<br />
  73. 73. ASP.NET 2: Themes & Skins<br />What is a skin file?<br />A skin file has the file name extension .skin<br />Belongs to a certain theme<br />Contains property settings for individual controls<br />Contains settings for server controls only<br />
  74. 74. ASP.NET 2: Themes & Skins<br />For Example:<br /><asp:button ID=“btnNew”<br />With css (before skin files were around):<br /><asp:button ID=“btnNew”<br />runat=“server”<br />cssclass=“blueBlackButton”/><br />.blueBlackButton {<br />Background:lightblue;<br />Color:Black; }<br />
  75. 75. ASP.NET 2: Themes & Skins<br />But with Skins, you let the skin do the design work.<br />In the page:<br /><asp:button ID=“btnNew”<br />runat="server" /><br />In the Skin file:<br /><asp:buttonrunat="server" <br />BackColor="lightblue" <br />ForeColor="black" /> <br />
  76. 76. ASP.NET 2: Themes & Skins<br />So, when do we use css files?<br />When you need to style non-server controls, because skin files are only for controls.<br />
  77. 77. Theme File Structure<br />MyWebSite<br />> App_Themes<br /> > BlueTheme<br /> ><br /> > BlueTheme.css <br /> > PinkTheme<br /> ><br /> > PinkTheme.css<br />
  78. 78. Applying Themes<br />Apply a theme to a Web site <br /><configuration> <br /><system.web> <br /><pages theme="ThemeName" /> <br /></system.web><br /></configuration> <br />Apply a theme to an individual page<br /><%@ Page Theme="ThemeName" %> <br />
  79. 79. Done<br />
  80. 80. So who thinks Win forms are better than web forms?<br />
  81. 81. Resources<br />Firebug<br /><br />ASP.NET Webforms<br /><br />ASP.NET MVC<br /><br />
  82. 82. Resources<br />ASP.NET AJAX<br /><br />Ramp up your skills<br /><br />
  83. 83. Resources – ASP.NET<br />Quickstarts<br /><br />Master pages<br /><br />Profiles, Themes and user controls<br /><br />Page lifecycle<br /><br />
  84. 84. Resources – ASP.NET<br />Validation<br /><br />Configuration & Deploying<br /><br />User controls<br /><br />
  85. 85. Resources - Usergroups<br />Silverlight Designer and Developer Network<br /><br />Sydney Deep .NET User Group<br /><br />Newcastle Coders Group<br /><br />Sydney .NET Users Group<br /><br />
  86. 86. 3things…<br /><br /><br /><br />
  87. 87. Thank You!<br />Gateway Court Suite 10 81 - 91 Military Road Neutral Bay, Sydney NSW 2089 AUSTRALIA <br />ABN: 21 069 371 900 <br />Phone: + 61 2 9953 3000 Fax: + 61 2 9953 3105 <br /> <br />