Model binding is not properly working in input parameter controller in .Net Core - asp.net-core-mvc

Question

I am trying to Alldata transfer a from Model to ViewModel.But the input parameter can't input several data. for that this data I can not use my session to create a cart system. Here is my code.`enter code here.
public class ProductVm: Spray
{ }
public class Spray
{
public int Id { get; set; }
[Required]
public String Name { get; set; }
[Required]
public decimal Price { get; set; }
public String Image { get; set; }
public String Image1 { get; set; }
[Required]
public String ProductColor { get; set; }
public DateTime Date { get; set; }
[Required]
public int Quantity { get; set; }
[Required]
public int Size { get; set; }
[Required]
public String Description { get; set; }
[Display(Name = "Product Type")]
public int ProductTypeId { get; set; }
[ForeignKey("ProductTypeId")]
public ProductTypes ProductTypes { get; set; }
}
[HttpGet]
public ActionResult Details(int? id)
{
if (id == null)
{
return NotFound();
}
var hi = _db.Spray.Include(c => c.ProductTypes).FirstOrDefault(c => c.Id == id);
ProductVm product = new ProductVm
{
Name = hi.Name,
Id = hi.Id,
Image = hi.Image,
Quantity = hi.Quantity,
Price = hi.Price,
};
if (product == null)
{
return NotFound();
}
return View(product);
}
[HttpPost]
[ActionName("Details")]
public async Task <IActionResult> ProductDetails(ProductVm pb)
{
List<Spray> sprays = new List<Spray>();
//if (id == null)
//{
// return NotFound();
//}
//var yes = _db.Spray.Include(c => c.ProductTypes).FirstOrDefault(c => c.Id == id);
ProductVm product = new ProductVm()
{
Name = pb.Name,
Id=pb.Id,
Image=pb.Image,
Quantity=pb.Quantity,
Price=pb.Price,
};
if (product == null)
{
return NotFound();
}
sprays = HttpContext.Session.Get<List<Spray>>("sprays");
if (sprays == null)
{
sprays = new List<Spray>();
}
sprays.Add(product);
HttpContext.Session.Set("sprays", sprays);
return RedirectToAction(nameof(Index));
}
#model ProductVm
#{
ViewData["Title"] = "Details.Cshtml";
}
#*#using OnlineShop.Utility
#using Microsoft.AspNetCore.Http
#inject IHttpContextAccessor HttpContextAccessor
#{
List<Laptop> laptops = HttpContextAccessor.HttpContext.Session.Get<List<Laptop>>("laptops");
Laptop laptop = null;
if (laptops != null)
{
laptop = laptops.FirstOrDefault(c => c.Id == Model.Id);
}
}
<br />*#
<h2 class="text-info"> Product Details</h2>
</br></br>
#*<form method="post" asp-action="" enctype="multipart/form-data">*#
<form method="post" asp-action="" enctype="multipart/form-data">
<div class="row">
<div class="col-1">
<img src="~/#Model.Image" style="width:100%" onclick="myFunction(this);">
</br></br>
<img src="~/#Model.Image1" style="width:100%" onclick="myFunction(this);">
</div>
<div class="col-4 container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:100%">
<div id="imgtext"></div>
</div>
<div class="col-4">
<h2>#Model.Name</h2>
<p><b>#Model.Description</b></p>
<h4>#Model.Price $</h4>
<small class="text-danger">Clearence</small>
</br>
<hr>
<h4>Size:#Model.Size</h4>
<h6>Product Color:#Model.ProductColor</h6>
</br></br></br></br>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<div class="col-sm-12 col-xs-12 spinner-block">
<div class="number-spinner">
<div class="input-group number-spinner">
<b class="mr-4"> <label asp-for="#Model.Quantity"></label></b></br>
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number btncartsniper" data-type="minus" data-dir="dwn"><span class="fa fa-minus fa-sm"></span></button>
</span>
<input asp-for="#Model.Quantity" class="form-control input-number Snippper_qty" value="0" type="number">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number btncartsniper" data-type="plus" data-dir="up"><span class="fa fa-plus fa-sm"></span></button>
</span>
</div>
</div>
</div>
#*#if (Model.Quantity > 0)
{
<h1>This Product Is InStock</h1>
}
else
{
<h1>Not InStock</h1>
}*#
</br>
<input type="submit" class="btn btn-dark form-control" value="Add To Cart" />
</div>
</div>
below picture, I am successful to transfer data to ViewModel but next failed to data-bind.
enter image description here
enter image description here
I am a beginner. Please, anyone, help me

Answer 1

can't scope this image under input tag
As #Ben mentioned, you can use hidden input to store the value that img needs to pass like:
<img src="~/#Model.Image" style="width:100%" onclick="myFunction(this);">
<input type="hidden" asp-for="Image">
Another way is to use ajax to pass any model you want:
<img src="~/#Model.Image" style="width:100%" onclick="myFunction(this);" data="#Model.Image">
<script>
var productVm =
{
//other fields
"Image": $("#Image").attr("data"),
}
$.ajax({
url: '/Home/Details',
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(productVm)
});
</script>

Answer 2

Your Quantity property is passing back through pb because it has an <input> property.
You need to make sure anything you want to pass back to POST action has an input tag associated with it. If you don't want the user to see it, type="hidden" is a good candidate. However, if those fields are not editable by a user you could simply just grab them in the POST action too if you need them.