价格过滤器（最低和最高价格），带有一个下拉菜单，asp.net核心

Question

I'm trying to filter through prices using javascript and asp.net core, and I've come up with a heap of javascript which doesn't really work. There has to be an easier way, using jquery or with c#?

If anyone has any suggestions it would be greatly appreciated!

   Price Filter
               <p>Sort By Price: </p>
                <select id="sort" onChange="OnSelectedIndexChange()">
                    <option value="all">All</option>
                    <option value="1">$0 - $50</option>
                    <option value="2">$51 - $100</option>
                    <option value="3">$101 - $150</option>
                    <option value="4">$151 + </option>
                </select>

    <div class="row">
        @{
            foreach (var item in Model.Products)
            {
                if (item.CategoryId == Model.CategoryId)
                {     
                <div class="card h-100" id="hamper">
                    <p id="price">$@item.Price</p>
                </div>
                }
            }
        }
    </div>
</div>

<!-- Javascript -->
<script type="text/javascript">
     var prices = [];
    @foreach(var item in Model.Products)
    {
         @:prices.push(@item.Price)
    }

    function OnSelectedIndexChange() {
        if (document.getElementById('sort').value == "all") {
            document.getElementById("hamper").style.display = "block";

        } else if (document.getElementById('sort').value == "1") {
            for (var i = 0; i < prices.length; i++) {
                if (prices[i] >= 0 && prices[i] <= 50 ) {
                    document.getElementById("hamper").style.display = "block";
                } else {
                    document.getElementById("hamper").style.display = "none";
                }
            }

        } else if (document.getElementById('sort').value == "2") {
            for (var i = 0; i < prices.length; i++) {
                if (prices[i] >= 51 && prices[i] <= 100) {
                    document.getElementById("hamper").style.display = "block";
                } else {
                    document.getElementById("hamper").style.display = "none";
                }
            }

        } else if (document.getElementById('sort').value == "3") {
            for (var i = 0; i < prices.length; i++) {
                if (prices[i] >= 101 && prices[i] <= 150) {
                    document.getElementById("hamper").style.display = "block";
                } else {
                    document.getElementById("hamper").style.display = "none";
                }
            }
        } else if (document.getElementById('sort').value == "4") {
            for (var i = 0; i < prices.length; i++) {
                if (prices[i] >= 150) {
                    document.getElementById("hamper").style.display = "block";
                } else {
                    document.getElementById("hamper").style.display = "none";
                }
            }
        } 
    }

</script>

Answer 1

There are multiple ways to handle it, in both client side and server side.

Here is a quick sample to do the filtering on client side.

First, add a data attribute to each option in the select to represent the corresponding price range. You may keep the value in this format "lowerRange:upperRange"

<select id="sort">
    <option data-price="0:@Int32.MaxValue" value="all">All</option>
    <option data-price="0:50" value="1">$0 - $50</option>
    <option data-price="51:100" value="2">$51 - $100</option>
    <option data-price="101:1000" value="3">$101 - 1000</option>
    <option data-price="1001:@Int32.MaxValue" value="4">1001 + </option>
</select>

Now when you render each, card, give it a data attribute for storing the price ( data-productprice )

<div class="row" id="my-products">
    @foreach (var item in Model.Products.Where(a=>CategoryId==Model.CategoryId))
    {
        <div class="card h-100" data-productprice="@item.Price">
            <span>@item.Name</span>
            <span>@item.Price</span>
        </div>
    }
</div>

Now when user make a selection in the sort dropdown, get the data attribute of the selected option, read the lower and upper range, filter the card div's which has a productprice data attribute value which is falling in that range.

$(function () {

    var $cards = $("#my-products").find("[data-productprice]");
    $("#sort").change(function () {
        var t = $(this).find(':selected').data('price');
        var a = t.split(':');
        var l = parseFloat(a[0]);
        var u = parseFloat(a[1]);

        $.each($cards, function (a, b) {
            var p = parseFloat($(b).data("productprice"));
            if (p >= l && p <= u) {
                $(b).show();
            } else {
                $(b).hide();
            }
        });

    });

});

As i mentioned, this is just one way of doing it, you can do the filtering on server side as well (which is something i might prefer).In that approach, you make an ajax call in the change event where you will send the lower and upper range ( l and u ) and let the server do a filtering based on the price range and return the partial view markup for only those items. When the ajax response comes back, you will replace the HTML of the my-products div.

$(function () {

    $("#sort").change(function () {
        var t = $(this).find(':selected').data('price');
        var a = t.split(':');
        var l = parseFloat(a[0]);
        var u = parseFloat(a[1]);  
        var urlForFilteredResults = "/Products/List?priceFrom="+l+"&priceTo="+r; 
        // Add other filter criteria as needed
        $("#my-products").load(urlForFilteredResults);

    });

});

Assuming your List action method accepts the params and return a partial view result

I see in your code you are setting the same id value ( id="hamper" ) for all the cards inside the loop. That is invalid HTML. Your Id's should be unique in a document.