Question

我在Asp.net mvc中有一个订单系统。

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

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

如果用户点击下拉列表，则下拉列表将填充选项。我想用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>

我的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>

我的控制器：

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);
        }

如何使用此下拉列表的点击事件使用ajax从数据库填充dropdownlist的选项？

第一次加载时，

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

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

0 个答案: