Using two button in a form calling different actions

Question

I have a form on my page:

@using(Html.BeginForm("DoReservation","Reservation"))
{
...some inputs
<button id="recalculate">Recalculate price</button>
<button id="submit">Submit</button>
}

When I click the "Recalculate price" button I want the following action to be invoked:

public ActionResult Recalculate(FormCollection form)
{
 var price = RecalculatePrice(form);
 ... do some price recalculation based on the inputs
return PartialView("PriceRecalculation",price);
}

When I click the "Submit" button I want the "DoReservation" action to be invoked (I want the form to be submitted). How can I achieve something like that?

possible duplicate of [How do you handle multiple submit buttons in ASP.NET MVC Framework?](http://stackoverflow.com/questions/442704/how-do-you-handle-multiple-submit-buttons-in-asp-net-mvc-framework) — JasCav, Feb 16 '12 at 22:27
@JasCav may be correct about it being a duplicate.. another option may be to use jquery to attach to the button click to rewrite the form action before it is submitted? — Trevor Pilley, Feb 16 '12 at 23:07
@TrevorPilley - You are correct, you could do that. But, then you are relying on JavaScript (which is typically fair, but not always guaranteed). The method(s) I linked to in the duplicate will work in all cases. — JasCav, Feb 16 '12 at 23:11
I want the first action to return a partial view with a price specification and place it in some div on my page — niao, Feb 16 '12 at 23:20

Azadeh Khojandi · Accepted Answer · 2012-02-18T13:08:14.580

What I can suggest is , adding a new property to your view model and call it ActionType.

public string ActionType { get; set; }

and then change your cshtml file like below

 @using (Html.BeginForm())
    {
        <div id="mytargetid">    
                ...some inputs*@
        </div>
        <button type="submit" name="actionType" value="Recalculate" >Recalculate price</button>
        <button type="submit" name="actionType" value="DoReservation" >Submit</button>
 }

in post action method based on ActionType value you can decide what to do !

I noticed that in your comments you mentioned you need to return partial and replace if with returning partial , no problem , you can use

 @using (Ajax.BeginForm("DoProcess", new AjaxOptions { UpdateTargetId = "mytargetid", InsertionMode = InsertionMode.Replace }))

and in controller change your action to return partial view or java script code to redirect page

 public ActionResult DoProcess(FormModel model)
        {
            if (model.ActionType == "Recalculate")
            {
                return PartialView("Test");
                }
            else if (model.ActionType == "DoReservation")
            {
                return JavaScript(string.Format("document.location.href='{0}';",Url.Action("OtherAction")));


            }
            return null;
        }

@Azadah Khojandi thank you for your answer - but I mentioned that only the "recalculation" action should return the partial view and replace the content of a specific div. The second action should redirect to some view. Well, generally it can also works in a way where partial views are returned from both actions, but they will have to replace the different divs. — niao, Feb 17 '12 at 07:27
@niao for redirect to different page in ajax call you can use return JavaScript(string.Format("document.location.href='{0}';",Url.Action("About"))); — Azadeh Khojandi, Feb 18 '12 at 13:09

Using two button in a form calling different actions

1 Answers1