MVC forms in Umbraco

I've had a lot of trouble working out how to create forms in Umbraco because a lot of the documentation around is either for an old version of Umbraco, using a third party library or just not very helpful!

I've finally found out the trick when working with MVC and surface controllers, and it's very simple once you get to know it, it's definately not as hard a lot of tutorials make it seem.

To get your form working you're going to need to know what a controler is and what it does, so if you don't it's basically an area of code that handles every thing for your forms actions, think of it as the .cs file behind a user control.

For the purpose of this tutorial, I'll show you how to create a comment form, so we're going to start off with creating a partial view in the 'Partials' folder within the 'Views' folder, we'll then add the basic code needed to render the form and link it to a custom surface controller that we'll create in the 'App_Code' folder.

Step 1: Create the partial

Create a partial view in the 'Partials' folder located under the 'Views' folder and name it 'ContactForm' this will be where the GUI part of the form is located, it'll also be what's called from our view page to render the form.

Step 2: Adding the form

To create forms in MVC you can use a neat way of adding elements instead of writing the HTML, for example we can use 'LabelFor', 'EditorFor' and 'ValidationMessageFor' pretty neat right? All of these are preceded by '@Html.' because they're located under the 'Html' class.

See my example below and paste it into a partial view called 'CommentForm' to get started.

@inherits Umbraco.Web.Mvc.UmbracoViewPage
@{
    Layout = null;
}

@using (Html.BeginUmbracoForm("SubmitComment", "CommentFormSurface"))
{
  @Html.LabelFor(x => Model.Name)
  @Html.EditorFor(x => Model.Name)
  @Html.ValidationMessageFor(x => Model.Name)

  @Html.LabelFor(x => Model.Email)
  @Html.EditorFor(x => Model.Email)
  @Html.ValidationMessageFor(x => Model.Email)

  @Html.LabelFor(x => Model.Comment)
  @Html.EditorFor(x => Model.Comment)
  @Html.ValidationMessageFor(x => Model.Comment)
}

This is esseintially the form that people will see and use on our website, it is linked to a model and controller which we will create in step three by means of an inherits statement in the first line which calls the 'CommentFormModel'.

 

Step Three: Setting up the model and controller

To create the model and controller, you need to create a new class file in the 'App_Code' folder and call it 'CommentController', within this file, you'll add the model and surface controller for your form, copy and paste the below code into the class file to get started.

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Net.Mail;
using System.Text;
using System.Web;
using System.Web.Mvc;
using Umbraco.Web.Mvc;
using umbraco.BusinessLogic;
using umbraco.cms.businesslogic.web;

namespace LukeAlderton
{
    /// 
    /// Comment form controller deals with all comment systems
    /// 
    public class CommentFormSurfaceController : SurfaceController
    {
        [HttpPost]
        public ActionResult SubmitComment(CommentFormModel model)
        {
            //model not valid, do not save, but return current umbraco page
            if (!ModelState.IsValid)
            {        
                return CurrentUmbracoPage();
            }

            // Create the comment and add then data then publish it
            User author = new User(0);
            Document comment = Document.MakeNew(model.Name, DocumentType.GetByAlias("uBlogsyComment"), author, CurrentPage.Children.First().Id);
            comment.getProperty("uBlogsyCommentName").Value = model.Name;
            comment.getProperty("uBlogsyCommentEmail").Value = model.Email;
            comment.getProperty("uBlogsyCommentWebsite").Value = model.Website;
            comment.getProperty("uBlogsyCommentMessage").Value = model.Comment;
            comment.Publish(author);
            umbraco.library.UpdateDocumentCache(comment.Id);

            // Add date to the page
            //TempData.Add("SubmissionMessage", "Your comment was successfully submitted");

            // Redirect to current page to clear the form
            return RedirectToCurrentUmbracoPage();

            // Redirect to specific page
            //return RedirectToUmbracoPage(2525);
        }
    }

    public class CommentFormModel
    {
        [Required]
        [Display(Name = "Name")]
        public string Name { get; set; }

        [Required]
        [RegularExpression(@"^(([A-Za-z0-9]+_+)|([A-Za-z0-9]+\-+)|([A-Za-z0-9]+\.+)|([A-Za-z0-9]+\++))*[A-Za-z0-9]+@((\w+\-+)|(\w+\.))*\w{1,63}\.[a-zA-Z]{2,6}$", ErrorMessage = "Invalid Email Address")]
        public string Email { get; set; }

