Hi rani,
Check this example. Now please take its reference and correct your code.
Model
public class Customer
{
public string Name { get; set; }
public string Country { get; set; }
}
Controller
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
[HttpPost]
public IActionResult Index(Customer customer)
{
if (ModelState.IsValid)
{
System.Threading.Thread.Sleep(1000);
return Json(customer);
}
else
{
return Json(customer);
}
}
}
View
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model Ajax_BeginForm_Popup_Core_MVC.Models.Customer
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style type="text/css">
body {
font-family: Arial;
font-size: 10pt;
margin: 0;
padding: 0;
}
input[type=text], select {
width: 150px;
}
.modal {
position: fixed;
z-index: 999;
height: 100%;
width: 100%;
top: 0;
background-color: Black;
filter: alpha(opacity=60);
opacity: 0.6;
-moz-opacity: 0.8;
display: none;
}
.center {
z-index: 1000;
margin: 50px auto;
padding: 10px;
width: 130px;
background-color: White;
border-radius: 10px;
filter: alpha(opacity=100);
opacity: 1;
-moz-opacity: 1;
}
.center img {
height: 120px;
width: 120px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Insert</button>
<form asp-action="Index" asp-controller="Home"
data-ajax="true" data-ajax-method="POST"
data-ajax-begin="OnBegin" data-ajax-failure="OnFailure"
data-ajax-success="OnSuccess" data-ajax-complete="OnComplete">
<div id="exampleModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Customer Details Form</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Name:</label>
<input type="text" asp-for="Name" class="form-control" required />
</div>
<div class="form-group">
<label>Country:</label>
<input type="text" asp-for="Country" class="form-control" required />
</div>
</div>
<div class="modal-footer">
<input type="submit" value="Submit" class="btn btn-primary" />
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
</div>
<div id="progress" class="modal">
<div class="center">
<img src="~/images/Loader.gif" />
</div>
</div>
<script type="text/javascript">
function OnBegin() {
$("#progress").show();
}
function OnFailure(response) {
alert("Error occured.");
}
function OnSuccess(response) {
var message = "Name: " + response.Name;
message += "\nCountry: " + response.Country;
alert(message);
}
function OnComplete() {
$("#progress").hide();
$("#exampleModal").modal("hide");
}
</script>
</body>
</html>
