CODEWITHSUNDEEP
htmlasp.net-mvc
YeahStu
YeahStu

Reputation: 4052

Using 2 buttons in same ASP.NET MVC Form

In general, is it possible to have two different buttons within the same form that post to different controller actions in ASP.NET MVC?

I am essentially trying to have two input (type="button") tags in the same form, but I want them to perform different controller actions. I would like to do this in a few cases because I think it provides a good aesthetic to be able to click buttons as opposed to hyperlinks. Is there a way to do this or should I design it differently?

Upvotes: 3

Views: 3397

Answers (9)

Arsen Khachaturyan
Arsen Khachaturyan

Reputation: 1

I think that I can suggest more simple one.

For example you have two buttons : ButtonA,ButtonB and want to perform different action on each one. Simplest solution is : just use BeginForm statement:

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

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

You must also declare ButtonA,ButtonB actions in your Home controller :

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

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

Upvotes: 0

jimr
jimr

Reputation: 191

If all you want is something like OK & Cancel buttons, then have a look at this post by David Findley.

I'm using this method on my Edit view, where I have an Edit button and a Delete button. The delete button only requires the Id of the item. In the code below you can see that I've named my attribute "AcceptFormValueAttribute". This is method good for me, because my Delete [Get] action just shows a message asking for confirmation, so needs the redirect.

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

Upvotes: 1

MarkKGreenway
MarkKGreenway

Reputation: 8764

Its not Javascript required...

how about this

public ActionResult DoSomething()
{
     // Some business logic
     TempData["PostedFormValues"] = Request.Form;
     if (Request.Form("ButtonA") != null)
     {
        return RedirectToAction("ActionA", RouteData.Values);
     }
     return RedirectToAction("ActionB", RouteData.Values);
}

Upvotes: 0

Keith Williams
Keith Williams

Reputation: 2357

Method #1

How about using two different forms wrapping the buttons, then using CSS to position one of them so that it appears (visually) to be inside the "main" form?

A really quick example:

<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>

...Then using CSS as follows:

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

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

#Button1 {
  left: 0;
}

#Button2 {
  right: 0;
}

The result should be that you have a fieldset or div which looks like a form, having two actual HTML forms inside it, and two buttons which are positioned within the parent box, yet submitting to different locations.

Method #2

Another method occurs: have both buttons in the same form, pointing to one controller action, that then decides (based on the value of the button clicked) which action to redirect to.

Upvotes: 0

Wyatt Barnett
Wyatt Barnett

Reputation: 15673

Haven't tried this, but given the ID of the clicked button does get sent VIA http POST, you could probably do something like:

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

Then on the mvc end, just have two methods, one with a go parameter, one with a stop parameter.

Upvotes: 0

Nathan Taylor
Nathan Taylor

Reputation: 24606

Well there are a few ways you could handle this. Assuming you aren't sending data with the button click I'd go with option 3. If data must be included then consider option 1 with some sort of temporary data store (like TempData).

  1. One form posts to one controller action on submit and the controller action checks which button was clicked and then dispatches a RedirectToAction(). (Not great)
  2. Multiple forms on one page post to multiple controller actions (Better)
  3. Inside or outside a form create an input type="button" and give it an onclick handler that redirects the user to a controller action (Best)

Upvotes: 0

tvanfosson
tvanfosson

Reputation: 532435

Not really possible without using Javascript. With Javascript you'd just have to define different click handlers that invoked the proper action.

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

Upvotes: 9

Jon Galloway
Jon Galloway

Reputation: 53115

Some thoughts about handling this in the browser:

  • You can use links which are styled to look like buttons. This is easy to do, either with images or by putting the link in a block element with borders.
  • You can use two buttons which don't directly submit; they instead call a javascript function that sets the form action before submitting.

Upvotes: 1

olle
olle

Reputation: 4595

This has nothing to do with ASP.NET MVC but with html. The only way I see how you could do this is by modifying the action attribute of the form tag using javascript on submission of the form by checking which button was pressed.

Upvotes: 0

Related Questions