1. Joe Hummel, PhD Dept of Mathematics and Computer Science Lake Forest College hummel@lakeforest.edu http://164.68.21.9/hummel/workshops.htm hummel@lakeforest.edu http://164.68.21.9/hummel/workshops.htm Lecture 5: ASP.NET 2.0 and AJAX Extensions

2. 5-2 5. ASP.NET 2.0 5.1 Deployment Publishing your web application is easy!

3. 5-3 5. ASP.NET 2.0 Example Let's publish our Census Data web application –so it can be viewed by anyone on the internet…

4. 5-4 5. ASP.NET 2.0 Publishing your Web App from Visual Studio Build menu >> Publish Web Site –you can publish directly to a web server (e.g. IIS), or –you can publish to local file system & copy the files yourself –Due to a bug in VS 2005, URL must differ from project name — reason the example is published as http://localhost/CensusData and not http://localhost/CensusDataWebApphttp://localhost/CensusDatahttp://localhost/CensusDataWebApp

5. 5-5 5. ASP.NET 2.0 5.2 Master Pages Masters Pages in ASP.NET 2.0

6. 5-6 5. ASP.NET 2.0 Motivation How to give your web site a common look-and-feel? A very tedious process for a large web site…

7. 5-7 5. ASP.NET 2.0 Solution — Master Pages The idea is that you define a template for site — " Master Page " You then define one or more " content " pages… site.master default.aspx header left pane footer page1.aspxpage2.aspx placeholder page-specificcontent header left pane footer page-specificcontent header footer page-specificcontent header footer

8. 5-8 5. ASP.NET 2.0 Creating a Master Page Much like a standard ASP.NET page, except: –create using Website, Add New Item, Master Page –uses a "Master" directive & and ".master" file extension –add ContentPlaceHolder control(s) where content pages supply content. <asp:ContentPlaceHolder ID="MainContentArea" Runat="server" /> MasterPage.master

9. 5-9 5. ASP.NET 2.0 Creating Content Pages Standard ASP.NET pages where: –create using Website, Add New Item, WebForm, "Select Master page" –page directive contains a "MasterPageFile" attribute –associate Content control with each place holder & supply content <asp:Content ID="Content1" ContentPlaceHolderID="MainContentArea" Runat="server"> Here is some very exciting content... Default.aspx

10. 5-10 5. ASP.NET 2.0 Example A redesigned Census Data web application –multi-page site with master page, common theme, and navigation menu…

11. 5-11 5. ASP.NET 2.0 5.3 Themes Stylesheets for ASP.NET applications

12. 5-12 5. ASP.NET 2.0 Themes Themes allow you to apply common styles across your site: –themes are the WebForms equivalent of stylesheets –themes are applied on the server to set look-and-feel of controls

13. 5-13 5. ASP.NET 2.0 Creating Themes Create an App_Themes directory Create a sub-directory under App_Themes –this sub-dir becomes Theme name Create one or more.skin files within sub-dir –may also include stylesheet files (.css) –may also include resources like images –.skin file contains control declarations with default attributes <asp:button runat="server" borderstyle="Solid" borderwidth="2px" bordercolor="#66ff66" backcolor="#99ffff" /> <asp:calendar runat="server" borderstyle="Solid" borderwidth="2px" bordercolor="#66ff66" backcolor="#99ffff" /> Day.skin

14. 5-14 5. ASP.NET 2.0 Applying Themes Themes can be applied per-page via page directive: Default theme can be specified for all pages via web.config: web.config

15. 5-15 5. ASP.NET 2.0 5.4 Site Navigation Controls for navigating multi-page sites

16. 5-16 5. ASP.NET 2.0 Navigation You can programmatically transfer between pages: ASP.NET 2.0 also provides controls for site navigation: –Menu Traditional desktop-like menu (statically displayed or dynamically updated) –TreeView Hierarchical rendering with images and text –SiteMapPath 'Breadcrumbs' control (as you navigate, shows your path…) protected void cmdLogout_Click(object sender, EventArgs e) { this.Response.Redirect("Login.aspx", true /*redirect now*/); } protected void cmdLogout_Click(object sender, EventArgs e) { this.Response.Redirect("Login.aspx", true /*redirect now*/); }

