Computer Magic Logo
Forms the ASP.NET MVC way

Sunday, November 22, 2015

Published by Aristotelis Pitaridis

Umbraco is based on ASP.NET MVC which means that the proper way to create forms is to use models, controllers and views. In this part of the tutorial we will see how to create a contact form the right way.

First of all we will create a model which will be used in order to store the information that the user will type in the form. We will see how to use data annotations in our model in order to describe what kind of information the user should type and we will also be able to define error messages that the system should display in the user types something wrong.

After that we will create the view which will generate the HTML markup that the system will send to the browser. We will use ASP.NET MVC html helpers in order to bind the model properties with the equivalent html controls. We will see hot to use the AntiForgeryToken html helper to protect our application against cross-site request forgery.

In order to complete the MVC pattern we will create the controller required in order to collect the information typed by the user and use them to finish the functionality of the contact form.

A good practice is to use client side validation so that the user will be able to see the error messages without having to make a submission to the server. This is faster and friendlier for the web site visitor. We will use the jQuery validate unobtrusive library to make it work for our contact form.

Finally we will see how to give the possibility to the web site administrator to be able to use the contact form in the Umbraco RTE. This is very useful because the administrator of the site will be able to add the contact form using the Rich Text Editor in any page of the web site.