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)
{
return Json(customer);
}
}
View
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model Ajax_BeginForm_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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/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>
</head>
<body>
<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 class="container">
<table class="table table-condensed">
<tr>
<td>Name : </td>
<td><input type="text" asp-for="Name" class="form-control" /></td>
</tr>
<tr>
<td>Country : </td>
<td><input type="text" asp-for="Country" class="form-control" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Submit" class="btn btn-primary" /></td>
</tr>
</table>
</div>
</form>
<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();
}
</script>
</body>
</html>
Screenshot
