ASP.NET MVC - Multiple Buttons on a Form

Question

I would like to have multiple buttons as images on this form:

<% Html.BeginForm("Create", "Foos", FormMethod.Post); %>

    <!-- html form elements -->
    <%=Html.SubmitImage("Button", "save-button.gif", new { alt = "Save" })%>

<% Html.EndForm(); %>

I am reading about Html.ActionImage but I don't see it in Microsoft.Web.Mvc, I guess it was removed, is there another way to add the buttons?

I would like a Save, Delete, Publish, Cancel, etc buttons on one form, as images, preferably each calling their own action in the controller.

Answer 1

You can use good ole html:

<input type="button" name="CancelButton" id="CancelButton" value="Cancel" />

or

<button name="CancelButton" id="CancelButton">Cancel</button>

or one of the helpers

<%= Html.Button("CancelButton", "Cancel", "MyJavascriptFunction()") %>

In any case you'll probably need to write a little javascript unless you just want to use a link for cancel.

Here is a little blog entry on the helpers.

Answer 2

One choice of course is to have separate forms for each button. This often isn't possible or easy without Javascript or malformed HTML. This easily lets you send each request to a different action method.

This is the solution I came up with for multiple image submit buttons. I'm not especially happy about it but it works, and can be easily refactored out later if an alternative is built into the framework.

In your HTML:

<%= Html.SubmitImage("Dog", "~/images/dog.jpg")%>
<%= Html.SubmitImage("Cat", "~/images/cat.jpg")%>

In the controller action method for the form :

(This is an action method. Its up to you to decide how to implement each button)

    public ActionResult Index(FormCollection form)
    {
        // get the name of the button that was clicked (sent via either Dog.x or Cat.x since its an image button)
        var buttonName = form.GetSubmitButtonName();

        if (buttonName == "Remove" || buttonName == "Skip")
        {
           Remove(form);
        }
        else if (buttonName == "Add")
        {
           Add(form);
        }
     }

Extension method:

(This finds a form parameter called Remove.x or Skip.x or Add.x and strips off the .x portion)

public static class FormCollectionExtensions
{
    public static string GetSubmitButtonName(this FormCollection formCollection)
    {
        var button = formCollection.Keys.OfType<string>().Where(x => x.EndsWith(".x")).SingleOrDefault();

        // we got something like AddToCart.x
        if (button != null)
        {
            return button.Substring(0, button.Length - 2);
        }

        throw new ApplicationException("No image button found");
    }
}

Note: One alternative is to use CSS to put a background image on a regular Html.SubmitButton button type (a regular HTML button instead of an HTML image button), but I did not find that satisfactory for me due to the different ways different browsers behave (see this question).