如何在尝试更改 asp.net 下拉列表值时使用 javascript onchange 事件

Question

您好，我正在尝试用我的模型中的数据预填充一行。按照一些教程，我取得了一些进展，但目前收到一个名为“未捕获的引用错误：模型未定义”的错误。我看到过类似的问题，但似乎仍然不明白如何解决我的错误。我的代码如下：

 <tbody>
                <tr>
                    <td>
                        <select class="btn btn-success  " 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" class="text-danger"></span>
                    </td>
                    <td>
                        <input asp-for="Product[0].Quantity" />
                        <span asp-validation-for="Product[0].Quantity" class="text-danger"></span>
                    </td>
                    <td>
                        <input asp-for="Product[0].UnitPrice" disabled />
                        <span asp-validation-for="Product[0].UnitPrice" class="text-danger"></span>
                    </td>

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

                    <td>
                        <input asp-for="Product[0].Vat" disabled />
                        <span asp-validation-for="Product[0].Vat"  class="text-danger"></span>
                    </td>
                    <td>
                        <input asp-for="Product[0].NetTotal" disabled />
                        <span asp-validation-for="Product[0].NetTotal"  class="text-danger"></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

Answer 1

未捕获的引用错误：模型未定义

该错误是由var selectedProduct = Model.Product.find(product => product.ID == selectedProductId);引起的，因为您正在使用带有js变量（selectedProductId）的c#代码（Model.Product.find）。

你可以尝试用c#变量设置一个js变量，因为asp-for="Product[0].Quantity"会用Product[0].Quantity"生成一个name属性，你需要使用 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>

}