Summary - FadiZahhar/umbraco8showandtell GitHub Wiki

Umbraco 8: All Major Concepts in Your Views

1. Layout and Site Structure

main.cshtml

  • Purpose: The site-wide layout (“master page”).

  • Features:

    • Loads shared CSS/JS and bootstrap grid.
    • Calls shared partials for navigation (NavBar), hero/banner (Hero), and footer.
    • Renders the main content with @RenderBody().

How to use: All your main pages inherit this layout for a consistent look and feel.

2. Navigation & Footer

/Views/Partials/NavBar.cshtml

  • Dynamically builds navigation based on site structure.
  • Loops through content nodes (e.g., Home’s children) to build menus.

/Views/Partials/Footer.cshtml

  • Displays global footer information.
  • Can be extended to pull from site settings for social links, copyright, etc.

3. Homepage & Content Pages

/Views/Home.cshtml

  • Uses partials to compose the page:

    • Hero
    • Call to Action
    • Latest News
    • Latest Tweets

/Views/ContentPage.cshtml

  • Renders generic content pages (about, info, etc.) with dynamic body/content.

4. Call to Action & Hero

/Views/Partials/Call To Action.cshtml

  • Pulls CTA text and link from page or settings.
  • Used across homepage and other key pages.

/Views/Partials/Hero.cshtml

  • Renders a large banner, often with background image, heading, subheading.
  • Dynamically pulls data from page properties.

5. News Functionality

/Views/NewsArticles.cshtml

  • Lists all news articles as links, ordered by publish date.
  • Loops through child nodes of type newsArticle.

/Views/NewsArticle.cshtml

  • Displays a single news article’s full details.
  • Includes related links (using Nested Content), publish date, and optional thumbnail.

/Views/Partials/Latest News.cshtml

  • Renders a list/teaser of the most recent articles.
  • Used on homepage and elsewhere for news highlights.

6. Twitter Integration

/Views/Partials/Latest Tweets.cshtml

  • Embeds Twitter timeline widget or dynamically pulls tweets.
  • Configurable for different handles/usernames.

/Views/MacroPartials/Get Latest Tweets.cshtml

  • Used as a Macro to insert tweets in RTE or the grid editor.

7. Useful Links / Nested Content

/Views/MacroPartials/Useful Links.cshtml

  • Example of rendering repeatable content (e.g., links or CTAs).
  • Uses Nested Content to let editors manage lists/blocks of links.

8. Contact Form

/Views/Partials/Contact Form.cshtml

  • Renders the site’s main contact form using a strongly typed ViewModel.
  • Submits to a SurfaceController, which handles validation, storage, and emailing.

/Views/MacroPartials/Contact Form.cshtml

  • Allows the contact form to be inserted via Macro in any RTE or grid block.

9. Authentication & Account Management

Registration

  • /Views/Partials/Register.cshtml Renders the registration form with full validation.

  • /Views/Register.cshtml Main page for registration, likely calls the above partial.

Login

  • /Views/Partials/Login/Login.cshtml Renders login form, handles errors.

  • /Views/Login.cshtml Login page.

Logout

  • /Views/Logout.cshtml Handles sign out via controller logic.

Email Verification

  • /Views/Partials/EmailVerification.cshtml Handles display after verifying email via a token.

Password Reset

  • /Views/Partials/Login/ResetPassword.cshtml

  • /Views/ResetPassword.cshtml Forms and pages for password reset using secure tokens.

  • /Views/Partials/Login/ForgottenPassword.cshtml

  • /Views/ForgottenPassword.cshtml Forgotten password request form.

10. Account/Profile Management

/Views/Partials/MyAccount/MyAccount.cshtml

  • Allows logged-in users to view and update their profile and change password.

/Views/MyAccount.cshtml

  • Main page for “My Account,” calls the above partial.

11. Search Functionality

/Views/Search.cshtml

  • Implements a search form and result display for searching site content (typically news).
  • Uses a SurfaceController to handle queries and return matching content.

12. Grid Editors

/Views/Partials/Grid/Editors/...

  • Custom rendering for grid-based layouts, such as media, RTE, macro, embed, text.
  • Supports flexible, editor-controlled layouts via Umbraco’s grid.

13. Email Verification

/Views/Partials/EmailVerification.cshtml

  • Handles the user experience when a user verifies their email address via a secure token.

14. Macros and MacroPartials

/Views/MacroPartials/...

  • MacroPartials allow you to insert components (like Contact Form, Get Latest Tweets, Useful Links) into Rich Text Editors or grid blocks via the Umbraco Macro system.

How All These Pieces Fit Together

  1. Layout: main.cshtml ensures every page has a consistent header/nav/footer and loads all common assets.

  2. Partials: Modular building blocks (hero, CTA, news, contact, nav, etc.) are reused across multiple pages for DRY, maintainable code.

  3. MacroPartials: Allow dynamic placement of advanced widgets (forms, social feeds, lists) by editors via RTE or grid.

  4. SurfaceControllers: Power forms (register, login, contact, search, password reset), handling validation, DB updates, and feedback.

  5. Nested Content: Empowers editors to add repeatable, structured lists or blocks (useful links, related articles) without developer help.

  6. Strong ViewModels: Used for all forms, ensuring robust validation and a clean separation between logic and UI.

  7. Security:

    • Anti-forgery tokens on all forms.
    • Secure password and account management.
    • Email verification for new users.

  8. Rich Editor Experience:

    • Grid editor and MacroPartials make page building flexible and visual for editors, not just devs.

  9. Search: Provides fast content lookup (usually for news/articles).