如何正确通过查询参数调用带搜索功能的 ASP.NET Core Web API-js教程-PHP中文网

如何正确通过查询参数调用带搜索功能的 ASP.NET Core Web API

本文解决 mvc 前端调用 api 时“无数据返回但无报错”的典型问题：因 url 路由参数误用（将查询参数当作路径段传递），导致 api 接收空字符串搜索值，最终返回空结果集。

本文解决 mvc 前端调用 api 时“无数据返回但无报错”的典型问题：因 url 路由参数误用（将查询参数当作路径段传递），导致 api 接收空字符串搜索值，最终返回空结果集。

在 ASP.NET Core 项目中，API 端点设计与客户端调用方式必须严格匹配——尤其是参数绑定方式。您当前的问题根源在于 MVC 端 Ajax 请求的 URL 构造错误，导致 search 参数未被正确传递至 API。

? 问题定位：路由参数 vs 查询参数

您的 API 控制器使用的是 路径参数（Route Parameter）：

[HttpGet("ListExpenseByAccountingSearch/{search}")]
public async Task<iactionresult> ListExpenseByAccountingSearch(string search)</iactionresult>

这表示框架会尝试从 URL 路径中提取 {search}，例如：
✅ 正确路径格式：/api/Expense/ListExpenseByAccountingSearch/office
❌ 错误理解：认为 /ListExpenseByAccountingSearch?search=office 也能匹配该路由（实际不能——此为查询参数，不匹配 {search} 占位符）

而您的 MVC 控制器和前端 Ajax 均按 查询参数（Query String） 方式构造请求：

// ❌ 错误：将 searchText 拼接进路径，但后端路由未定义该路径段
url: "/Management/Accounting/ListExpenseByAccountingSearch/" + searchText,

此时若 searchText 为空（如用户刚输入、或输入框为空），URL 变为：
/Management/Accounting/ListExpenseByAccountingSearch/
→ MVC Controller 的 string search 参数接收空字符串 ""；
→ 进而调用 client.GetAsync("https://localhost:7198/api/Expense/ListExpenseByAccountingSearch/")；
→ API 端收到空路径段，search = ""，查询逻辑可能返回空集合（如 .Where(x => x.Name.Contains("")) 在 EF 中常被优化为恒真，但业务逻辑可能主动过滤空值）；
→ 最终前端 console.log(value) 输出空数组，且无错误提示，造成“静默失败”。

✅ 正确解决方案：统一使用查询参数（推荐）

更灵活、更安全、更符合 REST 实践：将 API 改为接收查询参数，避免路径编码/空值/特殊字符问题。

1. 修改 API Controller（推荐）

// ✅ 使用 [FromQuery] 明确声明查询参数
[HttpGet("ListExpenseByAccountingSearch")]
public async Task<iactionresult> ListExpenseByAccountingSearch([FromQuery] string search)
{
    var values = await _expenseService.itemListExpenseByAccountingSearch(search ?? "");
    return Ok(values);
}</iactionresult>

2. 更新 MVC Controller（保持一致）

[HttpGet]
public async Task<iactionresult> ListExpenseByAccountingSearch(string search) // 参数名需与 query key 一致
{
    var client = _httpClientFactory.CreateClient();
    // ✅ 正确拼接查询参数（自动处理 URL 编码）
    var url = $"https://localhost:7198/api/Expense/ListExpenseByAccountingSearch?search={Uri.EscapeDataString(search ?? "")}";
    var responseMessage = await client.GetAsync(url);

    if (responseMessage.IsSuccessStatusCode)
    {
        var jsonData = await responseMessage.Content.ReadAsStringAsync();
        var values = JsonConvert.DeserializeObject<list>>(jsonData);
        return Json(values);
    }
    return Json(new List<resultexpensebyaccountingdto>());
}</resultexpensebyaccountingdto></list></iactionresult>

3. 修正前端 Ajax 请求

function listExpenseBySearch() {
    var searchText = $("#txtSearch").val().trim(); // ✨ 建议增加 trim()

    // ✅ 正确：使用 ?search=xxx 查询参数格式
    $.ajax({
        type: "GET",
        url: "/Management/Accounting/ListExpenseByAccountingSearch?search=" + encodeURIComponent(searchText),
        success: function (value) {
            console.log("API 返回数据:", value); // ✨ 添加调试日志
            $("#tableExpense tbody").empty();
            // ...（原有表格渲染逻辑保持不变）
        },
        error: function (xhr, status, error) {
            console.error("AJAX 请求失败:", status, error, xhr.responseText);
        }
    });
}

⚠️ 注意事项与最佳实践

永远对用户输入进行 URL 编码：使用 encodeURIComponent()（前端）或 Uri.EscapeDataString()（C# 后端），防止空格、&、/ 等破坏 URL 结构。
空值/空白值处理：在 API 服务层明确判断 string.IsNullOrWhiteSpace(search)，避免无效查询或数据库全表扫描。
避免路径参数传递搜索词：路径参数适用于有限、结构化、语义明确的标识符（如 /users/123），不适用于自由文本搜索。

启用 CORS（如跨域）：若前端与 API 不同源（如 http://localhost:5000 → https://localhost:7198），需在 API 的 Program.cs 中配置：

builder.Services.AddCors(options =>
    options.AddPolicy("AllowFrontend", policy => 
        policy.WithOrigins("http://localhost:5000")
              .AllowAnyMethod()
              .AllowAnyHeader()));
app.UseCors("AllowFrontend");