philly.NET Hands-On MVC Razor, HTML5, CSS3

Download Report

Transcript philly.NET Hands-On MVC Razor, HTML5, CSS3 

philly.NET Hands-On
MVC Razor, HTML5, CSS3
Rob Keiser, Bill Wolff
Hands-on Labs
Web
Development
Series
March 13
 Razor, HTML5, CSS3, MVC Controllers
April 10
 jQuery, plug-ins
May 8?
 Templating, jsRender, Knockout
June 12
 Page fragments, User controls, Scaffolding
July 10
 REST (consuming data), webAPI (providing data)
August 14
 Single Page Applications
September 11
 SignalR
 Model
 Contains the data to display
 Represent as classes
 Connect to database as needed
MVC
 View
 Display logic to render content
 Render only, no data storage or logic
 Controller
 Associated with URL structure
 Logic determines which view to display using a model
 Application
 Properties
 References
 Project Folders
MVC Project






App_Data
Content
Controllers
Models
Scripts
Views
 Configuration
 Global.asax
 Packages.config
 Web.config
 Shared Layouts
 Stores pages across all
 _layout.cshtml is like a master page
 _ViewStart.cshtml code added to each page
 HTML Helpers
Razor
 Render links and other tricky markup
 Pass information from master to content
 @ViewBag
 Content Placeholder
 @RenderBody()
 Partial Pages
 @RenderPage(“somepage.cshtml”)
 Syntax
Razor






Code blocks enclosed in @{ … }
Inline expressions start with @
End statements with semi-colon;
Declare variables with var or type
Enclose strings in quotes
C# is case sensitive
 Views
 One folder per controller, multiple views
 Typically cshtml files
 Home folder stores home (Index.cshtml) and about pages
 100+ specifications in W3C provides device independence
 IE9+, Chrome 6+, Firefox 3.6+, Safari 5+, most mobile devices
 Simplified declaration
 <!DOCTYPE html>
 Less need for plug-ins
HTML5




<canvas> for 2d drawing and inline SVG for vector graphics
<audio> and <source> audio playback
<video> and <source> media playback
Drag and drop support
 HTML5 applications






Local data storage without cookies, file access, SQL
Cache provides offline browsing, faster load times
XHTMLHttpRequest2
Javascript workers run in background
Server-side events
Geolocation can determine latitude and longitude
 Semantic layout
 <header> <footer> <hgroup> <nav> <progress>
 <section> <article> <aside> <summary> <details> <figure>
<figcaption> <time> <command> <dialog>
 Forms
HTML5
 <input> color, date, datetime, datetime-local, email, month,
number, range, search, tel, time, url, week
 <datalist> for <input> values with autocomplete
 <keygen> for authentication and certificates
 <output> for calculations
 <form> and <input> autocomplete
 <input> autofocus, formaction, list, min, max, multiple, pattern,
placeholder, required, step
 Selectors are most important to learn
 Many new styles are not supported yet
 animation with @keyframes
CSS3
 border-radius
 box-shadow
 Overflow
 Rotation
 Opacity
 Bookmark
 Hyphens
 Grid
 Target
 Columns
CSS3
 voice
 Text-shadow
 Transform
 Perspective
 Transition
 nav