Presentation is loading. Please wait.

Presentation is loading. Please wait.

Philly.NET Hands-On MVC Razor, HTML5, CSS3 Rob Keiser, Bill Wolff.

Similar presentations


Presentation on theme: "Philly.NET Hands-On MVC Razor, HTML5, CSS3 Rob Keiser, Bill Wolff."— Presentation transcript:

1 philly.NET Hands-On MVC Razor, HTML5, CSS3 Rob Keiser, Bill Wolff

2 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

3 MVC  Model  Contains the data to display  Represent as classes  Connect to database as needed  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

4 MVC Project  Application  Properties  References  Project Folders  App_Data  Content  Controllers  Models  Scripts  Views  Configuration  Global.asax  Packages.config  Web.config

5 Razor  Shared Layouts  Stores pages across all  _layout.cshtml is like a master page  _ViewStart.cshtml code added to each page  HTML Helpers  Render links and other tricky markup  Pass information from master to content  @ViewBag  Content Placeholder  @RenderBody()  Partial Pages  @RenderPage(“somepage.cshtml”)

6 Razor  Syntax  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

7 HTML5  100+ specifications in W3C provides device independence  IE9+, Chrome 6+, Firefox 3.6+, Safari 5+, most mobile devices  Simplified declaration   Less need for plug-ins  for 2d drawing and inline SVG for vector graphics  and audio playback  and 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

8 HTML5  Semantic layout   Forms  color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week  for values with autocomplete  for authentication and certificates  for calculations  and autocomplete  autofocus, formaction, list, min, max, multiple, pattern, placeholder, required, step

9 CSS3  Selectors are most important to learn  Many new styles are not supported yet  animation with @keyframes  border-radius  box-shadow  Overflow  Rotation  Opacity  Bookmark

10 CSS3  Hyphens  Grid  Target  Columns  voice  Text-shadow  Transform  Perspective  Transition  nav


Download ppt "Philly.NET Hands-On MVC Razor, HTML5, CSS3 Rob Keiser, Bill Wolff."

Similar presentations


Ads by Google