Disclaimer: I've worked these things out for myself, they may not be the best way of doing it but they work and hopefully they might give you a nudge in the right direction.

If you know of a better way of doing this then feel free to drop a comment with your thoughts.

Umbraco Razor Snippets Reference

Optional handwritten h3

This is a collection of Razor script snippets and applicable HTML that I've either pieced together from the web or figured out myself. The below suggestions may not necessarily be the best way of getting the job done but they work for me. I'll nip back in and adjust these any time I find a better way of doing it. If you know of a better way then feel free to drop a comment below and let me know.


View Headers

Master View Header
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
Layout = null;
}

 

Child View Header
@inherits UmbracoTemplatePage
@{
Layout = "Master.cshtml";
}

The basics

Pull the child view into the master view
@RenderBody()

 

Pull a partial view into a view
@Html.Partial("navPrimary")

Note:- Partials live in /Views/Partials/ and "navPrimary" is "/Views/Partials/navPrimary.cshtml"

 

Add content from an Umbraco Field
@Umbraco.Field("phoneNumber", recursive: true)

Note:- "phoneNumber" is the ID of the field in Umbraco. It's generated when you create the field under Settings > Document Types.

Example Document Type Field

In this instance, I've used "recursive: true". That's because I've created this field on the Home page Document Type, this means I can pull the phone number from the home page no matter what view I'm working in.


Images

Placing an image
@if (CurrentPage.HasValue("myImage"))
{
<img src="@Umbraco.Media(CurrentPage.myImage).Url" alt="@Umbraco.Media(CurrentPage.myImage).Name">
}

Note:- Again "myImage" is the ID of the field.
The Razor ending .Url, pretty obviously places the image URL within the src field.
The Razor ending .Name renders the title field of the chosen image. This can be edited under the Media section in Umbraco back office. This seems like a good way of managing alt text. If you update the title in the media library, it updates every alt tag where that image is used.

This is wrapped in an @if statement. That's to dodge the yellow screen of death you receive if you try rendering an image where no image has been chosen in the back office.

 

Media Picker background image
@if (CurrentPage.HasValue("myBackgroundImage"))
{
@:<div id="herospace" style="background-image:url('@Umbraco.Media(CurrentPage.myBackgroundImage).Url');">
}
else
{
@:<div id="herospace">
}

Note:- Again "myBackgroundImage" is the ID of the field.

The @: is there to stop everything going a bit wrong when Razor see's two opening HTML tags but only one closing tag.

This is wrapped in an @if statement. That's to dodge the yellow screen of death you receive if you try rendering an image where no image has been chosen in the back office.

 

Simple gallery using Multiple Media Picker 
@{ var imageList = Model.Content.GetPropertyValue<string>("myImages").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse); }
@{ var images = Umbraco.TypedMedia(imageList).Where(x => x != null); }
@foreach (var image in images)
{
<img src="@image.Url" alt="@image.Name">
}

Note:- Once again "myImages" is the ID of the field of the Media Picker.

This should really be put in a partial over a main view.


Random useful snippets

Display current Year
@DateTime.Now.ToString("yyyy")

 

Display page created date
@child.createDate.ToString("dd/MM/yyyy")

 

Display Parent Node URL
@CurrentPage.Parent.Url

 

Truncate RTF Field
@Umbraco.Truncate(@resource.myContent, 100)

Note:- myContent is the ID of the RTF field
100 is the character count to truncate to.