ASP.NET MVC - plusieurs boutons sur un formulaire

Question

Je voudrais avoir plusieurs boutons sous forme d'images sur ce formulaire:

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

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

<% Html.EndForm(); %> 

Je lis à propos Html.ActionImage mais je ne le vois pas dans Microsoft. Web.Mvc, je suppose qu'il a été supprimé, est-il un autre moyen d'ajouter les boutons?

Je voudrais enregistrer, supprimer, publier, annuler, etc boutons sur un formulaire, en tant qu'images, appelant de préférence chacun leur propre action dans le contrôleur.

Answer 1

Vous pouvez utiliser un bon ole html:

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

ou

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

ou l'un des aides

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

Dans tous les cas, vous aurez probablement besoin d'écrire un peu javascript sauf si vous voulez juste utiliser un lien pour annuler.

Voici un petit blog entry sur les aides.

Answer 2

Un choix de cours est d'avoir des formulaires séparés pour chaque bouton. Ceci n'est souvent pas possible ou facile sans JavaScript ou HTML mal formé. Cela vous permet d'envoyer facilement chaque requête à une méthode d'action différente.

C'est la solution que j'ai imaginée pour plusieurs boutons de soumission d'image. Je ne suis pas spécialement heureux mais cela fonctionne, et peut être facilement refactorisé plus tard si une alternative est intégrée dans le framework.

Dans votre HTML:

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

Dans la méthode d'action du contrôleur pour la forme:.

(Ceci est une méthode d'action A vous de décider comment mettre en œuvre chaque bouton)

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

méthode d'extension:

(Ceci trouve un paramètre de formulaire appelé Remove.x ou Skip.x ou Add.x et dénude la partie .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"); 
    } 
} 

Note: Une alternative consiste à utilisez CSS pour mettre une image d'arrière-plan sur un type de bouton Html.SubmitButton (un bouton HTML normal au lieu d'un bouton d'image HTML), mais je n'ai pas trouvé cela satisfaisant en raison des différents comportements des navigateurs (see this question).