How to use multiple submit buttons with Razor MVC 5.2.3 Ajax

Question

I have a view which calls a partial view via ajax. The partial view has a table which is contained in another ajax form. Each row contains two submit buttons that I wish to map to two different actions, Save and Delete. However, when I submit either button, no data gets passed to the controller. The String submitAction and ProjectComment projectcomment contains no data comment data from the form. I have the following code:

MyView:

Index.cshtml

@model MyProject.Areas.MyComments.Models.ProjectComment

@using (Ajax.BeginForm("Details", null,
new AjaxOptions
{
     HttpMethod = "POST", // HttpPost
     InsertionMode = InsertionMode.Replace, // empty the target first
     UpdateTargetId = "commentTbl" // place content within #commentTbl
}, new { @class = "form-inline" }))
{
     @Html.AntiForgeryToken()
     <p>...</p>
     <div class="ibox float-e-margins">...</div>
}
<div id="commentTbl">...Partial View is loaded here...</div>

Partial View

Details.cshtml

@model IEnumerable<MyProject.Areas.MyComments.Models.ProjectComment>

@using (Ajax.BeginForm("Update", null,
new AjaxOptions
{
    HttpMethod = "POST", // HttpPost
    InsertionMode = InsertionMode.Replace, // empty the target first
    UpdateTargetId = "commentTbl" // place content within #commentTbl
}, new { @class = "form-inline" }))
{
<div class="ibox float-e-margins">
    <div class="ibox-title">...</div>
    <div class="ibox-content">
        <div class="table-responsive">
            <table class="table table-striped table-bordered table-hover dataTables-example" id="dataTables-comments">
                <thead>
                    <tr>
                        <th>
                            @Html.DisplayNameFor(model => model.Comment)
                        </th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @{int i = 0;}
                    @foreach (var projectcomment in Model)
                    {
                        <tr>
                            <td>
                                @Html.EditorFor(modelItem => projectcomment.Comment)
                            </td>
                            <td>
                                <button type="submit" id="save" class="btn btn-primary" name="Save" value='@i'>Save</button>
                                <button type="submit" id="delete" class="btn btn-primary" name="Delete" value='@i'>Delete</button>
                            </td>
                        </tr>
                        i++;
                    }
                </tbody>
            </table>
        </div>
    </div>
</div>
}

My Controller

CommentController.cs

[HttpPost]
public ActionResult Update(ProjectComment projectcomment, String submitAction)
{
    // submitAction is null and projectcomment contains no form data.
    if (submitAction.Equals("Save"))   
        return RedirectToAction("Save", projectcomment);
    else if (submitAction.Equals("Delete"))
        return RedirectToAction("Delete", projectcomment);
    else
        return HttpNotFound();
}

[HttpPost]
public ActionResult Save([Bind(Include="Comment")] ProjectComment projectcomment)
{
   // ... to do logic here
}

Please help with what I am doing wrong.

Answer 1

Modify you button name to match your parameter name. For example:

Your Code:

<button type="submit" id="save" class="btn btn-primary" name="Save" value='@i'>Save</button>
<button type="submit" id="delete" class="btn btn-primary" name="Delete" value='@i'>Delete</button>

What it should be:

<button type="submit" id="save" class="btn btn-primary" name="submitAction" value='Save'>Save</button>
<button type="submit" id="delete" class="btn btn-primary" name="submitAction" value='Delete'>Delete</button>

I modified the name to match your parameter name and value you are accepting in your controller. When you submit the form, you will now be passing the value to your parameter.