Hi Jan A,

In Umbraco, when using Surface controllers with Html.BeginUmbracoForm, the form posts to a specific action on the Surface controller based on the method name provided in the BeginUmbracoForm call. This setup makes it tricky to use multiple submit buttons with different actions directly as you might in a standard HTML form.

However, you can manage different actions from a single form by including a hidden input or distinguishing the submit buttons by name or value. Here are a couple of approaches to handle this within the Umbraco framework:

Option 1: Use a Hidden Field

You can include a hidden field in your form that changes value based on the button clicked. This way, you can determine in your action method which button was pressed and handle logic accordingly.

@using (Html.BeginUmbracoForm<OrderWizardController>("HandleForm"))
{
    <input type="submit" name="action" value="Save" />
    <input type="submit" name="action" value="Next" />
}

Then in your Surface controller:

public ActionResult HandleForm(string action)
{
    switch (action)
    {
        case "Save":
            // Handle save
            break;
        case "Next":
            // Handle next
            break;
    }
    return CurrentUmbracoPage();
}

Option 2: Distinguish by Button Name or Value

Another way is to name your submit buttons and check which one was clicked in your controller method.

@using (Html.BeginUmbracoForm<OrderWizardController>("HandleForm"))
{
    <button type="submit" name="submitButton" value="Save">Save</button>
    <button type="submit" name="submitButton" value="Next">Next</button>
}

In your Surface controller:

public ActionResult HandleForm(string submitButton)
{
    if (submitButton == "Save")
    {
        // Handle save
    }
    else if (submitButton == "Next")
    {
        // Handle next
    }
    return CurrentUmbracoPage();
}

Option 3: JavaScript Handling

If you prefer to use formaction, you could manage this on the client side with JavaScript by changing the form's action attribute based on the button clicked before submitting.

@using (Html.BeginUmbracoForm<OrderWizardController>("DefaultAction"))
{
    <button type="submit" onclick="setFormAction(this.form, '@Url.Action("Action1", "OrderWizardController")')">Save</button>
    <button type="submit" onclick="setFormAction(this.form, '@Url.Action("Action2", "OrderWizardController")')">Next</button>
}



<script>
function setFormAction(form, action) {
    form.action = action;
}
</script>

Conclusion

Each of these approaches can work depending on your specific requirements. If you need a method that stays more "pure" to MVC conventions without client-side intervention, the first two options are preferable. If you want to utilize the formaction attribute directly, the JavaScript method provides a flexible albeit client-dependent solution.

For further guidance on Surface controllers, the official Umbraco documentation is a valuable resource: Umbraco Surface Controllers Documentation.

If you have further questions or need more examples, feel free to ask!

Best regards, UCP

is working on a reply...