jQuery 通过 Ajax 在 ASP.NET MVC C# 中调用 Action 方法答案

【问题标题】：jQuery to call Action Method in ASP.NET MVC C# by AjaxjQuery 通过 Ajax 在 ASP.NET MVC C# 中调用 Action 方法
【发布时间】：2015-07-19 22:03:01
【问题描述】：

我已经尝试了好几个小时来完成这项工作，我真的希望你们中的一个人比我更了解（非常多）这个。当客户端在文本框中键入时，我想打电话给MVC C# 控制器方法称为 updateOrder()。理想情况下，我想使用 FormCollection 访问表单元素（该表单称为“createOrder”）。

在控制器中，我有：

[WebMethod]
public static void updateOrder(){
    string s = "asdf";
}

上面的字符串声明是断点的。在视图中，我有一个我在stackoverflow上找到的基本上复制和粘贴的方法：

JavaScript

function updateOrderJS() {
    var $form = $('form[id="createOrder"]');
    $.ajax({type    : "POST",
        url     : $form.attr('action'),
        data    : $form.serialize(),
        error   : function(xhr, status, error) {},
        success : function(response) {
             updateOrder();
        }
    });
    return false;
}

事件很简单：

JavaScript

updateOrderJS();

updateOrderJS() 方法触发（通过警报检查），但断点没有。

【问题讨论】：

你能调试看看你在 $form.attr('action') 中得到的值吗？
在您的 ajax 调用中将“类型”更改为“方法”，例如方法：“POST”而不是：“类型：“POST”

标签： javascript c# jquery ajax asp.net-mvc

【解决方案1】：

在 Asp.Net MVC 中，您不需要用WebMethod 装饰您的方法。您只需创建一个 Action（这是一个方法）并从中返回一个结果。示例：

public class CustomerController : Controller 
{
   public ActionResult Index() 
   {
       return View();
   }

   [HttpPost]
   public ActionResult UpdateOrder()
   {
      // some code
      return Json(new { success = true, message = "Order updated successfully" }, JsonRequestBehavior.AllowGet);
   }
}

在您的View 中，您可以尝试这样的javascript（使用$.ajax jquery 方法——参见cmets）：

$.ajax({
    url: '@Url.Action("UpdateOrder")', // to get the right path to controller from TableRoutes of Asp.Net MVC
    dataType: "json", //to work with json format
    type: "POST", //to do a post request 
    contentType: 'application/json; charset=utf-8', //define a contentType of your request
    cache: false, //avoid caching results
    data: {}, // here you can pass arguments to your request if you need
    success: function (data) {
         // data is your result from controller
        if (data.success) { 
            alert(data.message);
        }
    },
    error: function (xhr) {
        alert('error');
    }
});

【讨论】：

费利佩，你真棒。我确信其他答案可能是正确的，我选择了你的答案，因为它几乎是即插即用的（所以写）。现在我可以开始添加服务器端代码了。谢谢

【解决方案2】：

在 MVC 中，您不需要 [WebMethod] 的东西 - 您只需让常规控制器操作返回 ActionMethod（如果不需要返回值，则返回 null）。带有静态方法的 WebMethod 属性适用于 WebForms，而不是 MVC。

public ActionMethod updateOrder(MyModel someModel) {
    // Do something
    return null;
}

您在 javascript 中的 URL 将是该操作的 URL，您可以在 Razor 中使用 @Url.Action("updateOrder", "Orders") 访问该操作，其中“Orders”是您的控制器的名称。

【讨论】：

【解决方案3】：

确保“url”的格式为 page.aspx/updateOrder。
指定datatype: json
确保您的 updateOrderJS() 正在被调用。
确保包含contentType: "application/json; charset=utf-8"。

注意：[WebMethod] 用于调用 webforms 方法，而不是 MVC。

【讨论】：

我不是反对你的人。但我不认为 MVC Urls 通常包含page.aspx。数据类型和内容类型可能会影响模型绑定器是否工作，但我不确定它是否会影响路由是否被调用。提问者已经在他的问题中说他验证了 updateOrderJS() 被调用了。
WebMethodAttribute 用于 Web 表单，静态方法也是如此，因此我认为这里存在混淆。我也在底部添加了一个注释来解释这一点。

【解决方案4】：

您似乎将 MVC 路由的 URL 放在了 <form> 标记的 action 属性中。我看不到该属性的样子，因为您没有发布您的 html，但从我可以看到该属性的值可能是错误的。

大多数时候，特定 MVC 操作的 URL 是 http://ServerDomain/Path(IfAny)/ControllerName/ActionName。例如，如果您有这样的控制器和操作...

public class StackController
{
    [HttpPost]
    public ActionResult Overflow()
    {
        return View();
    }
}

...并且您的 ASP.NET 应用程序已部署到 www.example.com，您的 <form> 标记的 action 属性中的 URL 将是 http://www.example.com/Stack/Overflow。

当然，您的 ASP.NET MVC 中的其他设置可能会更改这些 URL，例如 global.asax 的 RegisterRoutes 方法中的路由设置，或者如果您的控制器被划分为区域。如果您的 <form> 的 URL 看起来正确，请在您的 ASP.NET 应用程序中发布 html 以及任何相关的控制器路由代码。

如果您的表单位于 Razor 视图（cshtml 文件）内，您可以使用 <form action="@Url.Action({ controller = "ControllerName", action = "ActionName" })" method="post"> 生成正确的表单 URL。

【讨论】：