Post on 11-Jan-2016
Learning WebMatrix: Part 2 of 3Akber Alwanihttp://twitter.com/epdotnet]
Part 1What is WebMatrix?Razor SyntaxDatabase AccessWebGrid
Part 2LayoutsThemesHelpers
Package Manager, Facebook, PayPal and more
MembershipRouting
Part 3Building HelpersWebMatrix and OSS Web AppsPublishing your website or web appHow to “grow up” to Visual Studio 2010 and ASP.NET MVCRoadmap
Agenda
Don’t repeat yourself!Define one layout and use it across your website
Layouts make organizing your pages easier
Layout.cshtml
Page 1
Page 2
Page 3
1. Define your Layout2. Reference it in your pages
Layout Syntax
<html> <head> <title>Simple Layout</title> </head> <body> @RenderBody() </body></html>
/Shared/_Layout.cshtml
@{ Layout = "/Shared/_Layout.cshtml";}
<p> My content goes here</p>
MyPage.cshtml
Sections allow you to define areas of content that change between pages but need to be included in a layout
Use Sections to organize your pages
<html> <head> <title>Simple Layout</title> </head> <body> @RenderSection("Menu") @RenderBody() </body></html>
/Shared/_Layout.cshtml
@{ Layout = "/Shared/_Layout.cshtml";}
@section Menu { <ul id="pageMenu">
<li>Option 1</li><li>Option 2</li>
</ul>}<p> My content goes here</p>
MyPage.cshtml
RenderPage() helps you reuse markup and code that doesn’t change
Use RenderPage to organize pages that don’t change
<html> <head> <title>Simple Layout</title> </head> <body> @RenderSection("Menu") @RenderBody() @RenderPage("/Shared/_Footer.cshtml") </body></html>
/Shared/_Layout.cshtml
<div class="footer"> © 2010 Contoso</div>
/Shared/_Footer.cshtml
LAYOUTSDemonstration
Themes allow you to use different designs for your websiteYour users can switch between themes
What are Themes?
Arrange your themes in App_Themes FolderRegister the theme in your app_startIf WebMatrix doesn’t find the resources for a theme, it uses the default resource
Using Themes
@{ Themes.Initialize("~/App_Themes","_Default");}
Themes can override and inherit from a base stylesheet so you don’t repeat yourself
Using Themes with stylesheets
body { background-color:#EEEEEE; color:#555555;}
/template/base.css
body { background-color:#0000AA; font-family:"Courier New";}
/template/foo.css?
THEMESDemonstration
Helpers make it easy to quickly add commonly used functionality into your websitesHelpers are designed to make your life easierSome examples:
FacebookTwitterPayPalUserVoiceODataWindows Azure StorageAnd many more…
What are Helpers?
You can think of Helpers like this:
Helpers fit into two categories
HTML Helpers
API Helpers
Make is faster and easier to render commonly used markup to the page.
Examples: Facebook, Twitter
Make is faster and easier to call complex APIs from your website.
Examples: PayPal, OData, Windows Azure Storage
There are two ways to install Helpers in your website1. Package Manager2. Manual download
Adding Helpers to your website
1. Create a blank website in WebMatrix
2. Run your website and visit _admin
3. Select and install Helpers
Installing Helpers using Package Manager
/_admin Facebook Helper installed
Add social capabilities to your website with the WebMatrix Helper for FacebookThere are many more helpers available for WebMatrix
Make your website social
@FacebookSocialPlugins.Comments()
HELPERSDemonstration
Provides registration for usersOrganize users into rolesRestrict access to pages on your website based on user or role
WebMatrix includes helpers & database that makes setting up membership easySome templates include Admin folder with all the pages required for membership
What is Membership?
Setup membership in one line of code
Setting up Membership
@{ WebSecurity.InitializeDatabaseConnection("StarterSite", "UserProfile", "UserId", "Email", true);}
/_AppStart.cshtml
StarterSite database
Some templates come with an admin folder containing membership pages ready to go
Templates with Membership
You can control access to pages based on the following:
Is the user logged in?Does the user have access to the page?Does the user belong to the correct role?
Controlling access to pages
@if (!WebSecurity.IsAuthenticated) { Response.Redirect("/Account/Login"); }
@if ( Roles.IsUserInRole("admin")) { <span> Welcome <b>@WebSecurity.CurrentUserName</b>! </span>}
WebMatrix automatically provides “clean” URLs using Routing and removes the need to use QueryStringsRouting has the following benefits:
Easier to read for your usersBetter for SEO
Routing
LayoutsThemesHelpersMembershipRouting
Part 2 Summary
Q&A