No Validation in Modal Partial View Asp .Net Core 3 - asp.net-core

Question

I use Modal and Load Partial view to it, but if I keep fields blank no validation happened and modal closed after click submit button.
Also I use Required annotation in my viewmodel. Also when I click submit it calls action direct in controller.
My Question: how can I display a validation message in modal form?
#section scripts{
<script>
function onFailureDefault(data) {
$("#AddOrderDetailModalDiv").valid()
}
function OpenAddOrderDetailTempItemOnSuccess() {
$("#AddOrderDetailModalDiv").modal("show");
}
function AddOrderDetailTempItemOnComplete() {
$("#AddOrderDetailModalDiv").modal("hide");
}
</script>
}
#model OrderDetailViewModel
#using (Html.BeginForm("AddOrderDetailTempItem", "Orders", FormMethod.Post, new
{
id = "AddForm",
#data_ajax = "true",
#data_ajax_method = "post",
#data_ajax_update = "#OrderDetailList",
#data_ajax_failure = "onFailureDefault",
#data_ajax_complete = "AddOrderDetailTempItemOnComplete"
}))
{
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg" role="document">
<div class="modal-content">
<div class="modal-header bg-warning white">
<h5 class="modal-title" id="exampleModalCenterTitle">#( Model.ID > 0 ? "Edit Product" : "Add Product" )</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div>
#Html.HiddenFor(m => m.ID)
<div asp-validation-summary="All" class="text-danger"></div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label asp-for="ProductId" class="control-label"></label>
#Html.DropDownListFor(m => m.ProductId, Model.ProductsList, " ", htmlAttributes: new { #class = "select2 form-control" })
<span asp-validation-for="ProductId" class="text-danger"></span>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label asp-for="Quantity" class="control-label"></label>
<input asp-for="Quantity" required class="form-control" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label asp-for="Unit" class="control-label"></label>
#Html.DropDownListFor(m => m.Unit, Model.QuantityUnitsList, " ", htmlAttributes: new { #class = "form-control" })
<span asp-validation-for="Unit" class="text-danger"></span>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label asp-for="UnitPrice" class="control-label"></label>
<input asp-for="UnitPrice" class="form-control" />
</div>
</div>
<label id="ErrorMessage" asp-for="ErrorMessage" class="form-control" />
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" value="Add Product" id="postSave" class="btn btn-primary" />
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
}
[HttpPost]
public ActionResult AddOrderDetailTempItem(OrderDetailViewModel model)
{
if (!ModelState.IsValid)
{
return View(model);
}
List<OrderDetailViewModel> models = OrderDetailViewModelList;
var product = productService.SingleBy(model.ProductId);
if (model.ID > 0)
{
var updatedItem = models.Find(m => m.ID == model.ID);
updatedItem.Quantity = model.Quantity;
updatedItem.ProductId = model.ProductId;
updatedItem.UnitPrice = model.UnitPrice;
updatedItem.TotalPrice = model.Quantity * model.UnitPrice;
updatedItem.ProductName = product.Name;
updatedItem.Unit = model.Unit;
updatedItem.QuantityUnitsText = ((QuantityUnits)model.Unit).ToString();
updatedItem.isActive = true;
//mapper.Map(model,updatedItem);///
}
else
{
models.Add(new OrderDetailViewModel
{
ID = counter - 1,//models.Count + 1,
Quantity = model.Quantity,
ProductId = model.ProductId,
UnitPrice = model.UnitPrice,
TotalPrice = model.Quantity * model.UnitPrice,
ProductName = product.Name,
Unit = model.Unit,
QuantityUnitsText = ((QuantityUnits)model.Unit).ToString(),
isActive = true,
});
counter -= 1;
}
OrderDetailViewModelList = models;
return PartialView("_OrderDetailGridPartial", OrderDetailViewModelList.Where(a => a.isActive == true).ToList());
}
Parent View
#using (Html.BeginForm("AddOrder", "Orders", FormMethod.Post, new
{
id = "AddForm",
#data_ajax = "true",
#data_ajax_method = "post",
//#data_ajax_update = "#OrderDetailList",
#data_ajax_complete = "AddOrderOnComplete"
}))
{
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label asp-for="DeliveryDate" class="control-label"></label>
<input asp-for="DeliveryDate" class="form-control" type="date" />
<span asp-validation-for="DeliveryDate" class="text-danger"></span>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label asp-for="OrderDate" class="control-label"></label>
<input asp-for="OrderDate" class="form-control" disabled type="date" />
<span asp-validation-for="OrderDate" class="text-danger"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label asp-for="CustomerId" class="control-label"></label>
#Html.DropDownListFor(m => m.CustomerId, Model.CustomersList, "Please select", htmlAttributes: new { #class = "select2 form-control" })
<span asp-validation-for="CustomerId" class="text-danger"></span>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label asp-for="Notes" class="control-label"></label>
<textarea asp-for="Notes" rows="4" class="form-control"></textarea>
<span asp-validation-for="Notes" class="text-danger"></span>
</div>
</div>
</div>
<div class="content-header row">
<div class="content-header-left col-md-9 col-12 mb-2">
</div>
<div class="content-header-right text-md-right col-md-3 col-12">
<div class="form-group breadcrum-right">
<button type="button" class="btn bg-gradient-danger mr-1 mb-1 waves-effect waves-light">
<i class="feather icon-package">
#Html.ActionLink("Add Product", "AddOrderDetailTempItem", "Orders", routeValues: null, htmlAttributes: new
{
Style = "color:White;font-family:'Montserrat';padding-left: 10px;",
#data_ajax = "true",
#data_ajax_method = "Get",
#data_ajax_update = "#AddOrderDetailModalDiv",
#data_ajax_failure = "onFailureDefault",
#data_ajax_success = "OpenAddOrderDetailTempItemOnSuccess",
})
</i>
</button>
</div>
</div>
</div>
<div id="OrderDetailList">
<partial name="_OrderDetailGridPartial.cshtml" model="Model.OrderDetailViewModel" />
</div>
<div class="form-group col-sm-3">
<input type="submit" name="btn" value="Save" class="btn btn-primary" />
</div>
}
My Model
public class OrderDetailViewModel
{
public int ID { get; set; }
public int OrderId { get; set; }
[Required(ErrorMessage = "حقل إجباري")]
[Display(Name ="Product Name")]
public int ProductId { get; set; }
public string ProductName { get; set; }
[Required(ErrorMessage = "حقل إجباري")]
public int Unit { get; set; }
[Required(ErrorMessage = "حقل إجباري")]
public int Quantity { get; set; }
[Required(ErrorMessage = "حقل إجباري")]
public decimal UnitPrice { get; set; }
public decimal TotalPrice { get; set; }
public SelectList ProductsList { get; set; }
public SelectList QuantityUnitsList { get; set; }
public bool isActive { get; set; }
public string QuantityUnitsText { get; set; }
public string ErrorMessage { get; set; }
}

