Hi tex,
Use ajax beforeSend and complete event.
Refer below sample.
Controller
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
public JsonResult AjaxMethod()
{
return Json(new { Status = "success", Time = DateTime.Now.ToString() });
}
}
View
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style type="text/css">
.modal {
position: fixed;
z-index: 999;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: Black;
filter: alpha(opacity=60);
opacity: 0.6;
-moz-opacity: 0.8;
}
.center {
z-index: 1000;
margin: 10px auto;
padding: 10px;
width: 105px;
background-color: White;
border-radius: 10px;
filter: alpha(opacity=100);
opacity: 1;
-moz-opacity: 1;
}
.center img {
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<input type="button" value="Submit" id="btnSubmit" />
<hr />
<span id="lblTime"></span>
<div class="modal" style="display: none">
<div class="center">
<img alt="" src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/images/bx_loader.gif" />
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#btnSubmit').on('click', function () {
$.ajax({
type: 'POST',
url: '/Home/AjaxMethod',
data: '{}',
contentType: 'application/json',
beforeSend: function (xhr) {
$(".modal").show();
},
success: function (response) {
if (response.Status === "success") {
$("#lblTime").html(response.Time);
}
},
complete: function () {
$(".modal").hide();
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
});
</script>
</body>
</html>
Screenshot
