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();