ASP.NET MVC - несколько кнопок на форме

Question

Я хотел бы иметь несколько кнопок в качестве изображений в этой форме:

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

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

<% Html.EndForm(); %>

Я читаю о Html.ActionImage, но не вижу его в Microsoft.Web.Mvc, думаю, он был удален, есть ли другой способ добавить кнопки?

Мне бы хотелось, чтобы кнопки «Сохранить», «Удалить», «Опубликовать», «Отмена» и т. Д. На одной форме представляли собой изображения, причем каждое из них должно вызывать свое собственное действие в контроллере.

Answer 1

Вы можете использовать хороший ole html:

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

или

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

или один из помощников

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

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

Вот небольшая запись в блоге о помощниках.

Answer 2

Один из вариантов курса - иметь отдельные формы для каждой кнопки. Это часто невозможно или просто без Javascript или деформированного HTML. Это позволяет легко отправлять каждый запрос на другой метод действия.

Это решение, которое я придумал для нескольких кнопок отправки изображений. Я не особенно доволен этим, но он работает, и его можно легко рефакторизовать позже, если в фреймворк встроена альтернатива.

В вашем HTML:

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

В методе действия контроллера для формы:

(Это метод действия. Вам решать, как реализовать каждую кнопку)

    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);
        }
     }

Метод расширения:

(Это находит параметр формы с именем Remove.x или Skip.x или Add.x и удаляет часть .x)

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");
    }
}

Примечание. Один из вариантов - использовать CSS для наложения фонового изображения на обычный тип кнопки Html.SubmitButton (обычная кнопка HTML вместо кнопки изображения HTML), но я не нашел это удовлетворительным для меня из-за различий как ведут себя разные браузеры ( см. этот вопрос ).