ASP.NET MVC - In the Wild


Published on

Real world example of using ExtJS in an MVC application.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

ASP.NET MVC - In the Wild

  1. 1. ASP.NET MVC In The Wild North Florida .NET User Group March 10 th , 2011 Jonathan Bates Batener Technology Solutions, Inc. [email_address] Twitter: @bates_jonathan
  2. 2. ASP.NET MVC – What is it? <ul><li>ASP.NET MVC is the latest web application framework from the boys in Redmond. As the name implies, it implements the model-view-controller (MVC) pattern and leverages .NET framework version 3.5 and better. You can develop ASP.NET MVC solutions on Visual Studio 2008 and 2010. It is in version 3 now. </li></ul>
  3. 3. MVC – What is it? <ul><li>MVC is the latest brand new software pattern that has been around since 1979 . It allows applications to be composed of three distinct areas of responsibility. </li></ul><ul><li>Model – State / Database / Persistence </li></ul><ul><li>Controller – Changes the Model, acts as intermediary between the Model and the… </li></ul><ul><li>View – Input for users / Output to browser </li></ul>
  4. 4. What is tonight about? <ul><li>A walkthrough of selected features from a commercial ASP.NET MVC portal application. </li></ul><ul><li>A look at the integration of third party features into this application, specifically a RIA suite and GIS data. </li></ul>
  5. 5. What is PowerMaps © ? <ul><li>DEMO </li></ul>
  6. 6. Breaking Down PowerMaps © <ul><li>How does it work? </li></ul><ul><ul><ul><li>1 controller to host the page and shared page functions </li></ul></ul></ul><ul><ul><ul><li>A controller per map filter, using a common interface </li></ul></ul></ul><ul><ul><ul><li>ASP.NET MVC User Controls hosting ExtJS controls </li></ul></ul></ul><ul><ul><ul><li>The Google Maps API </li></ul></ul></ul>
  7. 7. Breaking Down PowerMaps © <ul><li>ASP.NET MVC </li></ul><ul><ul><ul><li>One controller to act as a page host, as well as a common endpoint for common items, like ZIP Code boundary information </li></ul></ul></ul><ul><ul><ul><li>A custom model binder to interpret posted data and transform into the appropriate model per filter. </li></ul></ul></ul><ul><ul><ul><li>A controller per filter with specific implementations for GetMapData, GetColumnInfo, et cetera. </li></ul></ul></ul>
  8. 8. Breaking Down PowerMaps © <ul><li>What is ExtJS </li></ul><ul><ul><ul><li>A RIA (Rich Internet Application) JavaScript component set. </li></ul></ul></ul><ul><ul><ul><li>It allows for the construction of common components (period selector, filter container, grid container, et cetera). </li></ul></ul></ul><ul><ul><ul><li>It allows for the use of extensions and plugins to the base code library. </li></ul></ul></ul><ul><ul><ul><li>Embraces JSON heavily (ask me about xtype versus new). </li></ul></ul></ul>
  9. 9. Breaking Down PowerMaps © <ul><li>Google Maps API </li></ul><ul><ul><ul><li>A JavaScript library for GIS data. </li></ul></ul></ul><ul><ul><ul><li>Provides everything you need to be able to display GIS data and related items (areas, routes, et cetera). </li></ul></ul></ul>
  10. 10. Tips, Gotchas, Discoveries <ul><li>Use NewtonSoft (JSON.NET). It will save your life on Date parsing. </li></ul><ul><li>Use Cheap and easy way to find format mistakes in your JS code. </li></ul><ul><li>ExtJS has a steep learning curve, but it is eased if you embrace JSON. </li></ul><ul><li>ASP.NET MVC has enough infrastructural pieces in place to implement a very clean and focused code philosophy. </li></ul>
  11. 11. Tips, Gotchas, Discoveries – cont. <ul><li>ASP.NET MVC’s ActionResult and the ability to return JSON data on the fly is invaluable to JavaScript RIA solutions. </li></ul><ul><li>Taking advantage of JSON ActionResults and ExtJS xtype, you can build controls on the server and stream them to the client. </li></ul>
  12. 12. Closing Thoughts <ul><ul><ul><li>Sencha’s ExtJS Documentation site (written in ExtJS) http :// / </li></ul></ul></ul><ul><ul><ul><li>Sencha’s ExtJS Demos http :// http :// </li></ul></ul></ul><ul><ul><ul><li>VinylFox’s Site http :// / </li></ul></ul></ul><ul><ul><ul><li>MSDN, March 2011 http :// </li></ul></ul></ul><ul><ul><ul><li>StackOverflow – </li></ul></ul></ul><ul><ul><ul><li>Google Maps JavaScript API V3 http :// / </li></ul></ul></ul>
  13. 13. Thank you for your time! <ul><li>Where to go from here? </li></ul><ul><ul><li>Exploration of other ASP.NET MVC related items </li></ul></ul><ul><ul><ul><li>DisplayFor / EditorFor Templates </li></ul></ul></ul><ul><ul><ul><li>IoC / DI Containers </li></ul></ul></ul><ul><ul><ul><li>Testing (Nunit, WatiN, Jasmine) </li></ul></ul></ul><ul><ul><ul><li>jQuery Validation </li></ul></ul></ul>Jonathan Bates Batener Technology Solutions, Inc. [email_address] Twitter: @bates_jonathan