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

控制器：

[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

您应该将POST的数据更改为控制器，并将Action POST更改为：

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

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

$CSV可能是与html元素相关的jquery对象。您需要读取它的text属性并将其作为数据传递，而不是jQuery对象。

执行上述更改，您可以实现正确的POST。但是，关于您的控制器还有另一个问题。在完成工作后，Controller不会响应AJAX调用，但会发出重定向。

<强>更新

告诉我ActionResult应该如何帮助你看看，就没有离开当前视图的回报而言而只是传回它成功。

你应该对你的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 Helpers无法使用JS文件...因此您需要指向实际网址，例如'/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);
            }
        });

Ajax不会调用MVC控制器方法

4 个答案: