1 / 16

Building rich front-end with jQuery, HTML5 and ASP.NET MVC

Building rich front-end with jQuery, HTML5 and ASP.NET MVC. Hajan Selmani, MSc. Founder of HASELT Acting CTO at 3PDevelopment Code Academy Coordinator at SEDC Microsoft MVP ASP.NET/IIS. Presentation Agenda. Introduction Current development progress in all three musketeers

chaman
Download Presentation

Building rich front-end with jQuery, HTML5 and ASP.NET MVC

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. Building rich front-end with jQuery, HTML5 and ASP.NET MVC Hajan Selmani, MSc.Founder of HASELTActing CTO at 3PDevelopmentCode Academy Coordinator at SEDC Microsoft MVP ASP.NET/IIS

  2. Presentation Agenda • Introduction • Current development progress in all three musketeers • Combining all three and the benefits • Practical Showcase - DEMO • ASP.NET MVC Restfulness • Magic of Model Binding • jQuery Validations and HTML5 semantic markup • Building some fancy feature

  3. Introduction • The buzzword HTML5 and all about it • The godfather JavaScript and it’s libraries • ASP.NET MVC4 • Current web development trends

  4. HTML5 • HTML5 is the latest HTML version that brings a lot new stuff in the HTML markup • HTML5 is becoming more and more standardized • Browsers are getting all closer to supporting all its features • Semantic markup should be used as a main way of writing HTML in today’s webs

  5. jQuery • The most popular JavaScript library today • Invented by John Resig, back in 2006 • jQuery became quite mature library • 1.9.1 is latest stable version • jQuery UI Library (current release v1.10.2) • jQuery Mobile (current release v1.3)

  6. ASP.NET MVC • The most popular ASP.NET Framework • Implements the Model-View-Controller pattern • Current version ASP.NET MVC4 • RESTful, a good friend of client-side libraries

  7. Hajan Selmani MVC = Model View Controller • Invented years ago… • Pattern that is very close to the natural web • Three components that have totally different responsibilities • Enables easily achieving loosely coupled and testable code • Implemented in many popular frameworks • Microsoft ASP.NET MVC is Implementation of MVC Pattern

  8. Hajan Selmani MVC Pattern • Model-View-Controller • Separation of Concerns • Pattern that matches the native web

  9. Hajan Selmani ASP.NET MVC Implementation Request hits the controller Controller asks Model for data CONTROLLER MODEL Controller prepares data for presentation and passes them to view Model gives data to Controller VIEW View renders HTML which is then send to the client

  10. Hajan Selmani MVC Folders in Solution Explorer View(presentation) Model (data) Controller

  11. Ajax, JavaScript and jQuery with MVC • Client-side scripting is one of the best MVC friends • MVC is RESTful, therefore Ajax communicates with MVC very easily • jQuery library is by default included in all ASP.NET Projects

  12. jQuery(“Selectors”) with MVC • Much easier to use with MVC than WebForms • jQuery selectors help us additionally improve the cleverness of our application • Makes the application work more dynamically • Can easily mix with Razor

  13. jQuery Ajax with MVC • Replacement of the standard model of navigating through views to implement default functionality • Use: • $.post • $.get • $.load • $.ajax low level interface • Use JsonResult as suitable method for returning JSON to Ajax requests

  14. All three together • Combining all three technologies together, we have everything needed to build incredible, front-end rich web applications • ASP.NET MVC “talks” JSON pretty well, and being RESTful helps easily consuming data on client side • jQuery is one of the best ways to manipulate data on client-side • HTML5 semantic markup gives meaning on your markup

  15. DEMO • Technologies we will showcase/use: • Visual Studio 2012 • ASP.NET MVC4 • JavaScript & jQuery • HTML5, HTML, CSS • NuGet Package Manager • Let’s play

  16. Thanks to our Sponsors: Diamond Sponsor: Platinum Sponsors: Gold Sponsors: Swag Sponsors: Media Partners:

More Related