Building rich front-end with

wrendeceitInternet and Web Development

Oct 21, 2013 (4 years and 19 days ago)

89 views

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

Hajan Selmani


Model
-
View
-
Controller


Separation of Concerns


Pattern that matches the native web

ASP.NET MVC Implementation

Hajan Selmani

CONTROLLER

VIEW

MODEL

Request hits
the controller

Controller asks
Model for data

Model gives data
to Controller

Controller prepares
data for presentation
and passes them to
view

View renders HTML
which is then send to the
client

MVC Folders in Solution Explorer

Hajan Selmani

Controller

View


(presentation)

Model

(data)

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: