提问人:ZNAXNOR 提问时间:11/10/2023 最后编辑:Ruikai FengZNAXNOR 更新时间:11/11/2023 访问量:75
我想使用 MVC 中的枚举为索引页面上的帖子类别创建一个下拉过滤器 ASP.NET
I want to create a dropdown filter for my post categories on Index page using an enum in ASP.NET MVC
问:
我正在创建一个食谱博客网站。在创建帖子时,我可以选择使用下拉列表将它们分类为 Veg 和非 Veg 帖子。这些帖子在索引页上显示为卡片。我想在索引页面上创建一个下拉过滤器,以仅显示所选类别。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);
}
谢谢!
答:
1赞
Ruikai Feng
11/10/2023
#1
代码只完成了一半,没有给出预期的结果,只有 显示蔬菜类别
模型绑定失败,PostCategory 枚举的默认值为 0(Veg)
将 name 属性添加到下拉列表中以进行模型绑定,
<select class="form-control" asp-items="@Html.GetEnumSelectList<PostCategory>()" name="postCategory" id="post-filter">
<option value="">All</option>
</select>
另外,修改您的控制器,添加全选时的代码:
[HttpPost]
public IActionResult Index(PostCategory? postCategory)
{
List<Post> posts;
if(postCategory!=null)
{
posts = _context.Post.Where(c => c.PostCategory == postCategory).ToList();
}
else
{
//wheather you don't select or select all,postCategory would be null
//you could replace the logic here yourself
posts = _context.Post.ToList();
}
return View(posts);
}
0赞
ZNAXNOR
11/11/2023
#2
这是我得到的最终代码。
// Filter
[HttpPost]
public async Task<IActionResult> Index(string searchString, PostCategory? postCategory)
{
var post = from p in _context.Posts select p;
// Searchbar
if (!string.IsNullOrEmpty(searchString))
{
post = post.Where(t => t.Title!.Contains(searchString));
}
// Category Dropdown
if (postCategory != null)
{
post = _context.Posts.Where(c => c.PostCategory == postCategory);
}
return View(await post.ToListAsync());
}
评论