Razor页面项目疑问：CategoryId是否成功传递至后端处理？

我正在开发一个小型基础Razor页面项目，需实现按类别筛选事件的功能。由于对JavaScript了解不多，找朋友编写了前端代码，但不确定CategoryId数据是否成功传递至后端进行处理。涉及页面为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();
}

你的代码核心问题是：前端通过window.location.href发起的是GET请求，但后端处理逻辑写在了OnPostAsync方法中（该方法仅响应POST请求），导致CategoryId无法被后端接收。

修复方案二选一： #

方案1：改为GET请求处理（推荐，匹配当前前端逻辑）

把后端的OnPostAsync改为OnGetAsync，同时确保分类数据被加载到Model：

public async Task<IActionResult> OnGetAsync(int? categoryId, string searchString)
{
    // 调试用：查看接收到的参数
    Console.WriteLine($"Received categoryId: {categoryId}");

    if (categoryId == null && string.IsNullOrEmpty(searchString))
    {
        TblEvent = await _context.TblEvents
            .Include(t => t.Admin)
            .Include(t => t.Category)
            .Include(t => t.Location)
            .ToListAsync();
    }
    else if (categoryId != null)
    {
        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))
    {
        TblEvent = await _context.TblEvents
            .Include(t => t.Admin)
            .Include(t => t.Category)
            .Include(t => t.Location)
            .Where(t => t.EventName.Contains(searchString))
            .ToListAsync();
    }

    // 加载分类数据到Model，确保前端下拉框正常显示
    TblCategory = await _context.TblCategories.ToListAsync();

    return Page();
}

方案2：修改前端为POST请求（适合敏感数据场景）

将select放入表单，通过表单提交发送POST请求：

<form method="post" id="categoryForm">
    <input type="hidden" name="categoryId" id="hiddenCategoryId">
    <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>
</form>

修改脚本：

<script>
    var categorySelect = document.getElementById('categorySelect');
    var hiddenCategoryId = document.getElementById('hiddenCategoryId');
    var categoryForm = document.getElementById('categoryForm');
    
    categorySelect.addEventListener('change', function () {
        hiddenCategoryId.value = parseInt(categorySelect.value);
        categoryForm.submit();
    });
</script>

参数传递验证技巧 #

• 前端跳转后，查看浏览器地址栏是否包含?categoryId=xxx（对应GET方案），确认前端参数已发出。
• 后端方法开头添加日志或断点，直接查看categoryId是否有值。

内容的提问来源于stack exchange，提问作者jimmy