1 / 30

Real World ASP.NET AJAX

Real World ASP.NET AJAX. Donald Ho imason Incorporated donald.ho@imason.com. Scott Howlett Microsoft Regional Director scott.howlett@imason.com. Where Are We?. Agenda. OurFaves.com Overview A Data-bound Scenario Architecture Data-bound Scenario & Demo Update Panel & Demo

sachi
Download Presentation

Real World ASP.NET AJAX

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. Real World ASP.NET AJAX Donald Ho imason Incorporated donald.ho@imason.com Scott Howlett Microsoft Regional Director scott.howlett@imason.com

  2. Where Are We?

  3. Agenda • OurFaves.com Overview • A Data-bound Scenario • Architecture • Data-bound Scenario & Demo • Update Panel & Demo • Update Panel+ & Demo • Other Microsoft AJAX framework Controls • Making your own web service calls • Rendering controls with a web service • Putting it all together

  4. OurFaves.com

  5. OurFaves.com

  6. Agenda • OurFaves.com Overview • A Data-bound Scenario • Architecture • Data-bound Scenario & Demo • Update Panel & Demo • Update Panel+ & Demo • Other Microsoft AJAX framework Controls • Making your own web service calls • Rendering controls with a web service • Putting it all together

  7. A Data-Bound Scenario • We want to show a list of items with associated data • Each “fave” list item contains the following: • Text • Hyperlinks • Pictures • ASP.NET postback functionality • Javascript functionality • Example: Sounds like a job suited to a customized data-bound list – the ASP.NET Repeater

  8. Agenda • OurFaves.com Overview • A Data-bound Scenario • Architecture • Data-bound Scenario Demo • Update Panel & Demo • Update Panel+ & Demo • Other Microsoft AJAX framework Controls • Making your own web service calls • Rendering controls with a web service • Putting it all together

  9. A Typical Data-bound ScenarioOverview of Architecture • 3-Tier Model: Presentation Tier, Business Logic Tier and Data Tier • 1 Caveat: Extra Web services layer for AJAX, which will get into later • We will only examine the Web Services and Presentation tiers Web Services Tier Database Presentation Tier Business Logic Tier

  10. Agenda • OurFaves.com Overview • A Data-bound Scenario • Architecture • Data-bound Scenario Demo • Update Panel & Demo • Update Panel+ & Demo • Other Microsoft AJAX framework Controls • Making your own web service calls • Rendering controls with a web service • Putting it all together

  11. Repeater in a Data-bound Scenario

  12. Agenda • OurFaves.com Overview • A Data-bound Scenario • Architecture • Data-bound Scenario & Demo • Update Panel & Demo • Update Panel+ & Demo • Other Microsoft AJAX framework Controls • Making your own web service calls • Rendering controls with a web service • Putting it all together

  13. Update Panel • The core control of the Microsoft Ajax Framework • Allows for a partial page refresh – meaning only the sections of the page you specify will be refreshed • How it works: Queue up the demo!

  14. UpdatePanel Control

  15. Agenda • OurFaves.com Overview • A Data-bound Scenario • Architecture • Data-bound Scenario & Demo • Update Panel & Demo • Update Panel+ & Demo • Other Microsoft AJAX framework Controls • Making your own web service calls • Rendering controls with a web service • Putting it all together

  16. UpdatePanel ControlAdditional Features • Also allows for customizability in its behaviour and how partial postbacks are triggered • By default, postbacks within an UpdatePanel trigger a partial page refresh • Triggers outside the UpdatePanel may also fire the partial page refresh

  17. UpdatePanel Control with Additional Features

  18. Agenda • OurFaves.com Overview • A Data-bound Scenario • Architecture • Data-bound Scenario & Demo • Update Panel & Demo • Update Panel+ & Demo • Other Microsoft AJAX framework Controls • Making your own web service calls • Rendering controls with a web service • Putting it all together

  19. Other ASP.NET AJAX ControlsASP.NET Futures & Toolkit • Aside from the UpdatePanel control, which is contained in the base release, there are many controls available separately from the ASP.NET Futures and ASP.NET AJAX Toolkit • These include the AutoComplete, Calendar, and HoverMenu controls • You can find these at ajax.asp.net

  20. Agenda • OurFaves.com Overview • A Data-bound Scenario • Architecture • Data-bound Scenario & Demo • Update Panel & Demo • Update Panel+ & Demo • Other Microsoft AJAX framework Controls • Making your own web service calls • Rendering controls with a web service • Putting it all together

  21. Making Your Own Web Service Calls • In addition to the controls available out of the box, there is the capability to build your own AJAX functionality • This is aided greatly by the AJAX framework, specifically the ScriptManager control, which enables you to call strongly-typed Web services from JavaScript • This means there is no need to write your own code to handle the Web service call, it has nearly all been done for you

  22. Making Your Own Web Service CallsWhy Make Your Own Calls? • Though the UpdatePanel and other controls, ASP.NET AJAX does offer a powerful way to make AJAX calls there are two main reasons to make your own calls: • There is some inherent performance overhead when using an UpdatePanel control as compared with a traditional AJAX call • Performance hit due to data passed in a normal ASP.NET postback such as viewstate is also passed in a partial page postback • Sometimes, the built-in controls do not have required functionality

  23. Agenda • OurFaves.com Overview • A Data-bound Scenario • Architecture • Data-bound Scenario & Demo • Update Panel & Demo • Update Panel+ & Demo • Other Microsoft AJAX framework Controls • Making your own web service calls • Rendering controls with a web service • Putting it all together

  24. Controls and Web Services • Question: So how can you make a Web service call and continue to use your written controls? • Scott Guthrie made a useful post in his blog to solve this exact problem • The code described in his post renders a control during the Web service call and returns HTML for the JavaScript to bind to your presentation element • Code can be found at his blog (weblogs.asp.net/scottgu)

  25. Agenda • OurFaves.com Overview • A Data-bound Scenario • Architecture • Data-bound Scenario & Demo • Update Panel & Demo • Update Panel+ & Demo • Other Microsoft AJAX framework Controls • Making your own web service calls • Rendering controls with a web service • Putting it all together

  26. Viewmanager & AJAX without an UpdatePanel Control

  27. Coming Up Next!

  28. Your Feedback Matters! • Your evaluation form will be delivered to you via email after the event (save paper!) • The email will come from wwevents@microsoft.com • Everyone who completes an evaluation is entered to win an Xbox 360 • Feedback will be used to improve the event for next year

More Related