C# dropdownlist onclick从数据库Asp.net Mvc获取选项

我有一个Asp.NETMVC中的订单系统

在订单页面，我有100个产品在一个列表中。每个产品都有一个尺寸和颜色下拉列表

这意味着一个页面上有200个下拉列表。所有这些selectlist的选项都来自数据库。若我在控制器中编写一个查询，然后将它从控制器发送到视图，那个么当页面加载时，它会变慢。所以，我想找到解决这个问题的方法。 首先想到的是：

如果用户单击dropdownlist，dropdownlist将填充选项。我想用ajax来实现它

我的代码如下：

<tbody>
@foreach (var item in Model)
{
        <tr>
            <td>@item.ProductName</td>
            <td>
                <div class="form-group" style="width: 100%;">
                    <select id="select-size-@item.ID" class="form-control select2" style="width: 100%;">
                        <option selected="selected" disabled="disabled" value="0">Size</option>
                        @foreach (var size in item.ProductSizeList)
                        {
                            <option value="@size.ID">@size.SizeForOrder</option>
                        }
                    </select>

                </div>
            </td>
            <td>
                <div class="form-group" style="width: 100%;">
                    <select id="select-color-@item.ID" class="form-control select2" style="width: 100%;">
                        <option selected="selected" disabled="disabled" value="0">Color</option>
                        @foreach (var color in item.ProductColorList)
                        {
                            <option value="@color.ID">@color.ColorName</option>
                        }
                    </select>
                </div>
            </td>
            <td>
                <div class="form-group" style="width: 100%;">
                    <input type="text" id="number-quantity-@item.ID" class="form-control" style="width:100%;" />
                </div>
            </td>
            <td>
                <div id="price-@item.ID"></div>
            </td>
            <td>
                <div class="col-6"></div><a id="addtocart-@item.ID" class="btn btn-primary btn-sm" title="Add to Cart" href="#"><i class="fa fa-fw fa-cart-plus"></i>Add to Cart</a>
                <div class="col-6"><span id="result-@item.ID"></span></div>
            </td>

        </tr>
}

</tbody>

@foreach（模型中的var项目）
{
@item.ProductName
大小
@foreach（item.ProductSizeList中的变量大小）
{
@size.sizeforder
}
颜色
@foreach（item.ProductColorList中的变量颜色）
{
@color.ColorName
}
}

我的ajax代码：

<script>
    $(document).ready(function () {
        @foreach (var item in Model)
        {
        <text>
          $('select#select-size-@(item.ID)').onchange(function() {
                var id = $(this).data("id");
                var variationId = $('select#select-size-@(item.ID)').val();
                var colorid = $('select#select-color-@(item.ID)').val();
                var link = "/Order/GetSizes/";
                var a = $(this);
                $.ajax({
                    type: "GET",
                    url: link,
                    data: {proId:variationId},
                    success: function (result) {
                        var ddl = $('select#select-size-@(item.ID)');
                        ddl.empty();
                        $.each(result, function(index,item){
                            ddl.append(
                                $('<option/>', {
                                    value: item.ID,
                                    text: item.SizeForOrder
                                })
                                );
                        });
                    }
                });
            });
        </text>
        }

    });
</script>

$（文档）.ready（函数（）{
@foreach（模型中的var项目）
{
$（'select#select size-@（item.ID）'）。onchange（function（）{
var id=$（this.data（“id”）；
var variationId=$（'select#select size-@（item.ID）'）.val（）；
var colorid=$（'select#select color-@（item.ID）'）.val（）；
var link=“/Order/getsize/”；
var a=$（本）；
$.ajax({
键入：“获取”，
网址：link，
数据：{proId:variationId}，
成功：功能（结果）{
var ddl=$（'select#select size-@（item.ID）'）；
ddl.empty（）；
$。每个（结果、功能（索引、项目）{
ddl.append(
$('', {
值：item.ID，
文本：item.sizeforder
})
);
});
}
});
});
}
});

我的控制器：

