Watch video

What are surface controllers?

A surface controller is basically an MVC controller that interacts with the frontend rendering of your Umbraco page.

They can be used for many things, like Child actions content, and are most commonly used to handle data from form submissions.

That is also what we will be using the surface controller for in this chapter; for handling the data that is submitted via a form on our website.

Benefits of using and working with surface controllers

  • From your surface controller, you will have instant access to the Umbraco Helper methods and properties.
  • You will also have access to UmbracoContext.
  • All surface controllers are auto-routed which that you will not need to set up any custom routes to start working with them.

When you are working with surface controllers you will also benefit from the native Umbraco support for interacting with routes during HTTP POST requests, for rendering forms, and for rendering ASP.NET MVC child actions.

Surface controllers in this chapter

In this chapter, you will be using the surface controller to handle data from a submission form on your website. The data needs to be mapped to a set of properties on a Document Type and added to a new piece of content. Finally, you will use the controller to ensure that the data is rendered using the correct view.

You will

  • Create a model for the data
  • Set up a view for the form
  • Build the surface controller
  • Make some minor changes to templates and views




Check out the resources below to learn more about MVC and MVC in Umbraco.

Download the template project, if you want to follow along with the exact steps throughout this chapter.

Surface Controllers - Premade Project

Template project and ModelsBuilder

In the template project, the ModelBuilder is enabled. The project is configured to use the `LiveAppData` ModelBuilder mode.

The project is also configured to store all PublishedModels - the models generated automatically by Umbraco, in a folder called "PublishedModels".

If you're using your own project to run through this chapter, make sure to use the same or similar ModelsBuilder configuration.

    <add key="Umbraco.ModelsBuilder.Enable" value="true" />
    <add key="Umbraco.ModelsBuilder.ModelsMode" value="LiveAppData" />
    <add key="Umbraco.ModelsBuilder.ModelsDirectory" value="~/PublishedModels" />
    <add key="Umbraco.ModelsBuilder.AcceptUnsafeModelsDirectory" value="true" />

Project login details

Password: 1234567890

Surface Controllers

Total Time: 01:18:05

In the Surface Controllers chapter, you will learn more about some of the key functionality in Umbraco and how you can use MVC to programmatically add content and media to your Umbraco website.