我想使用 ASP.NET MVC 中的枚举为索引页面上的帖子类别创建一个下拉过滤器

Question

我正在创建一个食谱博客网站。在创建帖子时，我可以选择使用

Enum

下拉列表将它们分类为素食和非素食帖子。这些帖子在索引页面上显示为卡片。我想在索引页面上创建一个下拉过滤器以仅显示所选类别。

枚举：

public enum PostCategory
{
    [Display(Name = "Veg")]
    Veg = 0,

    [Display(Name = "NonVeg")]
    NonVeg = 1
}

型号：

public class Post
{
    // Post
    [Key]
    public int Id { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }
    public string? Link { get; set; }
    public string? Ingredient { get; set; }
    public string Recipe { get; set; }
    public string Image { get; set; }
    
    // Category
    public PostCategory PostCategory { get; set; }
}

控制器：

// Index
[HttpGet]
public async Task<IActionResult> Index()
{
    IEnumerable<Post> posts = await _postInterface.GetAll();
    return View(posts);
}

// Search Bar
[HttpPost]
public async Task<IActionResult> Index(string searchString, PostCategory postCategory)
{
    var posts = from p in _context.Posts select p;

    if (!string.IsNullOrEmpty(searchString))
    {
        posts = posts.Where(t => t.Title!.Contains(searchString));
    }

    return View(await posts.ToListAsync());
}

// Category Filter goes here.

查看：

<!-- Filter -->
<div class="row justify-content-between">
    <!-- Search bar -->
    <div class="col-4">
        <form class="d-flex mb-2" role="search" asp-controller="Post" asp-action="Index">
            <input class="form-control me-2" type="search" placeholder="Search Posts" aria-label="Search" name="SearchString" required oninvalid="this.setCustomValidity(' ')" />
            <button class="btn btn-outline-success me-2" type="submit">Search</button>
            <a class="btn btn-outline-danger" asp-area="" asp-controller="Post" asp-action="Index">Reset</a>
        </form>
    </div>
    <!-- Dropdown -->
    <div class="col-4">
        <form  asp-controller="Post" asp-action="Index" id="category">
            <select class="form-control" asp-items="@Html.GetEnumSelectList<PostCategory>()" id="post-filter">
                <option value="">All</option>
            </select>
            <button class="btn btn-outline-success me-2" type="submit">Search</button>
            <a class="btn btn-outline-danger" asp-area="" asp-controller="Post" asp-action="Index">Reset</a>
        </form>
    </div>
</div>


<!-- Cards -->
<div class="album py-5 bg-light">
    <div class="container">

        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3" id="post-recipe">

            @foreach (var item in Model)
            {
                <div class="col mb-4">
                    <div class="card shadow-sm">
                        <img class="bd-placeholder-img card-img-top" src="@item.Image" width="157" height="236" alt="Card image cap">
                        @* Card Details *@
                        <div class="card-body">
                            <a asp-controller="Post" asp-action="Detail" asp-route-id="@item.Id" class="stretched-link"></a>
                            <h6 class="card-text"> @item.Title </h6>
                            <div class="d-flex justify-content-between align-items-center">
                                <small class="text-body-secondary">@item.PostCategory</small>
                            </div>
                        </div>
                        @* Admin privlages *@
                        <div class="card-footer btn-group">
                            <a asp-controller="Post" asp-action="Edit" asp-route-id="@item.Id" type="button" class="btn btn-sm btn-outline-primary stretched-link">Edit</a>
                            <a asp-controller="Post" asp-action="Delete" asp-route-id="@item.Id" type="button" class="btn btn-sm btn-outline-danger stretched-link">Delete</a>
                        </div>
                    </div>
                </div>
            }

        </div>

    </div>
</div>

我尝试在索引中添加额外的

[HttpPost]

操作，以便仅使用搜索栏操作使路由崩溃。将其与搜索栏操作结合起来会有所帮助，因为不会出现路线崩溃，但即便如此，代码也只完成了一半，没有给出预期的结果，只显示蔬菜类别。

这是我尝试过的：

// Enum Category
[HttpPost]
public IActionResult Index(PostCategory postCategory)
{
    var posts = _context.Posts.Where(c => c.PostCategory == postCategory).ToList();
    return View(posts);
}

谢谢！

Answer 1

代码只完成了一半，没有给出预期的结果，只是 显示蔬菜类别

模型绑定失败，PostCategory 枚举的默认值是 0(Veg)

将 name 属性添加到模型绑定的下拉列表中，

<select class="form-control" asp-items="@Html.GetEnumSelectList<PostCategory>()" name="postCategory" id="post-filter">
    <option value="">All</option>
</select>

另外，修改你的控制器，添加选择全部时的代码：

结果：