public ActionResult Index()
        {
            List<Models.DTO.OrderDTO.NewOrderVM> orderlist = rpproduct.GetAll().OrderBy(x => x.OwnerCategory.CreateDate).ThenBy(x => x.ProductName).Select(a => new Models.DTO.OrderDTO.NewOrderVM()
            {
                ID = a.Id,
                ProductName = a.ProductName,
                ProductSizeList = rpproduct.FirstOrDefault(y => y.Id == a.Id && y.IsDeleted == false).Variations.Where(z => z.IsDeleted == false).Select(b => new Models.DTO.VariationDTO.VariationVM()
                {
                    //ID = b.Id,
                    //SizeForOrder = b.Height + "-" + b.Width + "-" + b.Sections,
                    //Quantity = rpstock.Quantity(b.Id),
                }).ToList(),

                ProductColorList = rpproduct.FirstOrDefault(x => x.Id == a.Id && x.IsDeleted == false).Colors.Where(h => h.IsDeleted == false).Select(c => new Models.DTO.OrderDTO.ColorForOrderVM()
                {
                    //ID = c.ColorId,
                    //ColorName = c.Color.ColorName,
                }).ToList(),

            }).ToList();

            return View(orderlist);
        }

        public JsonResult GetSizes(int proId)
        {
            List<Models.DTO.VariationDTO.VariationVM> ProductSizeList = new List<Models.DTO.VariationDTO.VariationVM>();
            ProductSizeList = rpproduct.FirstOrDefault(x => x.Id == proId && x.IsDeleted == false).Variations.Where(y => y.IsDeleted == false).Select(b => new Models.DTO.VariationDTO.VariationVM()
            {
                ID = b.Id,
                SizeForOrder = b.Height + "-" + b.Width + "-" + b.Sections
            }).ToList();

            return Json(ProductSizeList,JsonRequestBehavior.AllowGet);
        }

public ActionResult Index（）
{
List orderlist=rpproduct.GetAll（）.OrderBy（x=>x.OwnerCategory.CreateDate）。然后by（x=>x.ProductName）。选择（a=>newmodels.DTO.OrderDTO.NewOrderVM（）
{
ID=a.ID，
ProductName=a.ProductName，
ProductSizeList=rpproduct.FirstOrDefault（y=>y.Id==a.Id&&y.IsDeleted==false）。变体。其中（z=>z.IsDeleted==false）。选择（b=>newmodels.DTO.VariationDTO.VariationVM（）
{
//ID=b.ID，
//SizeForder=b.高度+“-”+b.宽度+“-”+b.截面，
//数量=库存数量（b.Id），
}).ToList（），
ProductColorList=rpproduct.FirstOrDefault（x=>x.Id==a.Id&&x.IsDeleted==false）.Colors.Where（h=>h.IsDeleted==false）.选择（c=>newmodels.DTO.OrderDTO.ColorForOrderVM（）
{
//ID=c.ColorId，
//ColorName=c.Color.ColorName，
}).ToList（），
}).ToList（）；
返回视图（订单列表）；
}
公共JsonResult GetSizes（int proId）
{
List ProductSizeList=新列表（）；
ProductSizeList=rpproduct.FirstOrDefault（x=>x.Id==proId&&x.IsDeleted==false）。变体。其中（y=>y.IsDeleted==false）。选择（b=>newmodels.DTO.VariationDTO.VariationVM（）
{
ID=b.ID，
SizeForder=b.高度+“-”+b.宽度+“-”+b.截面
}).ToList（）；
返回Json（ProductSizeList，JsonRequestBehavior.AllowGet）；
}

如何使用这个dropdownlist的click事件用ajax从数据库填充dropdownlist的选项

---

第一次加载页面时，DropDownList将为空。当用户单击DropDownList的箭头时，它将等待一段时间，DropDownList将填充数据库中的数据。有这样的例子吗？或者我如何搜索它，我的英语不好，所以我找不到解决这个问题的方法。

你还没有问过问题。你确定同时展示所有产品是个好主意吗？我想我从来没有在网上购物时一次在一个页面上看到那么多。我更新了我的问题。不是所有的电子商务网站都已经这样了吗？在名称上，产品列表页面。我不显示产品图片作为加号。我只有产品名称、产品尺寸的下拉列表和订单页面中产品颜色的下拉列表。