Ajax不會調用MVC控制器方法

Question

我在我的JavaScript中有一個AJAX函數來調用我的控制器方法。當我運行AJAX函數（在按鈕上單擊）時，它不會在我的方法中打破我的斷點。這一切都運行成功：和錯誤：。我需要更改哪些內容才能將值從$ CSV.text實際發送到我的控制器方法？

JAVASCRIPT：

// Convert JSON to CSV & Display CSV 
     $CSV.text(ConvertToCSV(JSON.stringify(data))); 

     $.ajax({ 
      url: '@Url.Action("EditFence", "Configuration")', 
      type: "POST", 
      dataType: "json", 
      contentType: "application/json; charset=utf-8", 
      data: { value : $CSV.text() }, 
      success: function(response){ 
       alert(response.responseText); 
      }, 
      error: function(response){ 
       alert(response.responseText); 
      } 
     }); 

CONTROLLER：

[HttpPost] 
    public ActionResult EditFence(string value) 
    { 
     try 
     { 
      WriteNewFenceFile(value); 
      Response.StatusCode = (int)HttpStatusCode.OK; 
      var obj = new 
      { 
       success = true, 
       responseText = "Zones have been saved." 
      }; 
      return Json(obj, JsonRequestBehavior.AllowGet); 
     } 
     catch (Exception ex) 
     { 
      var obj = new 
      { 
       success = false, 
       responseText = "Zone save encountered a problem." 
      }; 
      return Json(obj, JsonRequestBehavior.AllowGet); 
     } 
    } 

RESULT

Answer 1

你應該改變你郵寄到您的控制器的數據和Action你郵寄到：

data: { value = $CSV.text() } 

url: '@Url.Action("EditFence", "Configuration")' 

的$CSV有可能涉及到HTML元素的jQuery對象。你需要閱讀它的文本屬性，並將其作爲數據傳遞，而不是jQuery對象。

執行上述更改可以實現正確的POST。但是，關於您的控制器還有另一個問題。您的控制器在完成他的工作後不會響應AJAX調用，但會發出重定向。

更新

it would be helpful for you to tell me how the ActionResult should look, in terms of a return that doesn't leave the current view but rather just passes back that it was successful.

的動作，你POST需要重構像下面。正如你看到的，我們使用try/catch來捕獲任何異常。如果沒有發生任何異常，我們認爲一切正常。否則，發生錯誤。在幸福的情況下，我們會返回帶有成功消息的響應，而在不好的情況下，我們會返回帶有失敗消息的響應。

[HttpPost] 
public ActionResult EditFence(string value) 
{ 
    try 
    { 
     WriteNewFenceFile(value); 
     Response.StatusCode = (int)HttpStatusCode.OK; 
     var obj = new 
     { 
      success = true, 
      responseText= "Zones have been saved." 
     }; 
     return Json(obj, JsonRequestBehavior.AllowGet)); 
    } 
    catch(Exception ex) 
    { 
     // log the Exception... 

     var obj = new 
     { 
      success = false, 
      responseText= "Zone save encountered a problem." 
     }; 
     return Json(obj, JsonRequestBehavior.AllowGet)); 
    } 
} 

這樣做重構，你可以利用它在客戶端如下：

$CSV.text(ConvertToCSV(JSON.stringify(data))); 

$.ajax({ 
    url: '@Url.Action("EditFence", "Configuration")', 
    type: "POST", 
    dataType: "json", 
    contentType: "application/json; charset=utf-8", 
    data: { value = JSON.stringify($CSV.text()) }, 
    success: function(response){ 
     alert(response.responseText); 
    }, 
    error: function(response){ 
     alert(response.responseText); 
    } 
}); 

Answer 2

如果你的JavaScript實際上是一個JS文件，而不是CSHTML文件，那麼這將發出一個字符串字面量：

@Url.Action("EditFile", "Configuration") 

HTML輔助不要在JS文件的工作......所以你需要指向一個實際的URL，像'/configuration/editfile'

此外，它看起來像張貼到一個名爲EditFile的方法，但控制器代碼片段中的方法名稱是EditFence，所以這顯然也是一個問題。

Answer 3

你的問題是，在這些線路上：

success: alert("Zones have been saved."), 
error: alert("Zone save encountered a problem.") 

這將有效地立即同時運行的功能，並設置這些函數的返回值的成功和錯誤的性質。嘗試使用匿名回調函數。

success: function() { 
    alert("Zones have been saved."); 
}, 
error: function() { 
    alert("Zone save encountered a problem.") 
} 

Answer 4

你不需要添加contentType默認application/x-www-form-urlencoded將工作，因爲它看起來像你有一個大的CSV字符串。所以你的代碼應該像這個例子

$(document).ready(function() { 

     // Create Object 
     var items = [ 
      { name: "Item 1", color: "Green", size: "X-Large" }, 
      { name: "Item 2", color: "Green", size: "X-Large" }, 
      { name: "Item 3", color: "Green", size: "X-Large" } 
     ]; 

     // Convert Object to JSON 
     var $CSV = $('#csv'); 
     $CSV.text(ConvertToCSV(JSON.stringify(items))); 
     $.ajax({ 
      url: '@Url.Action("EditFence", "Configuration")', 
      type: "POST", 
      dataType: "json", 
      data: {value:$CSV.text()}, 
      success: function(response) { 
       alert(response.responseText); 
      }, 
      error: function(response) { 
       alert(response.responseText); 
      } 
     });