Hi so I am trying prepopulate a row with data from my model. Following some tutorials I have made some progress but currently getting an error called "uncaught referenceerror: Model is not defined ". I have seen similar questions posted but still don't seem to understand how to fix my error. My code is as follows:

 <tbody>
                <tr>
                    <td>
                        <select  id="productOptions" onchange="changeDropDownValue(this)">
                           @* <option value="">Product</option>*@
                            @foreach (var product in Model.Product)
                            {
                                <option value="@product.ID">@product.Name</option>
                            }
                        </select>
                    </td>
                    <td>
                        <input asp-for="Product[0].Description" id="test" disabled />
                        <span asp-validation-for="Product[0].Description" ></span>
                    </td>
                    <td>
                        <input asp-for="Product[0].Quantity" />
                        <span asp-validation-for="Product[0].Quantity" ></span>
                    </td>
                    <td>
                        <input asp-for="Product[0].UnitPrice" disabled />
                        <span asp-validation-for="Product[0].UnitPrice" ></span>
                    </td>

                    <td>
                        <input asp-for="Product[0].Discount" />
                        <span asp-validation-for="Product[0].Discount" ></span>
                    </td>

                    <td>
                        <input asp-for="Product[0].Vat" disabled />
                        <span asp-validation-for="Product[0].Vat"  ></span>
                    </td>
                    <td>
                        <input asp-for="Product[0].NetTotal" disabled />
                        <span asp-validation-for="Product[0].NetTotal"  ></span>
                    </td>
                    <ttd>

                    </ttd>
                </tr>
</tbody>

  <script>

        function changeDropDownValue(test) {
            var selectedProductId = document.getElementById("productOptions").value;
         
            // Find the product with the matching ID in the Model.Product array
            var selectedProduct = Model.Product.find(product => product.ID == selectedProductId);

            // Update the input fields with the values of the selected product
            document.getElementById("test").value = selectedProduct.Description;
            document.getElementById("Product[0].Quantity").value = selectedProductId.Quantity;
            document.getElementById("Product[0].UnitPrice").value = selectedProductId.UnitPrice;
            document.getElementById("Product[0].Discount").value = selectedProductId.Discount;
            document.getElementById("Product[0].Vat").value = selectedProductId.Vat;
            document.getElementById("Product[0].NetTotal").value = selectedProductId.NetTotal;
        }
    
    </script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Mvc.Rendering;
using DotComFinal.Data;
using DotComFinal.Models;

namespace DotComFinal.Pages.Quotations
{
    public class CreateModel : SelectListPageModel
    {
        private readonly DotComFinal.Data.ApplicationDbContext _context;

        public CreateModel(DotComFinal.Data.ApplicationDbContext context)
        {
            _context = context;
        }
        [BindProperty]
        public Quotation Quotation { get; set; }
        
        [BindProperty]
        public List<Product> Product { get; set; }

        public IActionResult OnGet()
        {
            Product = _context.Products.ToList();
            Product.Insert(0, new Product { ID = 0, Name = "Select New Product" });

            PopulateDropDownList(_context);
        
            return Page();
        }
      
  

        // To protect from overposting attacks, see https://aka.ms/RazorPagesCRUD
        public async Task<IActionResult> OnPostAsync()
        {
          if (!ModelState.IsValid)
            {
                return Page();
            }

            _context.Quotations.Add(Quotation);
            await _context.SaveChangesAsync();

            return RedirectToPage("./Index");
        }
    }
}

I know my error is in the script but cant source a solution. THanks in advance for the assistance

CodePudding user response：

uncaught referenceerror: Model is not defined

The error is caused by var selectedProduct = Model.Product.find(product => product.ID == selectedProductId);because you are using c# code(Model.Product.find) with a js variable(selectedProductId).

You can try to set a js variable with c# variable,and since asp-for="Product[0].Quantity" will generate a name attribute with Product[0].Quantity",you need to use document.getElementsByName("Product[0].Quantity")[0].value :

@using Newtonsoft.Json;
@section Scripts{
<script>

    function changeDropDownValue(test) {
        var selectedProductId = document.getElementById("productOptions").value;
        var Products = @Html.Raw(JsonConvert.DeserializeObject(JsonConvert.SerializeObject(@Model.Product)));

        // Find the product with the matching ID in the Model.Product array
        var selectedProduct = Products.find(product => product.ID == selectedProductId);

        // Update the input fields with the values of the selected product
        document.getElementById("test").value = selectedProduct.Description;
        document.getElementsByName("Product[0].Quantity")[0].value = selectedProduct.Quantity;
        document.getElementsByName("Product[0].UnitPrice")[0].value = selectedProduct.UnitPrice;
        document.getElementsByName("Product[0].Discount")[0].value = selectedProduct.Discount;
        document.getElementsByName("Product[0].Vat")[0].value = selectedProduct.Vat;
        document.getElementsByName("Product[0].NetTotal")[0].value = selectedProduct.NetTotal;
    }

</script>

}