Answer 1

Your code is not complete，so I provide a work demo,you can check it.
Model:
public class Student
{
public int Id { get; set; }
[Required]
public string Name { get; set; }
}
_OrderDetailGridPartial:
#model Student
<div id="MyModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header" >
<h4 class="modal-title" >Update Role</h4>
</div>
<div class="modal-body">
<form id="myform" method="post">
<div>
<label>Id</label>
<input asp-for="Id" />
<span asp-validation-for="Id" class="text-danger"></span>
</div>
<div>
<label>Name</label>
<input asp-for="Name" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<button id="button" class="btn btn-default">Save</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Index View:
<button id="showmodal" class="btn btn-danger">
Click
</button>
<div id="partical">
<partial name="~/Views/Shared/_OrderDetailGridPartial.cshtml" />
</div>
#section scripts{
<script>
$("#showmodal").click(function () {
$('#MyModal').modal('show');
})
$("#button").click(function (e) {
e.preventDefault();
var model = $('#myform').serialize();
console.log(model);
$.ajax({
type: 'POST',
url: 'home/index',
async: false,
contentType: "application/x-www-form-urlencoded; charset=utf-8",
data: model,
success: function (result) {
$('#partical').html(result);
$('#MyModal').modal('show');
}
});
})
</script>
}
Action:
public IActionResult Index()
{
return View();
}
[HttpPost]
public IActionResult Index(Student student)
{
if (!ModelState.IsValid)
{
return PartialView("_OrderDetailGridPartial",student);
}
return View();
}
Test result