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\$

Your Answer

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

Browse other questions tagged or ask your own question.