How to make Umbraco form with validation work correctly?

Question

I couldn't find even one tutorial that correctly and fully explains how to make a form with validation.

More specifically I have the following issue - when the errors are passed, the filled content by the user is lost.

I am using Umbraco v7, but I imagine the concept is the same with 8 and 9?!

Option 1

Generally, what people do in the tutorials is that there is 1 action RenderForm (get) and then another SubmitForm (post). From what I get, if validation fails, you have to call CurrentUmbracoPage() to basically reload the .cshtml page and include this data. This is where the problem come in: the render from is done through an action which usually looks like that:

 Html.RenderAction("RenderForm", "Contact", new ViewModel());

and thus it resets the data to a new blank Model. I still have the errors, but whatever the user prefilled is now lost. I imagine there must be a way to just pass the model here, but I couldn't find out how.

Option 2

An alternative way of dealing with forms is to have only the POST controller action and load the form through a partial in the .cshtml:

Html.RenderPartial("~/Views/Partials/Forms/_ContactUsForm.cshtml", new ViewModel());

which brings us to the same problem - errors show but ViewModel data is blanked.

I tried calling it without a model, but it throws an error. I would expect you could prepare the model, and then just use it in the .cshtml or the partial .cshmtml but I wasn't able to find out how.

By prepare model I mean that I have to set a bunch of variables, prefill information, set dropdowns etc. before I render form. This should be done in the controller somehow before I load both the blank form and the filled form with errors.

---

My research:

The official documentation has no mention of errors: https://our.umbraco.com/Documentation/Fundamentals/Code/Creating-Forms/index-v7

These tutorials show you how to make forms but again, don't show you how to show data when form is invalid:

• https://www.youtube.com/watch?v=3V0A1AYJbys
• https://www.youtube.com/watch?v=LumPhKQvUCQ
• https://www.youtube.com/watch?v=3EF13vcGE18
• https://www.youtube.com/watch?v=vxGG4dWyBEQ

Answer 1

So in my main page I would usually have

@Html.Action("Render", "Form");

This calls the Render method on the FormController

The render method prepares the form model and then calls the partial

var model = new FormViewModel{
    enter instantiation code here as required 
}
return PartialView("~/Views/Partials/Form.cshtml", model);

Submitting the form will call the Submit method on the same controller

Usually in your submit method you would have

    if (!ModelState.IsValid)
{
    return CurrentUmbracoPage();
}
//Depending on your production set up, an option is to use TempData here to 
send some sort of success flag if the form was processed successfully by the backend
TempData.Add("Success", true);
return RedirectToCurrentUmbracoPage();

Instead of RedirectToCurrentUmbracoPage on success you might prefer to just redirect to a success page, if you have one, with RedirectToUmbracoPage(pageId)

Assuming you know how to set up the form model in mvc with required attributes etc as the ModelState.IsValid will rely on those for validation.

How is your partial set up by the way, are you using BeginUmbracoForm

using (Html.BeginUmbracoForm<FormController>("Submit", null, new
    {
...
}