Rendering of forms and forms submissions fails when wrapped in a virtual page

[Musealali]

Written by Muslim Al-Ali Umbraco HQ - feel free to reach out to me anytime for further discussion.

There is currently 2 issues:

1. Withing a virtual page - if you try to render a forms within an RTE in a content node - it will throw value cannot be null errors in the frontend

2. If you decide to render the forms directly in the view - when you do a form submission you will run into issues with redirect.

Seems like forms is not picking up the routes from the virtual page.

Steps to reproduce

Backoffice:

1. Create 2 document types - a products page (listview) and a product page (should be under the products page)
2. In the products page documenttype add a SKU textstring and a RTE
3. Create a root node -> Products and a Product item with a SKU value
4. Render a form as a macro in the RTE
5. Then also try to render it directly in the view

Code:

1. Create a controller that inherits from the UmbracoPageController, IVirtualPageController (I have attached my controller)
2. Create a get endpoint that gets a specific product by id (Sku)
3. Implement the findcontent (make sure it finds the root page (products listview page)
4. Create a ControllerComposer and map the endpoints
5. Create a TvShow model that inherits from ContentModel

Now try to hit the HttpGet endpoint you created that fetches a product -> you should see the issue.

I have attached my solution to this issue as a reference to re-produce.

(In my solution I use TvShow - you should just use product or w/e you feel like.
FormsVirtualPageIssue.zip

[aguyfromdenmark]

This is a serious issue that effects multiple projects of ours. Glad to see it identified. We are experiencing the problem in sites running on v8 as well.

[Musealali]

One note -> If you render the form directly in the view and you do a form submission -> The entry is being created but the redirect fails.

[AndyButland]

@thejokerd3 - I seem to get the same issue here with other macros, not just the form one. Would you mind validating that you see the same for me please?

For the second issue I couldn't replicate quite the same problem, but neither could I get it to work. It would also be useful to test this with a "normal" Umbraco form post from a surface controller. Going to check that out myself tomorrow, but if you also have chance to see that would be useful to to help pin down where the issue lies.

[AndyButland]

@thejokerd3 - I think I'll need to ask if you can see if you can get the following simpler scenarios working with this IVirtualPageController setup:

• Render any macro within an RTE- e.g. just a simple one that writes out some content from a partial view.
• Post to a surface controller from the view, redirecting or returning to the current page depending on whether the form submission is validated.

I can't get either of those working, which are prerequisites for Umbraco Forms to work in this way.

If you are able to, and can share with me how, that'll make it easier to see why you get these errors with Forms (i.e. something extra Forms is doing must cause the issues).

If you can't, then I think this would need to first go to the CMS team to either add support for this (or document/help show how it can work).

---

If it helps, here is the basic surface controller setup I was testing:

    public class TestModel
    {
        [Required]
        public string Foo { get; set; } = string.Empty;
    }

    public class TestSurfaceController : SurfaceController
    {
        public TestSurfaceController(IUmbracoContextAccessor umbracoContextAccessor, IUmbracoDatabaseFactory databaseFactory, ServiceContext services, AppCaches appCaches, IProfilingLogger profilingLogger, IPublishedUrlProvider publishedUrlProvider)
            : base(umbracoContextAccessor, databaseFactory, services, appCaches, profilingLogger, publishedUrlProvider)
        {
        }

        [ValidateAntiForgeryToken]
        [HttpPost]
        public async Task<IActionResult> Test(TestModel model)
        {
            if (ModelState.IsValid)
            {
                return RedirectToCurrentUmbracoPage();
            }

            return CurrentUmbracoPage();
        }
    }

Add a partial view in Views/Partials:

@using Umbraco.Forms.TestSite.Support.VirtualPageIssue;
@model TestModel
@using (Html.BeginUmbracoForm<TestSurfaceController>("Test", FormMethod.Post))
{
    @Html.LabelFor(m => m.Foo)
    @Html.TextBoxFor(m => m.Foo)

    @Html.ValidationSummary()
    <button name="submit" type="submit">Submit</button>
}

And then add this to the view you are using to render the virtual page showing the SKU:

<partial name="_Test" model="new TestModel()">

[Musealali]

Happens on the latest version of the CMS which is currently -> 11.3.1

[jhenkes]

I do have the same issue (umb version 11.4.2 / forms 11.2.0). My controller looks as follows

    [Authorize]
    [Route("{culture}/Account/{action=Index}")]
    public class AccountPageController : UmbracoPageController, IVirtualPageController
    {
        private readonly IUmbracoContextAccessor _umbracoContextAccessor;

        public AccountPageController(ILogger<UmbracoPageController> logger, ICompositeViewEngine compositeViewEngine, IUmbracoContextAccessor umbracoContextAccessor)
            : base(logger, compositeViewEngine)
        {
            _umbracoContextAccessor = umbracoContextAccessor;
        }

        public IActionResult Personal()
        {
            return View("Views/Account/Personal.cshtml", new PersonalContentModel(CurrentPage));
        }

        public IPublishedContent? FindContent(ActionExecutingContext actionExecutingContext)
        {
            return _umbracoContextAccessor.TryGetUmbracoContext(out var umbracoContext) ? umbracoContext.Content?.GetById(Constantss.Content.Pages.Account) : null;
        }
    }

and in my view I render the form as component

@await Component.InvokeAsync("RenderForm", new { formId = Constantss.Content.Forms.EditLfrAdr, theme = "bootstrap5", includeScripts = true })

When submitting the form, I receive the same "Cannot redirect, no entity was found for key 00000000-0000-0000-0000-000000000000" error as mentioned by Musealali.
I was able to work around this issue by creating my own redirect workflow in order to manipulate "RedirectAfterFormSubmitUrl" (Umbraco Documentation).
However, this approach only works as long as your form submits successfully, because only then workflows are executed. When there are validation errors, it returns

Page Not Found
No umbraco document matches the URL '/de/Account/Personal'.

Due to the fact that manually calling the URL correctly retrieves the "Personal" action, I would've assumed that this should also work when submitting forms (for validation success and error).

Any news from the team on how this situation should be handled or if this is a bug? Please let me know, if you need additional info or have any questions.

[markadrake]

This is the exact issue I've run into today—version 13.5.2 of Umbraco.

(Edit: I've discovered why this only happens in PROD. The team has written a workaround to post the form back via the new(er) Umbraco Forms API.)