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
 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
Introduction




The buzzword HTML5 and all about it
The godfather JavaScript and it’s libraries
ASP.NET MVC4
Current web development trends
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
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)
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
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
Hajan Selmani
MVC Pattern
• Model-View-Controller
• Separation of Concerns
• Pattern that matches the native web
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
Hajan Selmani
MVC Folders in Solution Explorer
Controller
Model
(data)
View
(presentation)
Hajan Selmani
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
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
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
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
DEMO
 Technologies we will showcase/use:





Visual Studio 2012
ASP.NET MVC4
JavaScript & jQuery
HTML5, HTML, CSS
NuGet Package Manager
 Let’s play
Thanks to our Sponsors:
Diamond Sponsor:
Platinum Sponsors:
Gold Sponsors:
Swag Sponsors:
Media Partners: