带有下拉菜单 asp.net core 的价格过滤器（最低和最高价格）

Question

我正在尝试使用 javascript 和 asp.net 核心过滤价格，但我想出了一堆实际上不起作用的 javascript。 必须有一种更简单的方法，使用 jquery 还是使用 c#？

如果有人有任何建议，将不胜感激！

   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

在客户端和服务器端都有多种处理方式。

这是一个在客户端进行过滤的快速示例。

首先，给select中的每个选项添加一个data属性，表示对应的价格区间。你可以保持这种格式的值"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>

现在，当你渲染每张卡片时，给它一个数据属性来存储价格 (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>

现在，当用户在排序下拉列表中进行选择时，获取所选选项的数据属性，读取上下范围，过滤具有产品价格数据属性值在该范围内的卡片 div。

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

    });

});

正如我所提到的，这只是一种方法，您也可以在服务器端进行过滤（这是我可能更喜欢的）。在这种方法中，您可以在更改事件中进行 ajax 调用将发送上下限（l 和u）并让服务器根据价格范围进行过滤，并仅返回这些项目的部分视图标记。当 ajax 响应返回时，您将替换 my-products div 的 HTML。

$(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);

    });

});

假设您的 List 操作方法接受参数并返回部分视图结果

我在您的代码中看到您为循环内的所有卡片设置了相同的 id 值 (id="hamper")。那是无效的 HTML。您的 ID 在文档中应该是唯一的。