ASP.NET AJAX的jQuery仅调试浏览器的时候工作

Question

问题：
为什么通过jQuery的Ajax调用，到ASP.NET API控制器，只有当我踩着通过对浏览器的JavaScript工作？

详细：
我使用微软的Visual Studio Express的2013年网页，一个Win7的机器上，使用Firefox作为浏览器的开发。我的项目是MVC和API控制器的混合（在两个不同的控制器类中）。

我的视图通过jQuery向同一个项目中的API控制器发出ajax POST调用。在构建项目时，没有错误。浏览器中的调试器控制台显示没有javascript错误。
GET ajax调用工作得很好。但是，POST ajax调用似乎调用“/ api /”而不是“/ api/BacklogAPI”。我得到一个页面显示：

'/'应用程序中的服务器错误。
无法找到该资源。
描述：HTTP 404.您正在查找的资源（或其某个依赖项）可能已被删除，名称已更改或暂时不可用。请检查以下网址并确保它拼写正确。

请求的URL：/ API/

版本信息：Microsoft .NET Framework版本：4.0.30319; ASP.NET版本：4.0.30319.34237

这不会发生，如果我用调试器通过javascript。我无法弄清楚为什么。

已经测试：
在API控制器POST操作断点验证它是不正常的使用过程中调用（尽管它应该是）。
调试javascript，在我的ajax调用中有一个断点，验证POST调用的URL是“/ api/BacklogAPI”。这是对的。当我逐步浏览javascript的其余部分时，现在我的API控制器上的断点被击中。为什么只在调试时才这样做？ 我试过重新启动项目和浏览器，没有任何更改。

代码： 下面是控制器的代码（如果需要澄清，我可以透露的业务逻辑或模型类...这是一个个人的学习计划）：

using System.Collections.Generic; 
using System.Web.Http; 
using System.Net.Http; 
using System.Net; 
using WebApplication1.Models.WorkOrder; 
using System.Linq; 
namespace WebApplication1.Controllers 
{ 
    public class BacklogAPIController : ApiController 
    { 
     private WOHolder holder = WOHolder.Current; 

     [HttpGet] 
     public IEnumerable<WorkOrder> GetAllWO() 
     { 
      return holder.GetAll(); 
     } 

     [HttpGet] 
     public WorkOrder GetWO(int id) 
     { 
      return holder.Get(id); 
     } 

     [HttpPost] 
     public HttpResponseMessage AddWO(WorkOrder item) 
     { 
      holder.Add(item); 
      var response = new HttpResponseMessage(HttpStatusCode.Created); 
      return response; 
     } 
    } 
} 

而为视图：

@{ 
    Layout = "~/Views/Shared/_BacklogBasic.cshtml"; 
} 
@section Scripts { 
    <script src="~/Scripts/jquery-2.1.1.min.js"></script> 
} 
@section Header { 
    Backlog Tester 
} 
@section Body { 
    <form id="formInput" action="api/" method="post" enctype="application/x-www-form-urlencoded"> 
     Name: <input name="name" type="text" /> 
     <br />SN: <input name="serialNumber" type="text" /> 
     <br />Model: <input name="model" type="text" /> 
     <br /><input type="submit" value="Submit" /> 
    </form> 
    <div id="divOutput"></div> 
    <script> 
     var uri = "/api/BacklogAPI"; 
     ShowAll(); 
     function ShowAll() { 
      $.ajax({ 
       url: uri, 
       type: "GET", 
       dataType: "json" 
      }) 
      .success(function (data) { 
       var items = ""; 
       for (var i = 0; i < data.length; i++) { 
        items += data[i].name; 
        items += "<br />"; 
       } 
       $("#divOutput").html(items); 
      }); 
     } 
     function PostForm(postInfo) { 
      $.ajax({ 
       url: uri, 
       type: "POST", 
       data: postInfo 
      }) 
      .success(function() { 
       ShowAll(); 
      }); 
     } 
     $("#formInput").submit(function() { 
      PostForm($("#formInput").serialize()); 
     }); 
    </script> 
} 

Answer 1

取消表单提交

$("#formInput").submit(function (evt) { 
    evt.preventDefault();