Hi rani,
Check this example. Now please take its reference and correct your code.
Model
using System.ComponentModel.DataAnnotations;
public class Customer
{
[Required(ErrorMessage = "Name Required!")]
public string Name { set; get; }
[Required(ErrorMessage = "Country Required!")]
public string Country { set; get; }
}
Controller
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Index(Customer customer)
{
if (ModelState.IsValid)
{
ModelState.Clear();
return PartialView("_DetailsView");
}
return PartialView("_DetailsView", customer);
}
}
View
Index
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model Ajax_BeginForm_Modal_Validation_Core_MVC.Models.Customer
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script src="~/lib/jquery.unobtrusive-ajax.min.js"></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-method="POST"
data-ajax="true" data-ajax-update="formDetails" data-ajax-complete="OnComplete">
<div id="exampleModal" class="modal fade" tabindex="-1" role="dialog" data-backdrop="static">
<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" id="formDetails">
<partial name="~/Views/_DetailsView.cshtml" model="Model" />
</div>
<div class="modal-footer">
<input id="btnSubmit" 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>
<script type="text/javascript">
function OnComplete() {
$("#exampleModal").modal("hide");
}
</script>
</body>
</html>
PartialView
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model Ajax_BeginForm_Modal_Validation_Core_MVC.Models.Customer
@Html.AntiForgeryToken()
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Country" class="control-label"></label>
<input asp-for="Country" class="form-control" />
<span asp-validation-for="Country" class="text-danger"></span>
</div>
Screenshot
