The New Face of ASP.NET ASP.NET MVC, Razor, and jQuery Ido Flatow | Senior Architect | Sela | This session is available at:

The History of Web Development ASP.NET 1.1 ( ) 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 ( ) Improved performance, more accessorized

The Present of Web Development ASP.NET 4/4.5 ( ) 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

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

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

The “Page” Lifecycle of MVC Model Controller View Model Controller View

Model Controller View Model View Controller Browser Request is routed to the controller Controller fetches data from the model Controller formats the data and passes it to the view View renders output (usually HTML) and returns it to the client Request Data Formatted Data Response (HTML, JSON, Image…)

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

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

A Picture is Worth a Thousand Words

Expression Long expression Raw expression Escaping sign Comments Conditions and HTML inside code Code segments and loops Calling functions (reusable code) A Picture is Worth a Thousand Words Code segments and loops Escaping sign Long expression Expression

Back to the Demo…

What is jQuery? It’s Fantastic! 18 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!

jQuery Around the World (September 21 st 2012)

60 Minutes on jQuery

60 Seconds on jQuery Selectors – the $ token –Element - $("div") –ID - $("#mainContainer") –Class - $(".content") –CSS3 Selector - $("div > p:odd") Events –$(".link").click(function () {... }); DOM Manipulation –$("table > tbody > tr:even").css("background", "pink"); Effects –$("#btnSubmit").fadeOut("slow").fadeIn("slow"); Ajax –$.load(), $.get(), $.post(), $.ajax() Header Paragraph 1 Paragraph 2

Back to the Demo…

ASP.NET MVC and ASP.NET Web Forms ASP.NET MVCASP.NET Web Forms A more familiar technology Many server controls that abstract UI and logic Supports a WYSIWYG designer Less use of JavaScript (some of the time) Evil ViewState Better testing automation Enforces separation of concerns No evil ViewState that increase page size Full control over markup VS.

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…

The Future of Web Development??? Fast, Slick, and Cool

Where to Go? This Session - Blogs – – – Other Sites – – – – (1-hour video on Fiddler) My Info – –Blog: