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