Model binding is not properly working in input parameter controller in .Net Core

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.

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">&times;</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>