无法将值添加到列表C＃MVC ASP.NET

Question

I would like to add parts to a product in my web app but this only seems to work if its hardcoded.I've put the same code in the function and everything seems to work (in the console) but when creating the product the parts wont show in the detail page.The values wont bind to the list..

line break on if(Modelstate.IsValid) shows: Parts null

create controller

        // POST: Products/Create
    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Create(AddProductViewModel viewModel)
    {
        if (ModelState.IsValid)
        {
            _context.Add(viewModel.Product);

            await _context.SaveChangesAsync();
            return RedirectToAction(nameof(Index));
        }
        return View();
    }

Create product view

 @model IctWizard.ViewModel.AddProductViewModel @{ ViewData["Title"] = "Create"; } <script> var i = 0; jQuery('document').ready(function ($) { $('#plus').click(function () { inputValues = $('#partInput').val(); content = $('#partInput :selected').text(); console.log(content); $("#parts").find("tbody").append("<tr><td><input asp-for=\\"Product.ProductParts[" + i + "].PartId\\" value=\\"" + inputValues + "\\" /></td></tr>"); console.log($("#parts").find("tbody")); i++; }); }) </script> <h1>Create product</h1> <hr /> <div class="row"> <div class="col-md-4"> <form asp-action="Create"> <div asp-validation-summary="ModelOnly" class="text-danger"></div> <div class="form-group"> <label asp-for="Product.ProductName" class="control-label">Product name</label> <input asp-for="Product.ProductName" class="form-control" /> <span asp-validation-for="Product.ProductName" class="text-danger"></span> </div> <div> </div> <div class="form-group"> <label asp-for="Product.ProductPrice" class="control-label">Product price</label> <input asp-for="Product.ProductPrice" class="form-control" /> <span asp-validation-for="Product.ProductPrice" class="text-danger"></span> </div> <div class="form-group"> <label asp-for="Product.ReleaseDate" class="control-label">Release date</label> <input asp-for="Product.ReleaseDate" class="form-control" /> <span asp-validation-for="Product.ReleaseDate" class="text-danger"></span> </div> <div class="form-group"> <label class="control-label"></label> <select name="Part" id="partInput"> @foreach (var part in Model.Parts) { <option value="@part.Id">@part.Description</option> } </select> <div class="btn btn-primary" id="plus">Add part</div> </div> <div class="row"> <div class="col-sm-12"> <table id="parts"> <thead> <tr> </tr> </thead> <tbody><tr><td> @** <input type="hidden" asp-for="Product.ProductParts[0].PartId" value="7" /> <input type="hidden" asp-for="Product.ProductParts[0].PartId" value="6" /> <input type="hidden" asp-for="Product.ProductParts[1].PartId" value="7" /> <input type="hidden" asp-for="Product.ProductParts[2].PartId" value="8" /> <input type="hidden" asp-for="Product.ProductParts[0].Quantity" value="2" /> <input type="hidden" asp-for="Product.ProductParts[1].Quantity" value="5" /> <input type="hidden" asp-for="Product.ProductParts[2].Quantity" value="9" />*@ </td> </tr> </tbody> </table> </div> </div> <div class="form-group"> <hr/> <input type="submit" value="Create product" class="btn btn-primary" style="margin-top: 10px"/> </div> </form> </div> </div> <div> <a asp-action="Index">Back to List</a> </div> @section Scripts { @{await Html.RenderPartialAsync("_ValidationScriptsPartial");} } 

Product model

 using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations; using System.Linq; using System.Threading.Tasks; using Microsoft.EntityFrameworkCore; namespace IctWizard.Models { public class Product { public int Id { get; set; } public string ProductName { get; set; } public int ProductPrice { get; set; } [DataType(DataType.Date)] public DateTime ReleaseDate { get; set; } public IList<ProductPart> ProductParts { get; set; } } } 

ProductPart

 using Microsoft.EntityFrameworkCore; using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations; using System.Linq; using System.Threading.Tasks; namespace IctWizard.Models { public class ProductPart { public int ProductId { get; set; } public int PartId { get; set; } public Product Product { get; set; } public Part Part { get; set; } [Required] public int Quantity { get; set; } } } 

Part model

 using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations; using System.Linq; using System.Threading.Tasks; using System.Data.SqlClient; using System.IO; using System.Text; namespace IctWizard.Models { public class Part { public int Id { get; set; } [Required] public string Description { get; set; } public IList<SupplierPart> SupplierParts { get; set; } public IList<ProductPart> ProductParts { get; set; } } } 

AddProductViewModel

 using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using IctWizard.Models; namespace IctWizard.ViewModel { public class AddProductViewModel { public Product Product { get; set; } public IList<Part> Parts { get; set; } } } 

Answer 1

In .net core, VS allows asp-for to give you IntelliSense, however upon the page rendering, Razor generates additional HTML for you.

When you hard code a hidden input, it will work because it correct adds all of the HTML attributes necessary for model binding to correctly occur when posting the form.

To correct for this, you need to look at your HTMl after it is rendered to figure out how to recreate what the Razor engine has done for you in Javascript.

For this example, try changing your JS to do the following (adding the name attribute and dropping the asp - model binding is expecting the name attribute. ):

<script>
var i = 0;
jQuery('document').ready(function ($) {


    $('#plus').click(function () {


        inputValues = $('#partInput').val();
        content = $('#partInput :selected').text();
        console.log(content);
        $("#parts").find("tbody").append("<tr><td><input for=\"Product.ProductParts[" + i + "].PartId\" name=\"Product.ProductParts[" + i + "].PartId\" value=\"" + inputValues + "\" /></td></tr>");
        console.log($("#parts").find("tbody"));
        i++;
    });
})
</script>

Check this out for more information: https://docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/intro?view=aspnetcore-2.2