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

• Microsoft certified trainer www.devreach.com

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

www.devreach.com

using the power of ASP.NET

The “Page” Lifecycle of MVC Model www.devreach.com

View Controller View Model Controller

The “Page” Lifecycle of MVC Controller fetches data from the model Request is routed to the controller

Model

2 1

Controller

Request 3 Controller formats the data and passes it to the view

View

4 Response (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

Calling functions (reusable code) Code segments and loops

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 21 st 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 () { ... });

Ajax

– $.load(), $.get(), $.post(), $.ajax() < div id ="mainContainer" > < h2 > Header < div class ="content"> < p > Paragraph 1 < p > Paragraph 2

DOM Manipulation

– $("table > tbody > tr:even").css("background", "pink");

Effects

– $("#btnSubmit").fadeOut("slow").fadeIn("slow"); 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

.

VS

ASP.NET Web 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