Watch video

Extension methods

One of the things that you will be using in this video to expand on your submission form is a set of extensions that will ensure that the Submit() method in the controller will only create media items if what has been uploaded through the upload form is of a specific type.

The extensions - or "Helper methods", are already part of the premade project. 

If you are using your own project for running through the steps in this video chapter, you can grab the extension methods by using the download link at the bottom of this page.

Validation

When you are submitting a form on a website, and it fails for some reason - you would want to know what that reason was, right?

In the second part of this video, you will be adding validation to your form, to give the user some idea of what failed when they tried to submit the form.

Two types of validation will be added:

  • Server-side validation, where we check the data being submitted via the form by using the ModelState property.
  • Client-side validation, where we will be adding an additional package to the project and use jQuery to validate the data in the form.

Fieldtypes and properties

The form that is being used in this chapter consists of only text boxes and text areas - and a single upload field. The idea was to keep the walk-through here as simple as possible by using only very basic field types and properties.

You can do much more with this form. You can customize it by adding more advanced field types. There are some steps involved in doing this as you will also need to expand on your model and your Document Type by adding a property that you can map the new data from the form to.

There are four steps to achieve this:

  1. Add a new property to the Document Type in the Umbraco backoffice.
  2. Add a new property to the model in Visual Studio, using the correct object type for the type of data - corresponding to the property added to the Document Type.
  3. Add a new field to the form in the Partial View using an HTML Helper.
  4. Ensure that the data from the form is persisted by using the Content and Media Service methods as in the 'Creating content' and 'Creating media' videos.

Whenever you want to enable your users to add more data through the form, you need to go through each of those 4 steps.

Have you been using the form to create new articles for an articles collection, you might also want to update your templates to render out the new data being added.

 


 

Resources

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

Below you find the option to download a completed version of the project, as has been worked in throughout this chapter about surface controllers.

Surface Controllers - Completed project

At the bottom of the page, you will find a link to download the "Helpers" used in this video.

Project login details

User: tv@umbraco.com
Password: 1234567890


Get the source code!

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.