使用AJAX向C＃控制器发出PUT请求

Question

我正在尝试使用AJAX请求更新数据库中的记录。我能够使用类似以下的方式进行插入，但在尝试更新或删除时不成功。

这是我的ajax PUT方法：

$('#updateCr').click(function(e) {
    e.preventDefault();
    var updatedData = {
        CrId: $('#CrId').val(),
        CrName: $('#CrName').val(),
        CrStatus: $('#CrStatus').val(),
        CrPriority: $('#CrPriority').val(),
        CrTitle: $('#CrTitle').val(),
        CrDescription: $('#CrDescription').val()
    };
    console.log(changeRequest);

    $.ajax({
        type: "PUT",
        url: "@Url.Action("MyControllerAction", "Home")",
        content: "application/json; charset=utf-8",
        dataType: "json",
        data: updatedData,
        cache: false,
        success: function(d) {
            if (d.success == true)
                window.location = "index.html";
            else {}
        },
        error: function(xhr, textStatus, errorThrown) {
            // TODO: Show error
        }
    });

以下是我的控制器代码：

[HttpPut]
public JsonResult MyControllerAction(UpdatedDataObject updatedData)
{
    try
    {
        myModel.UpdateDataMethod(updatedData);
    }
    catch (Exception e)
    {
        var theerrror = e.ToString();
        return Json(new { result = theerrror });
    }

    return Json(new { result = "Success" });
}

提交数据时，控制器被触发，但没有接收到JSON对象。这里我做错了什么？

- mbuchok

---

你是否检查了控制台中的响应，或者至少在C#代码中逐步执行以查看是否出现任何错误？ - Rory McCrossan

是的，控制台正在显示一个json对象，并且我已经逐步执行了C＃代码……没有错误抛出，但是控制器根本没有接收到我试图传递给它的JSON对象。 - mbuchok

问题是一个打字错误。返回的JSON属性被称为“result”。在您的JS代码中，您使用了“success”。 - Rory McCrossan

PUT通常具有以下签名：MyControllerAction(int id, UpdatedDataObject updatedData)。 - Mark Schultheiss

Answer 1

问题在于一个拼写错误。返回的 JSON 属性名应该是 result，但是在你的 JS 代码中使用了 success。另外请注意你正在发送的数据格式为 application/x-www-form-urlencoded，而不是 application/json。不过幸运的是这并不是问题，因为 ModelBinder 可以处理两种类型的请求。尝试一下这个代码：

$.ajax({
    type: "PUT",
    url: "@Url.Action("MyControllerAction", "Home")",
    dataType: "json",
    data: updatedData,
    cache: false,
    success: function(d) {
        if (d.result) {
            window.location.assign("index.html");
        } else { 
            console.log('do something constructive with the error here...');
        }
    },
    error: function(xhr, textStatus, errorThrown) {
        // TODO: Show error
    }
});

最后，当AJAX请求成功时，将用户重定向到另一个屏幕似乎有点多余。如果这是您需要的行为，那么使用AJAX的意义就不存在了，您可以直接使用标准表单提交。

- Rory McCrossan

---

所以这个可以工作，但只有当我将类型设置为：“POST”时...现在它对我有用，但似乎奇怪的是，它会命中一个控制器操作而不是另一个...是的，当测试时我已经更改了属性为它们各自的类型。无论如何，感谢您的答案。这个可以工作，所以我会标记它为正确的。 - mbuchok

Answer 2

我发现在我的编程中经常使用JSON.stringify()可以解决这些问题。

data: JSON.stringify(updatedData),

总代码将如下所示：

$.ajax({
    type: "PUT",
    url: "@Url.Action("MyControllerAction", "Home")",
    content: "application/json; charset=utf-8",
    dataType: "json",
    data: JSON.stringify(updatedData),
    cache: false,
    success: function(d) {
    if (d.success == true)
    window.location = "index.html";
    else {}
         },
         error: function(xhr, textStatus, errorThrown) {
    // TODO: Show error
  }
});

- Nathan Koop

---

谢谢，我会尝试一下并回复您。 - mbuchok

Answer 3

除了上面提供的内容外，还要注意如果PUT和DELETE的动词标头不起作用，请参见此处提供的响应：

ASP.NET Web API - PUT & DELETE Verbs Not Allowed - IIS 8

基本上你只需要这个：

  <system.webServer>
<validation validateIntegratedModeConfiguration="false" />
<modules runAllManagedModulesForAllRequests="true">
  <remove name="WebDAVModule"/>
  <remove name="FormsAuthentication" />
</modules>
<handlers>
  <remove name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" />
  <remove name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" />
  <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
  <add name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness32" responseBufferLimit="0" />
  <add name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness64" responseBufferLimit="0" />
  <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>

- mbuchok