I am trying to show a Bootstrap Modal popup while performing a save function in my MVC controller. I can debug through the controller and the popup displays. However when the controller returns, the success or failure call in the ajax function is never hit. Can anyone help?
I have a Controller function set like this:
public class MyTestController : Controller
{
[HttpPost]
public IActionResult MySave(MyViewModel model)
{
if (ModelState.IsValid)
{
return RedirectToAction("Index", "Tools");
}
return RedirectToAction("Index", model);
}
}
In my .cshtml page, I have set my form up like this:
@model MyViewModel
using (Html.BeginForm("MySave", "MyTest", FormMethod.Post,
new { encType = "multipart/form-data", id = "newToolForm", name = "newToolForm" }))
{
<form id="newToolForm" method="post" asp-action="">
@Html.Partial("DetailsView", Model)
<hr />
<div class="form-group">
<div class="col-md-offset-5 col-md-1">
<input type="submit" value="Save" class="btn" id="save" />
</div>
</div>
<div id="busyModal" class="modal fade" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 id="busymodaltitle" class="modal-title" />
</div>
<div class="modal-body">
<p id="busymodalbody" />
</div>
</div>
</div>
</div>
</form>
}
In my scripts section I have the following ajax call:
@section Scripts
{
@{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
<script type="text/javascript">
$(document).ready(function () {
//// Attach click handler to the submit button:
//$('#save').click(function () {
// $('#newToolForm').submit();
//});
// Handle the form submit event, and make the Ajax request:
$("#newToolForm").on("submit", function (event) {
event.preventDefault();
$("#busyModal").modal('toggle');
var url = $(this).attr("action");
var formData = $(this).serialize();
$.ajax({
url: url,
type: "POST",
data: JSON.stringify(formData),
dataType: "json",
processData: false,
success: function (resp) {
$('#busyModal').modal('toggle');
},
failure: function (resp) {
$('#busyModal').modal('toggle');
}
})
});
});
</script>
}