Crash Course Walkthrough

Crash Course Walkthrough

Ready.. Set... GO! Read through, and we'll show you the basics in a ~30 min walkthrough.

1. Open Up Visual Studio - Create new Project

Create a new Web Application in Visual Studio. Select the "Empty" template with no other references or folders. Unit tests not needed.

2. Install Umbraco

Go through the typical process of getting Umbraco 6 running via NuGet.

PM> Install-Package UmbracoCms -Version 6.2.5

3. Change default template to Razor

Open /config/umbracoSettings.config and change the defaultRenderingEngine to Mvc:

...
<templates>
  ...
  <defaultRenderingEngine>Mvc</defaultRenderingEngine>
</templates>
...

3. Create a Document Type

Create a new document type and matching template.

Add these properties:

• Headline (textstring)
• Headline Image (Media Picker)
• Body Content (Rich Text)

4. Create a homepage document with this type.

Publish the document.

5. Install Vault

PM> Nuget.exe Sources Add -Name UmbracoVaultBuild -Source https://ci.appveyor.com/nuget/umbracovault-5m6ate96gcwx -UserName <appveyoremail> -Password <appveyorpassword>
PM> Install-Package UmbracoVault -Source UmbracoVaultBuild

6. Create View Model

In Visual Studio, create a new view model class called BasicContentViewModel.cs in your site.

using System;
using System.Collections.Generic;
using System.Linq;

using UmbracoVault.Attributes;

namespace WebApplication1
{
    [UmbracoEntity(AutoMap = true)]
    public class BasicContentViewModel
    {
        public string Headline { get; set; }
        public string BodyContent { get; set; }
        public UmbracoImage HeadlineImage { get; set; }
    }

    [UmbracoMediaEntity(AutoMap = true)]
    public class UmbracoImage
    {
        [UmbracoProperty(Alias = "umbracoFile")]
        public string Url { get; set; }
        public string Alt { get; set; }
    }
}

7. Register Vault Controllers

Create the following class to register your view model namespace, and set the default render MVC controller for Umbraco to Umbraco Vault's default controller.:

public class CustomApplicationEventHandler : ApplicationEventHandler
{
    protected override void ApplicationStarting(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
    {
        Vault.RegisterViewModelNamespace("WebApplication1.ViewModels", "WebApplication1");
        DefaultRenderMvcControllerResolver.Current.SetDefaultControllerType(typeof(VaultRenderMvcController));
    }
}

8. Create the View

If you created a template with the document type above, you'll already have a .cshtml file in the Views directory. Include this in your VS project and have it look like this:

@model WebApplication1.BasicContentViewModel
@{
    Layout = null;
}
<h1>@Model.Headline</h1>
@if (Model.HeadlineImage != null)
{
    <img src="@Model.HeadlineImage.Url" alt="@Model.HeadlineImage.Alt"/>
}
@Html.Raw(Model.BodyContent)

9. View the page

That's it! Your page should now be published and visible with your view model.