如何在 Razor View ASP NET CORE 6 中获取值

Question

我正在开发发票功能。我创建了一个 seletec 框来选择我想要开票的产品。这是我的剃须刀视图

IEnumerable<ProductItem> lstProduct = ViewBag.ListProduct as IEnumerable<ProductItem>

<select class="ddlProduct" name="ddlProduct">
    @foreach (var item in lstProduct)
    {
        <option value="@item.ProductItemsId"> @item.Product.ProductName</option>
    }
</select>
   <select class="ddlSize" name="ddlSize">
       @{
          
           var list = lstSize.Where(n => n.ProductItemsId == selectedProductId);
           foreach (var item in list)
           {
               <option value="@item.ProductItemsId"> @item.Size.SizeName</option>
           }
       }
   </select>
   <select class="ddlColor" name="">
       @foreach (var item in lstColor)
       {
           <option value="@item.ProductItemsId"> @item.Colors.ColorName</option>
       }
   </select> 

网站会是这样的

我希望当用户更改产品时，颜色和尺寸也会相应地更改该产品的产品ID。我的设计数据库

所以无论如何我都可以获取productItemsID并传递给尺寸选择框和颜色 即可获得对应产品

我有很多 JavaScript 方法，但它不起作用。有人有解决办法吗？我真的很感谢你的贡献

Answer 1

我的控制器：

public IActionResult Product()
{
    ProductViewModel model = new ProductViewModel
    {
        Products = new List<Product>
        {
            new Product { Id = 1, Name = "air force 1" },
            new Product { Id = 2, Name = "air force 25" }
        },

        Sizes = new List<Size> {
            new Size { Id = 40, Name="40",ProductId = 1},
            new Size { Id = 41, Name="41",ProductId = 1},
            new Size { Id = 42, Name="42",ProductId = 1}
        }
    };
    return View(model);
}

public List<Size> getSizes(int id)
{
    var res = new List<Size>();
    if (id == 1)
    {
        return new List<Size> {
            new Size { Id = 40, Name="40",ProductId = 1},
            new Size { Id = 41, Name="41",ProductId = 1},
            new Size { Id = 42, Name="42",ProductId = 1}
        };
    }
    else
    {
        return new List<Size> {
            new Size { Id = 33, Name="33",ProductId = 2},
            new Size { Id = 35, Name="35",ProductId = 2},
        };
    }
}

查看代码

@model WebAppMvc.Models.ProductViewModel

<div class="form-group">
    <label asp-for="ProductId" class="control-label"></label>
    <select id="selectProduct" class="form-control" asp-for="ProductId"
            asp-items="@(new SelectList(Model.Products, nameof(Product.Id), nameof(Product.Name)))">
    </select>
    <span asp-validation-for="ProductId" class="text-danger"></span>
</div>
<div class="form-group">
    <label asp-for="SizeId" class="control-label"></label>
    <select id="selectSize" class="form-control" asp-for="SizeId"
            asp-items="@(new SelectList(Model.Sizes, nameof(Size.Id), nameof(Size.Name)))">
    </select>
    <span asp-validation-for="SizeId"></span>
</div>

@section Scripts{
    <script>
        $('#selectProduct').change(function () {
            var id = $(this).val();
            $('#selectSize').empty();
            $.ajax({
                url: '/Hello/getSizes?id=' + id,
                success: function (result) {
                    console.info(result);
                    $.each(result, function (i, data) {
                        console.info(i);
                        console.info(data);
                        $('#selectSize').append('<option value=' + data.id + '>' + data.name + '</option>');
                    });
                }
            });
        });
    </script>
}

我的模特：

public class ProductViewModel
{
    [Required(ErrorMessage = "Select a product")]
    public int ProductId { get; set; }
    public int SizeId { get; set; }

    public List<Product> Products { get; set; }
    public List<Size> Sizes { get; set; }
}

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
}

public class Size
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int ProductId { get; set; }
}