Learning WebMatrix: Part 2 of 3 Akber Alwani ]

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

James Senior

Perhaps replace these last two with something else

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

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>


@{ 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>


<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?

James Senior

change paths

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

Learning WebMatrix: Part 2 of 3 Akber Alwani ]

Documents

Transcript of Learning WebMatrix: Part 2 of 3 Akber Alwani ]