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中的每个选项添加一个数据属性，以表示相应的价格范围。您可以使用此格式"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>

现在，当用户在排序下拉列表中进行选择时，获取所选选项的数据属性，读取下限和上限范围，过滤具有productprice数据属性值的卡片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在文档中应该是唯一的。

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

1 个答案: