Working with MVC Views in Umbraco

    Working with MVC Views and Razor syntax in Umbraco

    Properties available in Views

    All Umbraco views inherit from Umbraco.Web.Mvc.UmbracoViewPage<ContentModels.NameOfYourDocType> along with the using statement @using ContentModels = Umbraco.Web.PublishedModels;. This exposes many properties that are available in razor. The properties on the Document Type can be accessed in a number of ways:

    • @Model (of type Umbraco.Web.Mvc.ContentModel) -> the model for the view which contains the standard list of IPublishedContent properties but also gives you access to the typed current page (of type whatever type you have added in the angled brackets).
    • @Umbraco (of type Umbraco.Web.UmbracoHelper) -> contains many helpful methods, from rendering macros and fields to retrieving content based on an Id and tons of other helpful methods. See UmbracoHelper Documentation
    • @Html (of type HtmlHelper) -> the same HtmlHelper you know and love from Microsoft but we've added a bunch of handy extension methods like @Html.BeginUmbracoForm
    • @UmbracoContext (of type Umbraco.Web.UmbracoContext)
    • @Members (of type Umbraco.Web.Security.MemberShipHelper) See MemberShipHelper Documentation

    Rendering a field in a strongly typed view

    This is probably the most used method which renders the contents of a field using the alias of the content item.

    @Model.Value("bodyContent")
    

    If you're using the method from within a partial view then be aware that you will need to inherit the context so the method knows which type to get the desired value from. You'd do this at the top of partial view and so strongly typed properties can then be accessed in the partial view. For instance you can pass "HomePage" like this:

    @inherits UmbracoViewPage<HomePage>
    ...
    @Model.Value("title")
    

    You will also need to pass the "Context" to the @Model.Value() method if you're looping over a selection like this where we pass the "item" variable.

    Looping over a selection works in a similar way. If you have a property that contains, for instance, an IEnumberable collection, you can access the individual items using a foreach loop. Below illustrates how you might do that using "item" as a variable.

    @{
        var collection = Model.ItemList;
    }
    
    <ul>
        @foreach(var item in collection){
            <p>@item.Name</p>
        }
    </ul>
    

    If you want to convert a type and it's possible, you can do that by typing a variable and assigning the value from your property to it. This could look like the example below.

    @foreach (TeamMember person in Model.TeamMembers)
       {
         <a href="@person.Url">                                                              
            <p>@person.Name</p>
         </a>
       }
    

    In this example, we are looping through a list of items with the custom made type TeamMember assigned. This means we are able to access the strongly typed properties on the TeamMember item.

    Rendering Macros

    Rendering a macro is done using UmbracoHelper. There are 3 overloads, we'll start with the most basic:

    This renders a macro with the specified alias without any parameters:

    @Umbraco.RenderMacro("myMacroAlias")
    

    This renders a macro with some parameters using an anonymous object:

    @Umbraco.RenderMacro("myMacroAlias", new { name = "Ned", age = 28 })
    

    This renders a macro with some parameters using a dictionary

    @Umbraco.RenderMacro("myMacroAlias", new Dictionary<string, object> {{ "name", "Ned"}, { "age", 27}})
    

    UmbracoHelper Documentation

    Accessing Member data

    @Members is the gateway to everything related to members when templating your site. MemberShipHelper Documentation

    @if(Members.IsLoggedIn())
    {
        var profile = Members.GetCurrentMemberProfileModel();
        var umbracomember = Members.GetByUsername(profile.UserName);
    
        <h1>@umbracomember.Name</h1>
        <p>@umbracomember.GetPropertyValue<string>("bio")</p>
    }
    

    Models Builder

    Models Builder allows you to use strongly typed models in your views. Properties created on your document types can be accessed with this syntax:

    @Model.BodyText
    

    When Models Builder resolve your properties it will also try to use value converters to convert the values of your data into more convenient models. This allows you to access nested objects as strong types instead of having to rely on dynamics and risking having a lot of potential errors when working with these.

    Models Builder documentation