2009-08-26 6 views
3

En général, est-il possible d'avoir deux boutons différents dans le même formulaire que des actions de contrôleur différentes dans ASP.NET MVC?Utilisation de 2 boutons dans le même formulaire ASP.NET MVC

J'essaie essentiellement d'avoir deux balises d'entrée (type = "button") sous la même forme, mais je veux qu'elles effectuent différentes actions de contrôleur. Je voudrais le faire dans quelques cas parce que je pense que cela fournit une bonne esthétique pour pouvoir cliquer sur les boutons plutôt que sur les hyperliens. Y at-il un moyen de le faire ou devrais-je le concevoir différemment?

Répondre

1

Quelques réflexions sur la manipulation dans le navigateur:

  • Vous pouvez utiliser des liens qui ressemblent à des boutons. C'est facile à faire, soit avec des images, soit en mettant le lien dans un élément de bloc avec des bordures.
  • Vous pouvez utiliser deux boutons qui ne sont pas soumis directement; ils appellent à la place une fonction javascript qui définit l'action de formulaire avant de soumettre.
+0

Les liens ne soumettent pas de formulaire. Dans le cas où ils le font (par JS) - alors où est la différence entre la 1ère et la 2ème approche? –

+0

Les liens peuvent effectuer une requête get, et vous pouvez utiliser JavaScript pour créer l'URL. Mais, vous avez raison - si vous avez besoin d'éléments de formulaire à soumettre, il n'y a aucun avantage réel pour les liens. –

+0

Le style des liens et des boutons pour regarder la même chose est finalement la direction que je suis allé. Merci pour la suggestion! – YeahStu

9

Pas vraiment possible sans Javascript. Avec Javascript, vous devez simplement définir différents gestionnaires de clics qui ont invoqué l'action appropriée.

$(function() { 
     $('#button1').click(function() { 
      $(form).attr('action', '<% Url.Action("action1") %>') 
       .submit(); 
      return false; // prevent default submission 
     }); 
     $('#button2').click(function() { 
      $(form).attr('action', '<% Url.Action("action2") %>') 
       .submit(); 
      return false; // prevent default submission 
     }); 
}); 
+0

S'il vous plaît noter que cet exemple utilise jQuery ... un excellent choix OMI. –

0

Cela n'a rien à voir avec ASP.NET MVC mais avec html. La seule façon de voir comment vous pouvez faire cela est de modifier l'attribut action de la balise de formulaire en utilisant javascript lors de la soumission du formulaire en vérifiant quel bouton a été pressé.

0

Eh bien, il y a plusieurs façons de gérer cela. En supposant que vous n'ayez pas envoyé de données avec le bouton, cliquez sur J'irais avec l'option 3. Si les données doivent être incluses, considérez l'option 1 avec une sorte de magasin de données temporaire (comme TempData).

  1. Une forme des messages à un contrôleur action sur la soumission et le contrôleur contrôles d'action qui touche était cliqué et envoie alors un RedirectToAction(). (pas grand)
  2. formes multiples sur un poste page aux actions de contrôleurs multiples (meilleure)
  3. A l'intérieur ou à l'extérieur une forme créer un input type="button" et lui donner un gestionnaire onclick qui redirige l'utilisateur à une action de contrôleur (Best)
+0

La redirection ne conserve pas les données transmises. Vous devez stocker les données dans TempData pour les conserver. – tvanfosson

+0

Bon point tvan. –

0

ai pas essayé, mais étant donné l'ID du bouton cliqué ne s'envoyé par HTTP POST, vous pourriez probablement faire quelque chose comme:

<input type="submit" name="GO" ID="GO" value="GO BUTTON" /> 
<input type="submit" name="STOP" ID="STOP" value="STOP BUTTON" /> 

Puis la fin mvc, ont seulement deux méthodes, une avec un paramètre go, une avec un paramètre stop.

0

Méthode n ° 1

