這個jQuery表單發佈有什麼問題？

Question

我有一個表格，我試圖用Ajax提交/無需重新加載頁面。

Ajax調用正在服務器上，但它似乎沒有調用該函數。我試過$.post和$.ajax。這兩者似乎都不起作用。幾個星期前我的工作非常相似，但現在我無法複製它。 （最終目標是將模型作爲部分視圖返回，以便查看驗證。）

使用Firefox時，控制器方法立即生效。使用Chrome，瀏覽器選項卡似乎鎖定。它有時在延遲後碰撞控制器。 （型號信息準確無誤。）

我在這裏做錯了什麼？

我有我在這裏的局部視圖：

<% using (Ajax.BeginForm("CreateSimpleReport", "Main", new AjaxOptions { HttpMethod="POST" }, new { id="CreateSimpleReport" })){ %> 
    <%: Html.ValidationSummary(false, "Report creation was unsuccessful. Please correct the errors and try again.", new { @class = "validation_summary" })%> 
    <% Html.EnableClientValidation(); %> 
    <div class="col"> 
<div class="row"> 
    <div class="label"> 
     <%: Html.LabelFor(m => m.Name)%> 
    </div> 
    <div class="field"> 
     <%: Html.TextBoxFor(m => m.Name, new { @class = "input texbox" })%> 
     <%: Html.ValidationMessageFor(m => m.Name, "*")%> 
    </div> 
</div> 
<div class="row"> 
    <div class="label"> 
     <%: Html.LabelFor(m => m.Description)%> 
    </div> 
    <div class="field"> 
     <%: Html.TextBoxFor(m => m.Description, new { @class = "input texbox" })%> 
     <%: Html.ValidationMessageFor(m => m.Description, "*")%> 
    </div> 
</div> 
<div class="row"> 
    <div class="label"> 
     <%: Html.LabelFor(m => m.Quantity)%> 
    </div> 
    <div class="field"> 
     <%: Html.TextBoxFor(m => m.Quantity, new { @class = "input texbox" })%> 
     <%: Html.ValidationMessageFor(m => m.Quantity, "*")%> 
    </div> 
</div> 
<div class="right"><input type="submit" class="button" value="Create Report" /></div> 
</div> 
<% } %> 

控制器：

[HttpPost] 
public string CreateSimpleReport(SimpleReportModel model) 
{ 
    if (ModelState.IsValid) 
    { 
     // do something 
     return "success"; 
    } 
    else 
    { 
     return "failure"; 
    } 
} 

最後，jQuery的：

 $('#CreateSimpleReport').on('submit', function (e) { 
      var $this = $(this); 
      $.post((this), (this), function(data) { 
       alert('finish'); 
      }); 
//   $.ajax({ 
//    type: 'POST', 
//    url: (this), 
//    data: (this), 
//    success: function() { 
//     alert('success'); 
//    }, 
//    error: function (jqXHR, textStatus, errorThrown) { 
//     alert('error'); 
//    } 
//   }); // end ajax call 
     }); 

Answer 1

你不應該混合Ajax.*幫手jQuery.ajax。如果您使用Ajax.BeginForm助手，那麼只需包含jquery.unobtrusive-ajax.js腳本（ASP.NET MVC 3）或MicrosoftAjax.js和MicrosoftMvcAjax.js腳本（ASP.NET MVC 2）並訂閱AjaxOptions中的成功回調。

如果你決定使用jQuery.ajax手動然後使用標準Html.BeginForm：

<% using (Html.BeginForm("CreateSimpleReport", "Main", FormMethod.Post, new { id = "CreateSimpleReport" })) { %> 

然後：

$(function() { 
    $('#CreateSimpleReport').on('submit', function() { 
     $.ajax({ 
      url: this.action, 
      type: this.method, 
      data: $(this).serialize(), 
      success: function(result) { 
       alert('AJAX success'); 
      } 
     }); 

     // make sure you return false to cancel the default event 
     return false; 
    }); 
}); 

Answer 2

$.post((this), (this) 

這（沒有雙關語意）沒有意義。您也不能將參數作爲DOM元素髮布到DOM元素。除此之外，您需要e.preventDefault();（或return false;）以避免提交常規表單。所以當你的回調會觸發時，頁面已經被重新加載。

通過AJAX提交表單的最簡單方法是使用jQuery form plugin。

Answer 3

你已經在使用Ajax.BeginForm，爲什麼你需要jQuery腳本來做ajax？

您是否包含jquery.unobtrusive-ajax.js？

Answer 4

關於混合微軟的AJAX和驗證定製的jQuery阿賈克斯我有一個類似的線程在這裏： Mixing Microsoft MVC ajax and validation helpers with native jquery ajax