usr4896260 usr4896260 - 11 days ago 4
Javascript Question

How to use multiple submit buttons with Razor MVC 5.2.3 Ajax

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.

m0g m0g
Answer

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.

Comments