asp.net - ASP.NET Core View - 为单列创建下拉过滤器

Question

我有 ASP.NET CORE 应用程序。

在我的一个观点中，我有一个Status列，其中可以有 2 个可能的值：Active或Deactivated. 如何使用简单的下拉列表在该列上创建过滤器，允许我根据这 2 个列值过滤整个表？

我能找到的只是冗长的教程，并没有完全涵盖我需要的内容。基本上我需要有人给我一些链接或指出我如何以最简单的方式实现它。

编辑

模型中的列定义：

    [Column(TypeName = "BIT")]
    [Display(Name = "Status")]
    public bool Status { get; set; }

所以在我的索引视图中，我有：

        <th>
            @Html.DisplayNameFor(model => model.Status)
        </th>
....
         <td>
             @(item.Status ? "Active" : "Deactivated")
         </td>

如何将该标题标题转换为带有下拉列表的标题？像这样的东西：

显然，在我的情况下，而不是“公司名称”列名称将是“状态”，在下拉值中我只有 2 个项目 - “活动”和“停用”。

Answer 1

我根据您的需要做了一个测试，下面是一个工作演示：

看法：

@model IEnumerable<Product>

@{
    List<SelectListItem> listItems = new List<SelectListItem>();
    listItems.Add(new SelectListItem
    {
        Text = "Active",
        Value = "Active"
    });
    listItems.Add(new SelectListItem
    {
        Text = "Deactivated",
        Value = "Deactivated"
    });
}

<table id="mytable" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
    <thead>
        <tr>
            <td>
                @Html.DisplayNameFor(model => model.Id)
            </td>

            <td>
                @Html.DisplayNameFor(model => model.Name)
            </td>
            <td>
                @Html.DropDownList("Status", listItems, "Status")
            </td>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Id)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @(item.Status ? "Active" : "Deactivated")
                </td>
            </tr>
        }
    </tbody>
</table>

@section scripts{
    <script>
        $("#Status").on('change', function () {
            var val = $("#Status option:selected").text();
            $.ajax({
                type: 'get',
                url: '/Home/FilterByStatus',
                data: { status: val },
                success: function (result) {
                    $("#mytable tbody").empty();
                    $.each(result, function (i, value) {
                        $("#mytable tbody").append("<tr><td>" + value.id + "</td><td>" +
                            value.name + "</td><td>" + (value.status ? "Active" : "Deactivated") +"</td></tr>")
                    })
                }
            })
        })
    
    </script>
}

控制器：

public static List<Product> products = new List<Product>
{
    new Product{ Id = 1, Name = "AA", Status = true},
    new Product{ Id = 2, Name = "BB", Status = true},
    new Product{ Id = 3, Name = "CC", Status = false},
    new Product{ Id = 4, Name = "DD", Status = false}
};

public IActionResult Index()
{
    return View(products);
}

public IActionResult FilterByStatus(string status)
{
    var filterproducts = products.ToList();
    if (status == "Active")
    {
        filterproducts = products.Where(p => p.Status == true).ToList();
        return Json(filterproducts);
    }
    else if(status == "Deactivated")
    {
        filterproducts = products.Where(p => p.Status == false).ToList();
        return Json(filterproducts);
    }
    return Json(filterproducts);
}

结果：