使用jQuery加载PartialView时意外触发带0值ID的Edit方法

1. Ajax请求路径写错 #

如果LoadCards的路由配置或者Ajax里的URL写错，很可能误打误撞指向Edit的GET路由。比如：

• 明明LoadCards的路由是[Route("Produto/LoadCards")]，但Ajax里写成了/Produto/Edit，直接触发Edit方法；
• 要是用相对路径，当前页面URL是/Produto/Edit/1，Ajax请求写LoadCards没加开头的斜杠，就会变成/Produto/Edit/LoadCards，如果Edit的GET方法接受可选ID，路由会把LoadCards当成ID（因为类型不匹配转成0），直接触发Edit方法。

2. 表单自动提交搞的鬼 #

如果触发Ajax的按钮在表单里面，而且没加type="button"，点击时会默认触发表单提交，而表单的action大概率指向Edit的GET路径，就会多出来一个请求。比如：

<form asp-action="Edit">
  <button onclick="loadCards()">加载卡片</button>
</form>

按钮默认是type="submit"，点击时会同时执行Ajax和提交表单，自然就触发了Edit的GET请求，ID为0可能是因为表单里的ID输入框没绑定好或者为空。

3. PartialView里藏着触发请求的元素 #

要是LoadCards返回的PartialView里有表单、<a>标签这类会触发请求的元素，而且它们的路径错指向了Edit方法，加载到页面后可能因为默认行为或者事件冒泡触发额外请求。比如PartialView里写了<a asp-action="Edit">返回编辑</a>，没指定ID参数的话，点击（甚至极端情况渲染时意外触发）就会调用Edit的GET方法，ID为0。

4. 路由匹配优先级冲突 #

如果ProdutoController里Edit的GET方法和LoadCards的路由规则有冲突，比如Edit的路由是[HttpGet("Produto/Edit/{id:int?}")]，而LoadCards的路由定义得有问题（比如写成[HttpGet("Produto/{action}")]但顺序不对），就可能导致请求被错误路由到Edit方法。

5. Ajax错误回调误触发请求 #

要是Ajax请求因为网络问题或者错误处理不当，在错误回调里触发了Edit页面的跳转或者请求，比如：

$.ajax({
  url: '/Produto/LoadCards',
  error: function() {
    // 错误时直接跳转到Edit页面，不带ID自然就是0
    window.location.href = '/Produto/Edit';
  }
});

这种情况会在Ajax失败时触发Edit的GET方法，ID为0。

排查小技巧 #

• 打开浏览器F12的网络标签，盯着所有请求，看看触发Edit GET的请求到底是哪来的（是Ajax本身发错了，还是表单提交，或者其他元素搞的）；
• 核对Ajax的URL，确保是/Produto/LoadCards，别写错；
• 触发Ajax的按钮一定要加type="button"，避免默认提交表单；
• 检查PartialView里的元素，有没有会乱触发请求的代码；
• 看看Controller里两个方法的路由属性，确保规则不冲突。

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