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

Posted 2023-02-22

【中文标题】jQuery 通过 Ajax 在 ASP.NET MVC C# 中调用 Action 方法

【英文标题】：jQuery to call Action Method in ASP.NET MVC C# by Ajax

【发布时间】：2015-07-19 22:03:01

【问题描述】：

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

在控制器中，我有：

C#

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

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

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”

【参考方案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。