Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ASP.NET MVC: Multiple submit buttons using Ajax.BeginForm

I want to create a page that has a next button and previous button that switches the image displayed.

For that purpose I created an Ajax.BeginForm and inserted into it, an image and two submit buttons.

Can I (should I) have multiple submit buttons inside an Ajax.BeginForm?

How would the controller handle each submit separately?

like image 364
kroiz Avatar asked Aug 17 '13 03:08

kroiz


People also ask

Can we use multiple BeginForm in MVC?

Thanks for your help ! Multiple form tags should work fine in MVC unless they are nested.

How do I apply multiple submit buttons in one form?

Let's learn the steps of performing multiple actions with multiple buttons in a single HTML form: Create a form with method 'post' and set the value of the action attribute to a default URL where you want to send the form data. Create the input fields inside the as per your concern. Create a button with type submit.

Which function is used to handle multiple submit buttons?

Multiple buttons with different names To display a data entry textboxes EditorForModel() helper is used. You can very well use helpers such as TextBoxFor() and LabelFor() if you so wish. There are two submit buttons - one with name attribute set to save and the other with name of cancel.


3 Answers

Try this,

View

@model TwoModelInSinglePageModel.RegisterModel
@using (Ajax.BeginForm("DYmanicControllerPage", "Test", FormMethod.Post,null, new { id = "frmSignUp" }))
{ 
  <div>
                <input type="hidden" id="" name="hidden2" id="hdasd" />
                @Html.HiddenFor(m => m.hidden1)
                @Html.LabelFor(m => m.Name)
                @Html.TextBoxFor(m => m.Name)
                @Html.ValidationMessageFor(m => m.Name)
            </div>
            <br />
            <div>
                @Html.LabelFor(m => m.Address)
                @Html.TextBoxFor(m => m.Address)
                @Html.ValidationMessageFor(m => m.Address)
            </div>
            <br />
            <div>
                @Html.LabelFor(m => m.PhoneNo)
                @Html.TextBoxFor(m => m.PhoneNo)
                @Html.ValidationMessageFor(m => m.PhoneNo)
            </div>

 <input type="submit" value="Save"  id="btnSave" name="ButtonType"/>
 <input type="submit" value="Next"  id="btnNext" name="ButtonType" />


}

Controller

  [HttpPost]
        public ActionResult DYmanicControllerPage(RegisterModel model,  string ButtonType)
        {
        if(ButtonType == "Next")
        {
            // Do Next Here
        }
        if (ButtonType == "Save")
        {
            //Do save here
        }
        return JavaScript("REturn anything()");

        }
like image 118
Jaimin Avatar answered Oct 28 '22 02:10

Jaimin


I would recommend that you have two buttons and then depending on what button was clicked you could set the action on the form:

Razor

$(function (){
    $("#btn-prev").click(function() {
        $("#form").attr
                   (
                      "action",
                      "@Url.Action("Action", "Controller", new {area="Area" })", 
                   ).submit();
    });
    $("#btn-next").click(function() {
        $("#form").attr
                   (
                      "action",
                      "@Url.Action("Action", "Controller", new {area="Area" })", 
                   ).submit();
    });
});

I am using jQuery here to do this, but I think you can get the idea.

like image 24
Sam Avatar answered Oct 28 '22 04:10

Sam


I had the same requirement/issue and tried both solutions here and they both work for me. I LIKE the idea of setting the action via jquery when clicking so I can keep my actions separate so they can be used by other views.

HOWEVER, I've found that when I do this while I debug, it posts TWICE and BOTH the OnSuccess and OnFailure are triggered. It only happens when debugging though. Keep this in mind when picking.

like image 24
citronsmurf Avatar answered Oct 28 '22 03:10

citronsmurf