jQuery Ajax 无法调用 MVC 4 控制器方法答案

【问题标题】：jQuery Ajax failing to call to MVC 4 Controller methodjQuery Ajax 无法调用 MVC 4 控制器方法
【发布时间】：2013-06-18 16:00:08
【问题描述】：

我正在尝试使用 jQuery 在单击某个按钮后触发 Ajax 调用。我已经阅读了几个可能遇到的语法和问题示例，但未能找到适合我的原因的有效解决方案。这是代码。

控制器方法：(HomeController.cs)

    [HttpPost]
    public JsonResult ChangeCompany(string companyCode)
    {
        return Json(new { result = companyCode }, JsonRequestBehavior.AllowGet);
    }

jQuery 代码：

    function changeCompany(company) {
    $.ajax({
        url: '@Url.Action("ChangeCompany", "Home")',
        type: 'POST',
        data: JSON.stringify({ companyCode: company }),

        success: function (data) {
            alert("Company: " + data);
        },
        error: function (req, status, error) {
            alert("R: " + req + " S: " + status + " E: " + error);
        }
    });
}

最后，我调用这个函数：

$('.companyButton').click(function () {
    compCode = $(this).text();
    debug("Click event --> " + $(this).text());
    changeCompany(compCode);
});

我的调试消息正确显示，Ajax 调用不断失败并显示以下警报：R: [object Object] S: error E: Not Found

我不完全确定该怎么做。

我知道关于这个主题有几个问题，但似乎没有一个能解决我的问题，老实说，我不确定这些代码块有什么问题。任何见解将不胜感激。

编辑：值得注意的是，这是针对移动设备的。在 Windows 8 Phone Emulator (Internet Explorer) 和 jQuery Mobile 上进行测试。不确定这是否会影响 Ajax

编辑 2：查看原始网络调用后，'Url.Action("ChangeCompany", "Home")' 似乎没有被转换为正确的 URL，而是被直接调用，就好像它是原始 URL 文本一样。这是由于过时的 jQuery 还是其他因素造成的？

【问题讨论】：

你的控制器动作方法是什么样的？此外，在您的浏览器开发工具中查看原始网络调用，并准确了解调用是什么 - 这应该有助于排除故障。
我认为这是服务器端错误。当您单击请求时，您可以检查 Chrome 的开发工具栏网络部分吗？您可以在“预览”选项卡中看到响应。
如果您在浏览器中查看源代码，URL 是否正确？如果在错误函数中设置了debugger;，请仔细查看参数。
我在手机模拟器中运行它，所以我无法使用常用的浏览器开发工具。我将实现一个 ViewSwitcher，这样我就可以在桌面浏览器中对其进行测试，然后就开发工具返回的结果与大家联系。
好的，请参阅编辑#2。 @Url.Action 被解析为正确的 URL 存在问题

标签： javascript jquery ajax asp.net-mvc-4

【解决方案1】：

您的 EDIT2 没问题，您似乎在单独的 JavaScript 文件中使用 url: '@Url.Action("ChangeCompany", "Home")',。您只能在 .cshtml 文件中编写剃须刀代码，它在 .js 文件中不起作用

【讨论】：

啊，有道理。不知道为什么我认为我可以在视图之外使用它。
继续将 URL 硬编码到 Ajax 调用中，现在可以正常工作了，感谢您的关注！
你可以在.cshtml中创建一个带有url的变量并在.js文件中访问它

【解决方案2】：

您在 AJAX 调用中缺少一些重要参数。如下更改您的 AJAX 调用：

function changeCompany(company) {
    $.ajax({
              url: '@Url.Action("ChangeCompany", "Home")',
              type: 'POST',
              data: JSON.stringify({ companyCode: company }), 
              success: function (data) {
                       alert("Company: " + data);
                        },
             error: function (req, status, error) {
                       alert("R: " + req + " S: " + status + " E: " + error);
                        }
          });}

然后您可以使用[HttpPost] 属性注释您的控制器方法，如下所示；

 [HttpPost]
 public JsonResult ChangeCompany(string companyCode)
 {
   return Json(new { result = companyCode }, JsonRequestBehavior.AllowGet);
 }

【讨论】：

我执行了以下操作并收到了相同的错误警报。不确定是什么问题。

【解决方案3】：

请注意，您的操作不会直接返回 companyCode。因此，您将其分配给 Json result 属性在你的成功函数中显示你需要的结果：

success: function (data) 
  {
     alert("Company: " + data.result);
  }

另外：E: Not Found 告诉我您可能有一些路由问题。如果您在 ChangeCompany Action 内设置断点，它会被击中吗？

【讨论】：