ASP.NET Core+jQuery发票系统：编辑/删除时Id为空问题

我在用ASP.NET Core开发发票管理表格，搭配jQuery实现交互功能。但在尝试通过Id编辑发票详情或执行删除操作时，后端接收的Id参数为Null，无法正常获取目标发票信息。相关代码如下：

后端Edit Action代码 #

public IActionResult Edit(int? id)
{
    var existingInvoice = _context.Invoices
                                  .Include(i => i.LineItems)
                                  .Include(i => i.Customer)
                                  .FirstOrDefault(i => i.Id == id);

    if (existingInvoice == null)
    {
        return NotFound();
    }

    var viewModel = new CreateInvoiceViewModel
    {
        Invoice = existingInvoice,
        InvoiceId = existingInvoice.Id,
        InvoiceNumber = existingInvoice.InvoiceNo,
        InvoiceDate = existingInvoice.InvoiceDate,
        CustomerName = existingInvoice.Customer.FirstName,
        CustomerAddress = existingInvoice.Customer.Address,
        DueDate = existingInvoice.DueDate,
        LineItems = existingInvoice.LineItems.ToList()
    };

    if (!string.IsNullOrEmpty(existingInvoice.FilePath))
    {
        viewModel.FilePath = existingInvoice.FilePath;
    }
    
    CalculateTotalAmount(viewModel);
    PopulateDropdowns();

    return View(viewModel);
}

前端脚本代码 #

return `<div class="text-center">
               <a href="/Invoice/Edit/${data.Id}" class="block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
               Edit
           </a>
              <button class="block rounded-md bg-red-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
                onclick="Delete('/Invoice/Delete/${data.Id}')">
               Delete
              </button>
       </div>`;

可能原因及解决办法 #

1. 前端data对象字段名不匹配 #

前端模板中data.Id的字段名可能和后端返回的JSON字段不一致。比如后端序列化后是小写id，或者字段名为InvoiceId，导致前端取到undefined，最终URL中Id为空。

• 解决：在前端代码中添加调试打印，确认data对象结构：

  console.log(data); // 查看控制台输出的data对象，确认Id字段的实际名称
  

  根据实际字段名修改模板，比如后端返回id则改成${data.id}，返回InvoiceId则改成${data.InvoiceId}。

2. 后端数据序列化配置问题 #

ASP.NET Core默认的JSON序列化规则可能导致字段名大小写变化（比如小写驼峰），或者实体类的Id属性未被正确序列化。

• 解决：检查实体类的Id属性，确保没有被忽略序列化；如果需要统一字段名，可以用[JsonPropertyName]特性指定：

  public class Invoice
  {
      [JsonPropertyName("Id")]
      public int Id { get; set; }
      // 其他属性
  }
  

3. 后端路由与参数绑定错误 #

后端Action的参数名id可能和路由模板中的占位符不匹配，或者参数未正确绑定来源。

• 解决：显式指定参数绑定来源为路由，确保参数能正确获取：

  public IActionResult Edit([FromRoute] int? id)
  

  同时确认路由配置，比如是否添加了[Route("Invoice/Edit/{id}")]特性，确保路由模板包含{id}占位符。

4. 生成的URL格式错误 #

打开浏览器开发者工具，查看页面中生成的Edit/Delete链接，确认URL是否包含有效Id（比如/Invoice/Edit/123），而不是/Invoice/Edit/或/Invoice/Edit/undefined。

• 解决：根据URL的错误情况，回溯前端数据来源，确认data对象是否正确获取了后端返回的发票数据。

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