所以我正在编写一个小型基本剃须刀页面项目,我有点卡在这部分,我不知道 CategoryId 数据是否真的发送到后端进行处理。我真的不太了解 javascript 我问我的朋友一个 javascript 代码来发送一些数据到后端。这是代码
注:页面为UserMainPage.cshtml和UserMainPage.cshtml.cs
对不起,如果它有点乱,这段代码是供用户使用他们的类别来整理事件。
在 UserMainPage.cshtml 中
<div style="position: relative; margin-left: auto;">
<select style="height: 40px; border: 1px solid #ddd; border-radius: 4px; padding-left: 10px; font-size: 16px;" id="categorySelect">
<option value="" hidden>Category</option>
@if (Model.TblCategory != null && Model.TblCategory.Any())
{
foreach (var category in Model.TblCategory)
{
<option value="@category.CategoryId">@category.CategoryName</option>
}
}
else
{
<option value="0">No categories found</option>
}
</select>
</div>
这是剧本
<script>
var categorySelect = document.getElementById('categorySelect');
categorySelect.addEventListener('change', function () {
var categoryId = parseInt(categorySelect.value); // convert to integer
window.location.href = "./UserMainPage?categoryId=" + categoryId;
});
</script>
在 UserMainPage.cshtml.cs 中
public async Task<IActionResult> OnPostAsync(int? categoryId, string searchString)
{
if (categoryId == null && string.IsNullOrEmpty(searchString))
{
// If no category is selected and search string is null or empty, return all events
TblEvent = await _context.TblEvents
.Include(t => t.Admin)
.Include(t => t.Category)
.Include(t => t.Location)
.ToListAsync();
}
else if (categoryId != null)
{
// Filter events by category
TblEvent = await _context.TblEvents
.Include(t => t.Admin)
.Include(t => t.Category)
.Include(t => t.Location)
.Where(t => t.CategoryId == categoryId)
.ToListAsync();
}
else if (!string.IsNullOrEmpty(searchString))
{
// Filter events by search string
TblEvent = await _context.TblEvents
.Include(t => t.Admin)
.Include(t => t.Category)
.Include(t => t.Location)
.Where(t => t.EventName.Contains(searchString))
.ToListAsync();
}
return Page();
}