Using Two Submit Buttons on MVC’s Ajax.BeginForm

You might be wondering if it is possible to have two or more buttons calling the same Action on the same Controller on your Ajax.BeginForm. Yes, you can do this and identify which buttons were pressed by indicating a name same property on all buttons and a value unique for each button.

Now let’s go to a code sample. Let's say you have a form with 2 buttons that does a Preview and the other one for Update. You need to name it similarly and we call it submit button, we need to give it a value which describes the action they are executing.

This is how it looks on code:

@using (Ajax.BeginForm("YourAction", "YourController",
    new AjaxOptions
    {
        UpdateTargetId = "content",
        OnBegin = "yourJavascriptBeginMethod($(this))",
        OnComplete = "yourJavascriptCompleteMethod()",
        OnFailure = "yourJavascriptFailureMethod"
 
    }))
{
/*Your form elements here*/
<button class="btn btn-primary form-control" 
id="previewButton" 
	name="submitButton" type="submit" 
	value="Preview">Preview</button>
<button class="btn btn-success form-control" 
id="updateButton" 
	name="submitButton" type="button" 
	value="Update">Update</button> 
}

Now that you indicated all the items needed in your view, let's grab that information on your controller and it’s really simple. Instead of just getting the model parameter, you also need to get that button attribute like the one we named as submitButton above. So in code, it will look like this:

public ActionResult YourAction(string submitButton, YourViewModel viewModel)
{
    switch (submitButton)
    {
        case "Preview":
            //Do your thing
        case "Update":
            //Do your thing
        default:
            //Do your thing
    }
 
    return View(viewModel);
}

Simple, right?

Now how about capturing that value on JavaScript? Well it’s also possible to have two submit buttons and capture it on the OnBegin AjaxOptions of the Ajax.BeginForm or any other property like OnComplete or OnFailure because that appears on the DOM structure when submitted, just use $(this) selector on the data object.

Having that in mind, you just pass that parameter to your JavaScript using any of the AjaxOptions property like the OnBegin and you are all good to go. In the sample above, it’s this line.

Now, if you notice, the data is like a query string so you have to use RegularExpressions to interpret the data usable for you so I also added a getParameterByName function below that extracts information from the data string object, so you just need to pass the parameter name to get the value.

function yourJavascriptBeginMethod(value) {
 
    var buttonValue = getParameterByName(value[0].data, "submitButton");
 
    switch (buttonValue) {
        case 'Update':
            //Do your stuff here
            break;
        case 'Preview':
            //Do your stuff here
            break;
        default:
            //default code block
    }
 
}
function getParameterByName(data, name) {
 
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
 
    name = '?' + name; //add ? on front of string for a simplified RegEx search
 
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), results = regex.exec(data);
 
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}