4.3. Создание форм

Создание форм

Для создания форм необходимо быть знакомым с .NET MVC. Если вы знакомы с добавлением моделей, представлений и контроллеров, то вы можете сделать вашу первую форму.

Также можно использовать Umbraco forms. Он позволяет создавать и управлять формами в бэк-офисе. В том числе можно настраивать валидацию, перенаправления, сортировки и отправку данных формы. Официально поддерживается Umbraco HQ.

В этом примере создадим самую простую форму обратной связи, которая содержит имя, адрес электронной почты и поле для сообщения.

Создание модели представления

Для начала создадим модель для формы обратной связи. Для этого добавим новый класс в директорию /Models. Назовем его ContactFormViewModel.cs

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

namespace MyFirstForm.Models
{
    public class ContactFormViewModel {
        public string Name { get; set; }
        public string Email { get; set; }
        public string Message { get; set; }
    }
}

Необходимо скомпилировать проект после того как добавили модель.

Создание представления

Представление для формы добавим в директорию /View/Partials. Так как мы добавили модель и после этого скомпилировали проект, мы можем добавить строго типизированное представление.

Представления может использовать стандартные MVC helpers:

@model MyFirstForm.Models.ContactFormViewModel

@using(Html.BeginUmbracoForm("Submit", "ContactForm")) {
    <div>
        @Html.TextBoxFor(m=>m.Name)
    </div>
    <div>
        @Html.TextBoxFor(m=>m.Email)
    </div>
    <div>
        @Html.TextAreaFor(m=>m.Message)
    </div>
    <input type="submit" name="Submit" value="Submit" />
}

Добавление контроллера

Добавьте контроллер в директорию /Controllers , назовите его ContactController А в качестве шаблона используйте empty MVC controller.

using MyFirstForm.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Umbraco.Web.Mvc;

namespace MyFirstForm.Controllers
{
    public class ContactFormController : SurfaceController
    {
        [HttpPost]
        public ActionResult Submit(ContactFormViewModel model)
        {
            if (!ModelState.IsValid)
                return CurrentUmbracoPage();

            /// Work with form data here

            return RedirectToCurrentUmbracoPage();
        }
    }
}

Если модель не прошла валидацию, пользователь будет перенаправлен обратно на форму с помощью метода CurrentUmbracoPage(). А если форма прошла валидацию, можно обработать данные формы, а затем RedirectToCurrentUmbracoPage();

Добавление формы в шаблон

Добавить форму в шаблон можно с помощью частичного представления:

@using MyFirstForm.Models;

@{
    Html.RenderPartial("~/Views/Partials/ContactForm.cshtml", new ContactFormViewModel());
}

Добавление формы через бэк-офис

Для добавления формы на сайт необходимо создать макрос. Это также позволит администратору добавлять форму на страницу с помощью richtext editor.

Создание макроса

Перейдите в секцию разработчика и нажмите правой кнопкой мыши на иконку меню узла Partial Views Macro Files. Назовите макрос macroContact Form, выберите пустой шаблон и убедитесь, что установлена опция Create Macro.

В частичном представлении отобразим форму обратной связи, используя модель представления, которую создали ранее.

@inherits Umbraco.Web.Macros.PartialViewMacroPage

@using MyFirstForm.Models;

@{
    Html.RenderPartial("~/Views/Partials/ContactForm.cshtml", new ContactFormViewModel());
}

Добавление макроса

Для того, чтобы форма обратной связи появилась на странице, необходимо разрешить макрос в richtext editor. Разверните узел Macros и выберите макрос Contact Form. Установите опции для Editor Settings.

Теперь вы можете добавлять форму на страницу, которая имеет rich text editor.