Comment l'utilisation de deux formes différentes enveloppant les boutons, puis en utilisant les CSS pour positionner l'un d'entre eux de sorte qu'il semble être à l'intérieur de la forme « principale » (visuellement)?

Un exemple très rapide:

 
<fieldset id="CombinedForm"> 

<form ... action="Method1"> 
    ...form stuff here... 
    <input id="Button1" type="submit" value="Do something"> 
</form> 

<form ... action="Method2"> 
    ...form stuff here... 
    <input id="Button2" type="submit" value="Do something else"> 
</form> 

</fieldset> 

... Ensuite, en utilisant CSS comme suit:

 
#CombinedForm { 
    position: relative; 
    padding-bottom: 2em; /* leave space for buttons */ 
} 

#Button1, #Button2 { 
    position: absolute; 
    bottom: 0; 
} 

#Button1 { 
    left: 0; 
} 

#Button2 { 
    right: 0; 
} 

Le résultat devrait être que vous avez un fieldset ou div qui ressemble à une forme, ayant deux formulaires HTML réels à l'intérieur et deux boutons positionnés dans la boîte parent, mais soumis à des emplacements différents.

Méthode n ° 2

Une autre méthode se produit: ont les deux boutons de la même forme, montrant une action du contrôleur, qui décide alors (en fonction de la valeur du bouton cliqué) où l'action de redirection.

+0

# 1 - très probablement, ces boutons doivent soumettre les mêmes données, donc - cela ne fonctionnera pas. # 2 se sent juste maladroit - n'est-ce pas? :) –

+0

@Amis - tout se sent un peu gênant: p Mais si elles soumettent les mêmes données, et la seule différence est que faire avec, alors pour moi, cela ressemble à la même méthode avec un commutateur différent. TBH, il est plus que probable que ce soit utilisé pour les boutons OK/Annuler, où annuler n'a pas besoin de soumettre de données du tout. –

0

Son Javascript nécessaire ...

que diriez-vous

public ActionResult DoSomething() {

          // Certains logique métier
          TempData ["AffichéF oumValues ​​"] = Request.Form;
          si (Request.Form ("boutonA")! = Null)
          {
                RedirectToAction de retour ("ActionA", RouteData.Values) ;
         }
          RedirectToAction de retour ("ActionB", RouteData.Values);
}

1

Si vous voulez simplement quelque chose comme OK Annuler & boutons, alors jetez un oeil à this post by David Findley. J'utilise cette méthode dans ma vue Modifier, où j'ai un bouton Modifier et un bouton Supprimer. Le bouton Supprimer requiert uniquement l'ID de l'élément. Dans le code ci-dessous, vous pouvez voir que j'ai nommé mon attribut "AcceptFormValueAttribute". C'est une bonne méthode pour moi, parce que mon action Delete [Get] montre juste un message demandant confirmation, donc j'ai besoin de la redirection.

[ActionName("Edit")] 
    [AcceptFormValue(Name = "Action", Value = "Delete")] 
    [AcceptVerbs(HttpVerbs.Post)] 
    [ValidateAntiForgeryToken] 
    public ActionResult EditDelete(int? id) 
    { 
     return RedirectToAction("Delete", new { id = id }); 
    } 
0

Je pense que je peux suggérer plus simple. Par exemple, vous avez deux boutons: ButtonA, ButtonB et souhaitez effectuer une action différente sur chacun d'entre eux. solution la plus simple est: il suffit d'utiliser la déclaration BeginForm:

@using (Html.BeginForm("ButtonA" , "Home")) 
{ 
     <input type="submit" value="ButtonA"/> 
} 

@using (Html.BeginForm("ButtonB" , "Home")) 
{ 
     <input type="submit" value="ButtonB" /> 
} 

Vous devez également déclarer boutonA, actions ButtonB dans votre contrôleur Home:

[HttpPost] 
public ActionResult ButtonA() 
{ . . . } 

[HttpPost] 
public ActionResult ButtonB() 
{ . . . } 
Questions connexes