1
\$\begingroup\$

I'm trying to filter items from an ecommerce site.The project on the local server was running smoothly.However, I noticed significant delays since the project was published on the global server.Most often happens when changes are made to the price range.

Here is the Ajax code:

        productFilter = {
        catId: $('#catId').val(),
        subcatId: $('#catSubId').val(),
        markaId: null,

    }
    $(".filter-button").click(function () {
        let filterPrice = $(this).val()
        let maxPrice = $("input[name='maxProPrice']").val();
        let minPrice = $("input[name='minProPrice']").val();
        updateAllData(filterPrice, productFilter.markaId, minPrice, maxPrice, productFilter.subcatId,
            productFilter.catId)
    })
    $(".btnRangePrice").click(function () {

        let maxPrice = $("input[name='maxProPrice']").val();
        let minPrice = $("input[name='minProPrice']").val();
        updateAllData(productFilter.markaId, minPrice, maxPrice, productFilter.subcatId, productFilter
            .catId)

    })
    $("#markaId").click(() => {
        $('input[name="marka"]').change(function () {
            if ($(this).prop('checked')) {
                productFilter.markaId = $(this).val()
            }
        })
    })

    function updateAllData(markaId, minPrice, maxPrice, subcatId, catId) {

        $.ajax({
            url: "/api/getpromarka",
            type: "Get",
            data: {
                'catId': catId,
                'subCatId': subcatId,
                'markaId': markaId,
                'minPrice': minPrice,
                'maxPrice': maxPrice,
                //'price':filtprice

            },
            success: function (res) {
                $("#prdcFor").empty();
                res.forEach(resf => {
                    document.querySelector("#prdcFor").insertAdjacentHTML('beforeend',
                        `
                    <div class="col-lg-3 col-md-4 col-sm-12 col-12">
                        <div
                            class="shopImg mb-3" style="height:400px;">
                            <div class="ImgDiv" style="height:200px">
                                <img class="shop-img pro_image" style="height:100%; width:100%" src="${resf.Image}" alt="">
                            </div>
                            <div class="img-text mt-3">
                                <span class="pro_name">${resf.Name}</span>

                            </div>
                            <p class="pro_price">${resf.Price} AZN</p>
                            <input class="hidePId" type="hidden" value="${resf.Id}" />

                            <div class="">
                                <button type="button" data-action="Add_To_Cart" class="btn btn-warning mb-5  add-to-cart">Səbətə Əlavə Et</button>
                            </div>
                            </div>
                            </div>

                            `)
                })
            }

        })
    }

Web Api 2 Controller :

 public IQueryable<Product> GetProduct(int? catId, int? subCatId, int? markaId,int? minPrice,int? maxPrice)
    {

        if (subCatId == null)
            return db.Products.Where(pr => pr.SubCategory.CategoryId == catId && pr.Price >= minPrice && pr.Price <= maxPrice && pr.MarkaId == markaId);

        if (markaId == null)
        {
             return db.Products.Where(pr => pr.SubCategory.CategoryId == catId && pr.SubCategoryId == subCatId && pr.Price >= minPrice && pr.Price <= maxPrice);
        }

        return db.Products.Where(pr=>pr.SubCategoryId==subCatId && pr.MarkaId==markaId && pr.Price>=minPrice && pr.Price<=maxPrice);
    }

Product cshtml

<section id="Shop" class="mt-5 mb-5">
<input id="catId" type="hidden" data-catid="subId" value="@catId" />
<input id="catSubId" type="hidden" data-subcatid="subCatId" value="@subId" />

<div class="container-fluid">
    <div class="row">
        <div class="mob-category col-md-4 col-lg-3">

            <div class="ShopCategory" data-aos="fade-right">

                @foreach (var item in Model.SubCategoryName.Where(sb=>sb.CategoryId==catId))
                {
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-10 col-10">
                                <a id="@item.Id" class="sub_cat_name accordion" href="@Url.Action("product","product",new { subId=item.Id})">
                                    <span>
                                        @item.Name
                                    </span>
                                </a>
                            </div>
                        </div>

                    </div>

                }
                <div class="col-md-12">

                    <a class="accordion" href="@Url.Action("PcTopla","Product")">
                        <span>
                            Pc Topla+
                        </span>
                    </a>
                </div>
                <br>
                <h3 class="mt-5 text-center pt-1" style="border-top:1px solid #ccc;">Qiymət</h3>
                <div class="price_range">
                    <div class="row mr-2 ml-2 mb-5">
                        <div class="col-md-5">
                            <div class="from">
                                <input name="minProPrice" class="num" type="number" id="price_from" min="@ViewBag.proMin" max="@ViewBag.proMax"
                                       value="@ViewBag.proMin"/>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <span>__</span>
                        </div>
                        <div class="col-md-5">
                            <div class="to">
                                <input class="num" name="maxProPrice" type="number" id="price_to" min="@ViewBag.proMin" max="@ViewBag.proMax" value="@ViewBag.proMax">
                            </div>
                        </div>

                    </div>

                    <h3 class="mt-3 text-center">İstehsalçı</h3>
                    <div class="company ml-5 mb-5">
                        <ul class="list-unstyled">

                            @foreach (var item in Model.marka)
                            {
                                <li>
                                    <input id="markaId" type="radio" name="marka" value="@item.Id">
                                    @item.MarkaName
                                </li>

                            }
                        </ul>

                    </div>
                </div>
                <div class="col d-flex justify-content-center">
                    <button type="submit" class="btnRangePrice btn btn-warning mb-3" >Seçimi göstər</button>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-12 col-md-8 col-lg-9">

            <div id="prdcFor" class="row">
                @foreach (var item in Model.productList)
                {
                    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-6">

                        <div class="shopImg mb-3" style="height:400px;">
                            <div class="ImgDiv" style="height:200px">
                                <img class="shop-img pro_image" style="height:100%; width:100%" src="@item.Image" alt="">
                            </div>
                            <div class="img-text mt-3">
                                <span class="pro_name">@item.Name</span>

                            </div>
                            <p class="pro_price">@item.Price AZN</p>
                            <input class="hidePId" type="hidden" value="@item.Id" />

                            <div class="addtocart">
                                <button type="button" data-action="Add_To_Cart" class="btn btn-warning mb-5  add-to-cart">Səbətə Əlavə Et</button>
                            </div>
                        </div>
                    </div>
                }
            </div>

        </div>
    </div>
</div>

\$\endgroup\$
1
\$\begingroup\$

You should not pass an IQueryable as a result. Convert it into an object or list of object and close the existing connection before passing it as a result. IQueryable is used to query the data before fetching it and hence the connection will stay open.

Basically, it's similar to Connection.open() and then not closing the connection.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.