        [DataType(DataType.Url)]
        public string Website { get; set; }

        [Required]
        [DataType(DataType.MultilineText)] 
        public string Comment { get; set; }
    }
}

This controller is designed to replace the comment function of the uBlogsy comment system which adds a node under the post, within the comments node.

The top class called 'CommentFormSurfaceController' is the surface controller and it handles everything that happens after the form has been submitted, in our case we call the method 'SubmitComment' to add a comment to the post via it.

The lower class called 'CommentFormModel' is our view model and it handles the variables available to us and what they should be displayed as, this model has four variables which can all be accessed via 'model.variablename'.

Step Four: Using the form

To Use the form you simply add the following line into any view in your website:

@Html.Partial("CommentForm",new LukeAlderton.CommentFormModel())

It's as simple as that!

Also note that you can't have a form surrounding your whole page when using this because the form will just post the data as a querystring.


Published at

Tags: Umbraco,MVC

Luke Alderton

Comments

Connie
Why do you have the TempData line commented out? I am struggling with an issue where I can only get the TempData value to display in the partial that contains the form. It will not display on the parent view, even though that is the next http request.
22/04/2015
Luke
Connie, TempData is commented out because it's an option if you want to display some custom text when the page reloads. Have you read the TempData value? You can call TempData.Keep("somekeyname"); To make sure it is kept next time it's been read.
22/04/2015
Sumit
BeginUmbracoForm this is an error i am facing again and again in view/partial how to resolve it(System.Web.WebPages.Html.HtmlHelper' does contain defination for BeginUmbracoForm and no extention method 'BeginUmbracoForm' accepting a .....etc
26/07/2016
nseo-sw.men
Everything is very open with a really clear explanation of the issues. It was definitely informative. Your site is very helpful. Many thanks for sharing! eget smor recept http://nseo-sw.men/sport-for-health/92790-eget-smoer-recept.html
12/11/2018
DavidSom
деньги в кредит в бугульме журнал деньги и кредит потребительский кредит сбербанк рассчитать онлайн калькулятор как удалить кредит в сбербанк онлайн деньги в кредит в 18 лет как получить кредит пенсионерам хоум кредит личный вход по номеру банки где можно взять кредит без справок рефинансирование кредита восточный экспресс кредиты онлайн 100 одобрение на карту банки втб кредит можно ли получить кредит в сбербанке отп кредит оплата без комиссии экспресс кредит без подтверждения кредиты без залога павлодар тинькофф оплатить кредит по номеру карты http://birjakreditov.ru/srochniy-kredit-nalichnimi-pod-zalog-nedvizhimosti/4380-2017-03-20.php заявка на кредит быстрое решение кредита http://birjakreditov.ru/krediti-bez-otkaza-na-kartu-maestro/3689-2017-02-07.php исковая давность кредита в россии http://birjakreditov.ru/kredit-na-20-tisyach-rubley-bez-protsentov/15480-2018-09-11.php телевизоры в кредит без первоначального http://birjakreditov.ru/krediti-bez-otkaza-na-kartu-maestro/10443-2018-02-03.php почта банк кредит под залог http://birjakreditov.ru/srochniy-kredit-nalichnimi-pod-zalog-nedvizhimosti/13488-2018-06-20.php оплата кредита тинькофф с карты другого банка кухни в кредит без процентов в москве оплатить кредит тинькофф онлайн с карты кредит с плохой кредитной историей беларусь взять кредит у частного инвестора без залога кредит на 90 дней без процентов почта россии заплатить кредит взять кредит на карту без поручителей получить кредиты физическим лицам ренессанс кредит оплата кредита онлайн где оформить кредит без справок и поручителей http://birjakreditov.ru/vzyat-kredit-v-vtb-24-kalkulyator-rasschitat/402-2016-07-07.php возьму кредит под залог коммерческой недвижимости http://birjakreditov.ru/nomer-telefona-s-plohoy-istoriey-kredit/3563-2017-01-30.php какой банк дает кредит с плохой ки http://birjakreditov.ru/kredit-na-20-tisyach-rubley-bez-protsentov/12131-2018-04-22.php кредит с плохой http://birjakreditov.ru/krediti-bez-otkaza-na-kartu-maestro/3127-2017-01-03.php кредит с плохой историей краснодар http://birjakreditov.ru/kredit-na-20-tisyach-rubley-bez-protsentov/7732-2017-09-22.php зао акб экспресс кредит кредит под залог продаваемой квартиры банк кредит плохой историей восточный экспресс банк условия кредита кредит без гражданства рф
13/11/2018
nseo-sw.men
It's impressive that you are getting thoughts from this post as well as from our argument made here. ar k2 vitamin bra http://nseo-sw.men/how-to-quickly-lose-weight/44951-aer-k2-vitamin-bra.html
13/11/2018
svetikNoupt
Супер скидки на продукцию Gillette Mach3! Хорошие новости для покупателей и продавцов продукции Gillette! Optovka Net предлагает купить наборы Gillette для себя и близких или для реализации и получения прибыли. Gillette это исключительно качественные продукты, проверенные временем, а также отличное начало нового бизнеса. Внимание, акция! Бритвы Джилет Фьюжен и их модификации Gillette Fusion Proglide и Gillette Fusion Proglide Power выполнены в современном стиле. Рекомендуем функциональные наборы станок кассета Gillette Fusion, купить которые цене производителя можно через форму на сайте. Максимально возможные скидки! Хорошая оказия купить Лезвие Gillette Mach3, станок для бритья Gillette Mach 3 Turbo, кассеты для микроимпульсных станков Gillette Power, а также любой другой продукт серии Gillette Mach 3 с максимальной выгодой! Мак Турбо это классика на рынке товаров для бритья, а классика всегда пользуется спросом! Хит продаж - одноразовые станки Gillette. Одноразовые станки для бритья Gillette Gillette 2, Gillette blue, Gillette blue 3, хорошо продаются практически всегда. Скидки на наборы как никогда актуальны! Наборы Gillette Sensitive, Gillette Slalom, Gillette Sensor Excel, Gillette Venus - это универсальный подарок. В набор Gillette VENUS входят: бритва, станок Gillette venus, кассеты. Исследования показали, что большим спросом у конечных потребителей пользуется бритвенный станок Gillette sensor excel, купить который стало ещё проще через форму на нашем сайте. Опытный клиент предпочтёт купить бритвенный станок известной зарекомендовавшей себя фирмы. Удобная оплата через системы международных платежей. Заказав у нас продукцию Gillette, вы получаете оригинальную качественную продукцию, максимальную выгоду, надёжные гарантии. Мы предоставляем дополнительные скидки крупным оптовикам. Постоянные заказчики получат персональные выгодные предложения и приятные бонусы. Оформите заявку через сайт http://optovka.net и анкету для регистрации заказа и приготовьтесь к развитию вашего бизнеса!
13/11/2018
EdwardPhova
Совсем недорого ремень с дорогой пряжкой предлагаем всем желающим. http://desktopm.ru/1d/index-sootvetstvie-nastroek-avc56k-nastrojkam-id-sdl.htm По желанию клиента литье втулок спб недорого по низким ценам.
16/11/2018
shale.larosh
Мечтаете жить у моря? Решение – это жилой комплекс «Шале Ла Рош» расположенный в экологически чистом поселке Крыма – Гурзуфе. 600 метров до моря, закрытая территория. Квартиры от 2,5 миллионов рублей с пропиской! Ипотека. http://shalelarosh.ru 7-918-469-25-86
16/11/2018
nseo-sw.men
Wonderful, what a website it is! This web site gives valuable facts to us, keep it up.
17/11/2018
Lestersep
Только показывает статистика, неожиданные покупки и спонтанные затраты у большей части укладываются https://actrea.ru/ сбербанк потребительский кредит для держателей зарплатных карт в диапазон перед 30 000 рублей. Как начало, эти мелочь уходят на успокоение, развлечения, доход мелкой бытовой разве цифровой техники, а также для незапланированные потребности в быту. Вопрос «У кого бы занять?» тут же встаёт ребром и приходится напряжённо выслеживать подходящего человека. Суждение посетить банк развеивается так же быстро, как и появляется – взваливать на собственные плечи крупные долговые обязательства, не располагая серьёзными и весомыми основаниями, мало кому хочется. Вправду, не брать же кредит в банке, коли просто не хватает капля наличных чтобы съездить с друзьями для дачу. Но оптимальный освобождение из положения всё же существует – финансовый работа «Микрозайм» специально ради помощи в этих жизненных обстоятельствах. Они незамысловаты и прямолинейны в точности, как и оказываемые нами услуги. Оформить заявку? Легко! Потребуется чуть ваш свидетельство гражданина России с пропиской и действующий комната телефона. Заполняете короткую анкету, в которую вносите паспортные и прочие данные. Приговор принимается системой в кратчайшее время. Вдруг испытывать сколько Вы будете должны? Ещё проще! На главной странице одним ползунком Вы выбираете нужную сумму, а вторым – срок, после который планируете рассчитаться. Величина выплаты довольно вычислен автоматически онлайн-калькулятором. Эта число окончательна и именно её Вам следует оплатить. Вроде отслеживать текущее состояние? И тогда отсутствуют излишние мудрёности. В Вашем распоряжении персональный кабинет, где Вы сможете узнать актуальную задолженность и дату, в которую её надо погасить. Также в наличии имеется мочь продления. Мы стараемся помочь наиболее широким слоям населения, с разным социальным статусом и местом работы. Нашими клиентами являются словно не располагающие безмерными богатствами студенты и пенсионеры, так и трудящиеся, обладающие высшим образованием и средним достатком. Свободно держать какие-то жизненные сложности - мы выдаём микрозайм на любые цели, поскольку доверяем нашим потребителям. Неотложные домашние нужды иначе стремление осуществить какую-то свою небольшую мечту – за экономической подмогой в реализации планов Вы можете обратиться к нам. Одолжить достаточно и без хлопот иногда непросто. Попросить у друзей разве родственников не всегда удобно - поодаль не у каждого найдётся излишек бюджета, которым он пока готов поделиться с вами. К тому же долг может потребоваться заранее, чем было оговорено, который создаст очень щекотливые ради вас обстоятельства – передавать нуждаться уже сейчас, а нечего. Избыток людей рассорилось на почве экономических разногласий и зачастую стоит крепко призадуматься загодя чем испытывать взаимоотношения подобным образом. Альтернативный видоизменение - кредит в банке. Он весь подходит, когда вы планируете брать по-крупному и рассчитаться изза длительный период. В противном случае сбор пакета справок и документов, просиживание в очереди и ожидание только расходуют впустую ваше личное время. Жениться во внимание стоит и мочь того, сколько приказ не будет одобрено. А сколько представляет из себя дело получения микрозайма? Всё предельно просто. С вас - только номер сотового, совершеннолетие, свидетельство гражданина России и выход во всемирную сеть. Вы заполняете анкету: вносите личные причина, рассчитываете размер займа и совокупную продолжительность, выбираете подходящий манипуляция перевода. А вся остальная нагрузка ложится для наши плечи. Умышленно разработанная и оптимизированная учение скоринга позволяет автоматически уговаривать великий объём заявок враз, поэтому о нашем решении вы узнаете практически мгновенно. И всё, который останется дальше – забрать и потратить сообразно назначению. Аналогичная простота наблюдается и с погашением задолженности: надо в выбранную вами дату внести заслуженный платёж. Полная количество с процентами довольно указана присутствие оформлении, а текущее сословие позволительно отслеживать в персональном онлайн-кабинете. Не успеваете? Безделица страшного, лакомиться мочь продления. Многие житейские задачи решаются разными путями. Одни запутанные и витиеватые, другие прямолинейные и очевидные.
17/11/2018
svetikNoupt
Суппер скидки на продукцию Gillette Fusion Proglide Power! Optovka Net приглашает к сотрудничеству покупателей и продавцов продукции Gillette. Мы реализуем станки Жилет высочайшего качества по лучшим ценам специально для вас! Gillette это лидер продаж в Европе и Америке, а также отличный способ открыть своё дело. Максимально возможные скидки! Отличная возможность заказать станок для бритья Gillette Mach3 Turbo, кассеты для микроимпульсных станков Gillette Power, Лезвие Gillette Mach3, а также любой другой продукт линейки Джилет Мак 3 по оптимальной цене! Мак Турбо это классика на рынке товаров для бритья, а классика всегда пользуется спросом! Только у нас! Бритвы Джилет Фьюжен и их модификации Gillette Fusion Power и Gillette Fusion Proglide выполнены в современном стиле. Настоящей находкой разработчиков стало лезвие Fusion. Низкие цены! Наборы Gillette Slalom, Gillette Sensor Excel, Gillette Venus, Gillette Sensitive - это всегда актуальный подарок. В набор Gillette VENUS входят: бритва, станок Gillette venus, кассеты. Опытный клиент предпочтёт купить бритвенный станок известной зарекомендовавшей себя фирмы. Исследования показали, что большим спросом у конечных потребителей пользуется бритвенный станок Gillette sensor excel, купить который стало ещё проще через форму на нашем сайте. Всегда в наличии популярные одноразовые станки Gillette. Одноразовые бритвенные станки Gillette blue, Gillette blue 3, Gillette 2, хорошо продаются в любое время года.Оформив заказ на сайте, вы получаете максимальную выгоду, оригинальную качественную продукцию, надёжные гарантии. Только самые надёжные компании осуществляют быструю доставку. Мы практикуем индивидуальный подход к каждому клиенту. Молниеносное оформление сделки. Оформите заявку через форму на сайте http://optovka.net для регистрации заказа и наслаждайтесь ростом вашего бизнеса!
20/11/2018
Raymondpef
купить натуральную косметику в барселоне итальянские сумки боттега венета купить профессиональную итальянскую косметику для собак tonymoly premium mascara brush итальянские сумки кожа с рисунком кроссворд купить косметику елеганс купить в интернет магазине косметику ейвон корейская косметика купить пенза айкон косметикс корейская косметика оптом макиях для бровей Лубянка косметика для ног Дмитровская купить профессиональную по оптовым ценам косметику Маска-патч для губ ВДНХ где купить в москве косметику капус где купить косметику виолайн бижутерия укарашения аксессуары женские http://polikarbonmarket.com/index.php?option=com_k2&view=itemlist&task=user&id=193314 белорусская косметика витэкс москва http://artuli.com.ua/index.php?option=com_k2&view=itemlist&task=user&id=10146 Кухонные столешницы искуственный камень Лесопарковая http://www.quanaochipchip.com/index.php?option=com_k2&view=itemlist&task=user&id=1632126 корейская косметика купить в днепропетровске http://freeroom.cn/index.php?option=com_k2&view=itemlist&task=user&id=470642 немецкий рюкзак с подтяжкой http://www.sannicolac5.it/index.php?option=com_k2&view=itemlist&task=user&id=1012765 г.москва где купить сумку фирмы буладжи купить косметику мери кей косметика index заказать женский кожаный кошелек почтой тушь для ресниц elite тройной эффект москва купить интернет-магазин клатчей москва купить косметику мак в украине недорого купить польскую косметику bielenda купить детскую косметику для девочек маленькая фея наборы купить косметику орифлейм в интернет магазине киев Клатч Аэропортовская 1-я улица турфирмы тайланд египет китай турция петропавловск камчатский http://www.sicipiscine.it/component/k2/itemlist/user/840739 сумки di gregorio cocco rosso http://www.uggias.com/index.php?option=com_k2&view=itemlist&task=user&id=106596 инвестиции при покупке готового бизнеса http://www.afrodizzy.co.za/index.php?option=com_k2&view=itemlist&task=user&id=756521 где купить косметику paul mitchell в минс http://www.espressofreunde.de/index.php?option=com_k2&view=itemlist&task=user&id=45913 купить косметику Коломенская http://www.mediazioniapec.it/component/k2/itemlist/user/1153263 женские наручные часы rodania maura 2502626 наручные часы муржские эдвард часы наручные купитьв санкт-петербурге продам электронные наручные часы наручные часы kolber wtyf gjlltkrb
20/11/2018
Post a comment
Sit tight...
We're adding your comment.
Thank you.
Your comment has been added.
There's been a problem.
Please try again later.
Share with
Tags
Latest Comments
By Raymondpef on MVC forms in Umbraco
20 Nov 2018, 23:58 PM
By svetikNoupt on MVC forms in Umbraco
20 Nov 2018, 19:44 PM
By Lestersep on MVC forms in Umbraco
17 Nov 2018, 13:55 PM
By nseo-sw.men on MVC forms in Umbraco
17 Nov 2018, 00:43 AM
By shale.larosh on MVC forms in Umbraco
16 Nov 2018, 22:34 PM
By EdwardPhova on MVC forms in Umbraco
16 Nov 2018, 12:40 PM
By svetikNoupt on MVC forms in Umbraco
13 Nov 2018, 22:04 PM
By nseo-sw.men on MVC forms in Umbraco
13 Nov 2018, 17:47 PM
Categories
App Development
Event
Game Development
Mapping
Modelling
Programming
Review
Robotics
Tutorial
Web Development