learning webmatrix: part 2 of 3 akber alwani ]
TRANSCRIPT
![Page 1: Learning WebMatrix: Part 2 of 3 Akber Alwani ]](https://reader033.vdocuments.net/reader033/viewer/2022051620/56649e2a5503460f94b17de9/html5/thumbnails/1.jpg)
Learning WebMatrix: Part 2 of 3Akber Alwanihttp://twitter.com/epdotnet]
![Page 2: Learning WebMatrix: Part 2 of 3 Akber Alwani ]](https://reader033.vdocuments.net/reader033/viewer/2022051620/56649e2a5503460f94b17de9/html5/thumbnails/2.jpg)
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
![Page 3: Learning WebMatrix: Part 2 of 3 Akber Alwani ]](https://reader033.vdocuments.net/reader033/viewer/2022051620/56649e2a5503460f94b17de9/html5/thumbnails/3.jpg)
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
![Page 4: Learning WebMatrix: Part 2 of 3 Akber Alwani ]](https://reader033.vdocuments.net/reader033/viewer/2022051620/56649e2a5503460f94b17de9/html5/thumbnails/4.jpg)
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
![Page 5: Learning WebMatrix: Part 2 of 3 Akber Alwani ]](https://reader033.vdocuments.net/reader033/viewer/2022051620/56649e2a5503460f94b17de9/html5/thumbnails/5.jpg)
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
![Page 6: Learning WebMatrix: Part 2 of 3 Akber Alwani ]](https://reader033.vdocuments.net/reader033/viewer/2022051620/56649e2a5503460f94b17de9/html5/thumbnails/6.jpg)
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
![Page 7: Learning WebMatrix: Part 2 of 3 Akber Alwani ]](https://reader033.vdocuments.net/reader033/viewer/2022051620/56649e2a5503460f94b17de9/html5/thumbnails/7.jpg)
LAYOUTSDemonstration
![Page 8: Learning WebMatrix: Part 2 of 3 Akber Alwani ]](https://reader033.vdocuments.net/reader033/viewer/2022051620/56649e2a5503460f94b17de9/html5/thumbnails/8.jpg)
Themes allow you to use different designs for your websiteYour users can switch between themes
What are Themes?
![Page 9: Learning WebMatrix: Part 2 of 3 Akber Alwani ]](https://reader033.vdocuments.net/reader033/viewer/2022051620/56649e2a5503460f94b17de9/html5/thumbnails/9.jpg)
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");}
![Page 10: Learning WebMatrix: Part 2 of 3 Akber Alwani ]](https://reader033.vdocuments.net/reader033/viewer/2022051620/56649e2a5503460f94b17de9/html5/thumbnails/10.jpg)
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?
![Page 11: Learning WebMatrix: Part 2 of 3 Akber Alwani ]](https://reader033.vdocuments.net/reader033/viewer/2022051620/56649e2a5503460f94b17de9/html5/thumbnails/11.jpg)
THEMESDemonstration
![Page 12: Learning WebMatrix: Part 2 of 3 Akber Alwani ]](https://reader033.vdocuments.net/reader033/viewer/2022051620/56649e2a5503460f94b17de9/html5/thumbnails/12.jpg)
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?
![Page 13: Learning WebMatrix: Part 2 of 3 Akber Alwani ]](https://reader033.vdocuments.net/reader033/viewer/2022051620/56649e2a5503460f94b17de9/html5/thumbnails/13.jpg)
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
![Page 14: Learning WebMatrix: Part 2 of 3 Akber Alwani ]](https://reader033.vdocuments.net/reader033/viewer/2022051620/56649e2a5503460f94b17de9/html5/thumbnails/14.jpg)
There are two ways to install Helpers in your website1. Package Manager2. Manual download
Adding Helpers to your website
![Page 15: Learning WebMatrix: Part 2 of 3 Akber Alwani ]](https://reader033.vdocuments.net/reader033/viewer/2022051620/56649e2a5503460f94b17de9/html5/thumbnails/15.jpg)
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
![Page 16: Learning WebMatrix: Part 2 of 3 Akber Alwani ]](https://reader033.vdocuments.net/reader033/viewer/2022051620/56649e2a5503460f94b17de9/html5/thumbnails/16.jpg)
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()
![Page 17: Learning WebMatrix: Part 2 of 3 Akber Alwani ]](https://reader033.vdocuments.net/reader033/viewer/2022051620/56649e2a5503460f94b17de9/html5/thumbnails/17.jpg)
HELPERSDemonstration
![Page 18: Learning WebMatrix: Part 2 of 3 Akber Alwani ]](https://reader033.vdocuments.net/reader033/viewer/2022051620/56649e2a5503460f94b17de9/html5/thumbnails/18.jpg)
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?
![Page 19: Learning WebMatrix: Part 2 of 3 Akber Alwani ]](https://reader033.vdocuments.net/reader033/viewer/2022051620/56649e2a5503460f94b17de9/html5/thumbnails/19.jpg)
Setup membership in one line of code
Setting up Membership
@{ WebSecurity.InitializeDatabaseConnection("StarterSite", "UserProfile", "UserId", "Email", true);}
/_AppStart.cshtml
StarterSite database
![Page 20: Learning WebMatrix: Part 2 of 3 Akber Alwani ]](https://reader033.vdocuments.net/reader033/viewer/2022051620/56649e2a5503460f94b17de9/html5/thumbnails/20.jpg)
Some templates come with an admin folder containing membership pages ready to go
Templates with Membership
![Page 21: Learning WebMatrix: Part 2 of 3 Akber Alwani ]](https://reader033.vdocuments.net/reader033/viewer/2022051620/56649e2a5503460f94b17de9/html5/thumbnails/21.jpg)
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>}
![Page 22: Learning WebMatrix: Part 2 of 3 Akber Alwani ]](https://reader033.vdocuments.net/reader033/viewer/2022051620/56649e2a5503460f94b17de9/html5/thumbnails/22.jpg)
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
![Page 23: Learning WebMatrix: Part 2 of 3 Akber Alwani ]](https://reader033.vdocuments.net/reader033/viewer/2022051620/56649e2a5503460f94b17de9/html5/thumbnails/23.jpg)
LayoutsThemesHelpersMembershipRouting
Part 2 Summary
![Page 24: Learning WebMatrix: Part 2 of 3 Akber Alwani ]](https://reader033.vdocuments.net/reader033/viewer/2022051620/56649e2a5503460f94b17de9/html5/thumbnails/24.jpg)
Q&A