Transcript Session Title

This session is available at:
http://bit.ly/devreach-2012-idof
The New Face of ASP.NET
ASP.NET MVC, Razor, and
jQuery
Ido Flatow | Senior Architect | Sela
Group
@idoFlatow | http://bit.ly/flatowblog
The History of Web Development
ASP.NET 1.1 (2002-2003)
Does the job, but you need to get
your hands dirty
The History of Web Development
ASP.NET 2.0 (2005)
Stable platform with
many new features
The History of Web Development
ASP.NET 3.5 (2007-2008)
Improved performance,
more accessorized
The Present of Web Development
ASP.NET 4/4.5 (2010-2012)
A whole new ball game
About Me
• Senior architect, Sela Group
• Co-Author: ASP.NET 4
Programmer’s Reference
• Co-Author of Microsoft’s official
WCF 4 course
• Microsoft MVP for Connected
Systems Development
• Focus on: ASP.NET, WCF,
Window Azure platform, and IIS
7.5
• www.devreach.com
Microsoft certified trainer
ASP.NET MVC is Not…
• The new version of ASP.NET Web Forms
• Yet another WCSF (Web Client Software
Factory)
• Going to eliminate JavaScript from your
code
• Able to use ASP.NET web controls
• An isolated framework
• Hard to use
www.devreach.com
What ASP.NET MVC is All
About…
• Apparently, a new Web Project
type
for ASP.NET
• Clear separation: Model, View,
Controller
• Using friendly URLs
• Giving full control over HTML and
JavaScript
• Making testing easier and
comprehensive
A new framework for building web applications
using the power of ASP.NET
www.devreach.com
The “Page” Lifecycle of MVC
Model
View
Controller
Model
www.devreach.com
View
Controller
The “Page” Lifecycle of MVC
Request is routed to
the controller
Controller fetches
data from the model
2
Model
Browser
1
Request
Controller
Controller formats the data
and passes it to the view
3
View
4Response (HTML, JSON, Image…)
View renders output
(usually HTML)
and returns it to the client
Model
View
Controller
My First ASP.NET MVC
Application
ASP.NET MVC Main Features
• Productivity
– Strong-typed helpers
– UI validation made easy with data annotations
– Easy to use templates for display and edit
• Security
– Automatic HTML encoding
– Anti-Forgery (CSRF) improvements
• Performance
– Support for AsyncController
– Framework tuned for performance
• Extensibility
– Use the view engine you want
– Ability to replace almost everything in the pipeline
www.devreach.com
ASP.NET MVC Main Features
Razor? Is This Microsoft or
Gillette?
• ASP.NET MVC uses view engines
• Use the default ASPX/ASCX <% %>
• Or … use some other view engine
– Razor
– NHaml
– Spark
• Razor is …
– Compact
– Easy to learn
– Extensible
www.devreach.com
A Picture is Worth a Thousand
Words
A Picture is Worth a Thousand
Words
Expression
Long expression
Raw expression
Escaping
the @ sign
Comments
Conditions and
HTML inside code
Conditions and HTML inside code
Code segments
and loops
Calling functions (reusable code)
Back to the Demo…
What is jQuery? It’s Fantastic!
• Fast and concise JavaScript library
• Simplifies your code
–
–
–
–
•
•
•
•
•
DOM traversing
Event handling
Animation
Ajax interaction
Included in ASP.NET 4 project templates
Cross browser (IE/FF/Safari/Opera/Chrome)
Extensible through plugins
Write less, do more!
It just works!
www.devreach.com
18
jQuery Around the World
http://trends.builtwith.com/javascript
(September 21st 2012)
60 Minutes on jQuery
www.devreach.com
60 Seconds on jQuery
• Selectors – the $ token
–
–
–
–
Element - $("div")
ID - $("#mainContainer")
Class - $(".content")
CSS3 Selector - $("div > p:odd")
• Events
– $(".link").click(function () { ... });
<div id="mainContainer"
>
<h2>Header</h2>
<div class="content">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
</div>
• DOM Manipulation
– $("table > tbody > tr:even").css("background", "pink");
• Effects
– $("#btnSubmit").fadeOut("slow").fadeIn("slow");
• Ajax
– $.load(), $.get(), $.post(), $.ajax()
www.devreach.com
Back to the Demo…
ASP.NET MVC and ASP.NET Web
Forms
ASP.NET MVC
• Better testing
automation
• Enforces separation
of concerns
• No evil ViewState
that increase page
size
• Full control over
markup
ASP.NET Web
Forms
• A more familiar
•
VS
.
•
•
•
technology
Many server controls
that abstract UI and
logic
Supports a WYSIWYG
designer
Less use of JavaScript
(some of the time)
Evil ViewState
After 10 Years of Web Forms…
•
•
•
•
Better web application architecture
Better client side JavaScript libraries
Better way to write mixed-code
Better way to test our applications
• It’s simply a better web …
• We can only guess what the future
holds…
www.devreach.com
The Future of Web Development???
Fast, Slick, and Cool
Where to Go?
This Session - http://bit.ly/devreach-2012-idof
• Blogs
– http://blogs.msdn.com/b/webdev
– http://www.hanselman.com/blog
– http://encosia.com
• Other Sites
–
–
–
–
http://asp.net/mvc
http://aspnet.uservoice.com/forums/41201-asp-net-mvc
http://www.asp.net/vnext
http://vimeo.com/43659037 (1-hour video on Fiddler)
• My Info
– Email: [email protected]
– Blog: http://bit.ly/flatowblog
– Twitter: @idoFlatow
www.devreach.com