Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ASP.NET MVC - In the Wild

3,996 views

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

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 jsBeautifer.org. 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 ://dev.sencha.com/deploy/dev/docs/http://dev.sencha.com/deploy/dev/docs / </li></ul></ul></ul><ul><ul><ul><li>Sencha’s ExtJS Demos http :// dev.sencha.com/deploy/dev/examples http :// www.sencha.com/products/extjs/examples </li></ul></ul></ul><ul><ul><ul><li>VinylFox’s Site http ://www.vinylfox.com / </li></ul></ul></ul><ul><ul><ul><li>MSDN, March 2011 http :// msdn.microsoft.com/en-us/magazine/gg650660.aspx </li></ul></ul></ul><ul><ul><ul><li>StackOverflow – http://www.stackoverflow.com </li></ul></ul></ul><ul><ul><ul><li>Google Maps JavaScript API V3 http ://code.google.com/apis/maps/documentation/javascript / </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

×