17. 5-17 5. ASP.NET 2.0 Navigation Controls All three controls are driven by an XML-based.sitemap file…... web.sitemap

18. 5-18 5. ASP.NET 2.0 Using the Nav Controls First, create the.sitemap file: –Website menu, Add New Item, Site Map –Define menu structure in web.sitemap file using XML: a flat menu is defined by 1 level of nested entries a hierarchical menu is defined by nested entries Add a SiteMapDataSource control to your (master) page –drag-and-drop from Toolbox… Add one of the Navigation controls to your (master) page –set DataSourceID property to instance of SiteMapDataSource control –[ for SiteMapPath it binds automatically, there is no such property ]

19. 5-19 5. ASP.NET 2.0 Example A simple flat menu displayed using all 3 controls… Menu Orientation: Horizontal StaticDisplayLevels: 2 TreeView SiteMapPath

20. 5-20 5. ASP.NET 2.0 5.5 AJAX for ASP.NET What is AJAX? AJAX Extensions for ASP.NET 2.0

21. 5-21 5. ASP.NET 2.0 Motivation The typical web application is synchronous –the client makes a request, *waits* for server to respond… –*not* always the best user experience… Web server client browser get "page.aspx" Web Page waiting…

22. 5-22 5. ASP.NET 2.0 Solution The solution is more asynchrony… –decouple the client from the server as much as possible How? –more client-side processing –asynchronous communication with server Web server client browser get more data… Web Page The UI is responding to me, while in the background…

23. 5-23 5. ASP.NET 2.0 Examples Google makes excellent use of AJAX: –Google maps:http://maps.google.comhttp://maps.google.com –Google mail:http://mail.google.comhttp://mail.google.com –Google calendar:http://calendar.google.comhttp://calendar.google.com Other popular AJAX-enabled sites: –Live Search:http://local.live.comhttp://local.live.com –Kayak:http://www.kayak.com (updating constraints)http://www.kayak.com –Flickr:http://flickr.com (photostream)http://flickr.com –Panic:http://www.panic.com/goods/ (drag to cart!)http://www.panic.com/goods/

24. 5-24 5. ASP.NET 2.0 What exactly is AJAX? AJAX == Asynchronous JavaScript and XML AJAX is really a set of technologies working together: –XHTML and CSS for markup –DOM for display & interaction –XML and XSLT for data interchange & manipulation –JSON for marshalling objects –XMLHttpRequest for asynchronous communication –JavaScript for programming it all

25. 5-25 5. ASP.NET 2.0 AJAX Extensions for ASP.NET "Atlas" was the internal code name Offers AJAX via typical ASP.NET development style –control-based, server-side model –no client-side JavaScript required –much like Master page concept with placeholders that do all the work… The benefit of AJAX without client-side programming! Atlas Server Framework Atlas Server Controls App Services Bridge Web Services Bridge

26. 5-26 5. ASP.NET 2.0 How? UpdatePanel… The UpdatePanel control offers built-in AJAX functionality –a container that enables updatable region & asynchronous post-backs –controls placed within UpdatePanel control will cause an async post- back, not a full postback –no programming required on client nor server! Browser Trigger Fires for the Panel ASP.NET 2.0 APX Page Postback event fires the usual way! Contents of UpdatePanel regions returned Only “updatePanel” region updated on the client Asynchronous Postback

27. 5-27 5. ASP.NET 2.0 Creating an AJAX-enabled web app Install AJAX Extensions (http://ajax.asp.net/)http://ajax.asp.net/ Create a new web site of type ASP.NET AJAX-enabled Web Site –only difference is web.config Build web application as before… –drag-drop controls, master pages, etc. –drop controls inside UpdatePanel for AJAX-enabled behavior…

28. 5-28 5. ASP.NET 2.0 Example AJAX-enabled Census Data application –looks the same, but no more post-back hesitations…

29. 5-29 5. ASP.NET 2.0 5.6 What's Next? Lecture 6…

30. 5-30 5. ASP.NET 2.0 This page intentionally left blank