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
0
