How to show error message in modal dialog from ASP.NET Core? - asp.net-core

Question

I have ASP.NET Core MVC project. In my core project, I am using fluent validation like this:
public class AddEntityViewModelValidator: AbstractValidator<AddEntityViewModel>
{
public AddEntityViewModelValidator()
{
RuleFor(x => x.Name)
.NotEmpty()
.WithMessage("You must enter name.");
}
}
My controller looks like this:
[HttpPost]
public async Task<IActionResult> CreateEntity(AddEntityViewModel addEntityViewModel)
{
try
{
if (!ModelState.IsValid)
{
var errors = ModelState.Values.SelectMany(v => v.Errors.Select(x => x.ErrorMessage)).ToList();
foreach(var error in errors)
{
ModelState.AddModelError("Error: ", error);
}
return View(addEntityViewModel);
}
await _businessLogic.CreateEntity(addEntityViewModel.Entity);
return View(addEntityViewModel);
}
catch (Exception)
{
return View(addEntityViewModel);
}
}
When user doesn't enter the name in model dialog, fluent validation do the work. This list of errors (var errors in controller) contains this error, so this part is working. But in my cshmtl modal-dialog this error message is not showing anywhere.
I have the the button for opening modal dialog:
<div id="PlaceHolderHere"></div>
<button type="button" class="btn btn-success" data-toggle="ajax-modal" data-target="#addEntity"
data-url="#Url.Action("AddEntity", "Entity", new { entityId = Model.Id})">
Add entity
</button>
and my jquery code:
$(function () {
var PlaceHolderElement = $('#PlaceHolderHere');
$('button[data-toggle="ajax-modal"]').click(function (event) {
var url = $(this).data('url');
var decodeUrl = decodeURIComponent(url);
$.get(decodeUrl).done(function (data) {
PlaceHolderElement.html(data);
PlaceHolderElement.find('.modal').modal('show');
})
})
PlaceHolderElement.on('click', '[data-save="modal"]', function (event) {
var form = $(this).parents('.modal').find('form');
var actionUrl = form.attr('action');
var sendData = form.serialize();
$.post(actionUrl, sendData).done(function (data) {
PlaceHolderElement.find('.modal').modal('hide');
location.reload(true);
})
})
})
Here is my modal-dialog:
#model AddEntityViewModel
<div class="modal fade" id="addEntity">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="addEntityLabel">#Model.Title</h3>
</div>
<div class="modal-body">
<form action="CreateEntity">
<div asp-validation-summary="All" class="text-danger wrapper"></div>
<div class="form-group">
<label asp-for="#Model.Entity.Name">Name</label>
<input asp-for="#Model.Entity.Name" class="form-control" />
<span asp-validation-for="#Model.Entity.Name" class="text-danger"></span>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" data-save="modal">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
So, i have this line:
<div asp-validation-summary="All" class="text-danger wrapper"></div>
but error is still now showing. Any idea how to solve this? Should I change something in my jquery function?