如何使 Angular POST 到 C# Asp.Net MVC 控制器？

Posted 2023-04-12

【中文标题】如何使 Angular POST 到 C# Asp.Net MVC 控制器？

【英文标题】：How to make Angular POST to C# Asp.Net MVC Controller?

【发布时间】：2014-10-16 20:28:03

【问题描述】：

我环顾四周，但没有找到任何可以实际成功调用 MVC 控制器的东西（Angular 帖子）。我知道那里有很多 Angular/.Net 开发人员。我能得到一些帮助吗？

让我们的答案简单明了！！！

如果我在控制器上设置了换行符，我可以看到这段代码实际上并没有命中控制器。

html

<!-- I click this button -->
<input type="button" value="click" onclick="postit()" />

javascript/Angular 发布

function postit() 
 $http(
        method: 'POST',
        url: 'Home/Give/',
        data:  id: 4 
    ).success(successFn).error(errorFn);


function successFn() 
    alert("success");

MVC C# 控制器

    [AcceptVerbs("OPTIONS")]
    public ActionResult Give(int id)
    
        var response = "some response" + id.ToString();
        return Json(new JavaScriptSerializer().Serialize(response)); 
     

【问题讨论】：

不太了解 Angular，所以我相信其他人会帮助您。为什么你接受选项动词，而不接受 POST？

我发现使用 WebAPI 比使用 MVC 进行 angular 的 AJAX 调用要好得多。

"OPTIONS" 在 Angular 帖子的另一个 SO 答案中被推荐。我正在尝试对我有利的赔率:)

我也看到了 WebAPI 控制器示例，但如果可能的话，我希望使用标准 MVC 控制器（如果没有其他方法可行，我会采用这种方式）。

OPTIONS 动词用于启用 CORS。您还应该输入[HttpPost] 以启用该操作以接收帖子。如果这不起作用，请告诉我们对端点的响应是什么，您可以通过检查 Chrome 开发者工具上的网络选项卡来做到这一点。

【参考方案1】：

king Puppy，我看到一些响应表明控制器参数应该是一个与正在发送的对象匹配的对象，但是，它似乎比这更宽容一点。考虑以下示例（我对您的函数进行了一些更新）：

Javascript：

$scope.postIt = function() 
  var data = 
    id = 4
  ;

  $http
    .post('Home/Give', data)
    .success(function(data, status, headers, config) 
      successFn();
    )
    .errors(function(data, status, headers, config) 
      errorFn();
    );
;


function successFn() 
  alert("success");
;

function errorFn() 
  alert("error");
;

MVC：

 public ActionResult Give(int id)
 
   var response = "some response" + id.ToString();

   return Json(new JavaScriptSerializer().Serialize(response)); 
 

如果设置断点，会看到传入的id是4。

如果你需要传入一个对象（所以不止一个 id），你可以在控制器端创建一个匹配的类或结构，或者有多个参数（前提是它们是简单的值类型） 即：

public JsonResult Give (int id, int reasonId)

 ... 

无论如何，我知道这篇文章已经过时了，但也许它会对你或其他人有所帮助。

【参考方案2】：

@kingPuppy 这是我如何将 angularjs 发布到 mvc 控制器的方法

一、html按钮，用于传递angular js按钮点击功能；

<button class="btn btn-info" id="runButton" ng-click="runService('Hi')">Run</button>

so runService 角点击（ng-click）函数；

// Operation Type is my mvc controller's param
$scope.runService = function (optionType) 
    $http(
        url: '/System/RunService',
        method: "POST",
        data: operationType : optionType
    ).then(function onSuccess(response) 
        // Handle success
        console.log(response);
    ).catch(function onError(response) 
       // Handle error
       console.log(response);
    );

最后这是系统控制器的动作；

注意：不要忘记 [HttpPost] 属性

[HttpPost]
public ActionResult RunService(string operationType)

    // Codes
    Response.StatusCode = 200;
    return Json(JsonRequestBehavior.AllowGet);

希望这可以帮助您了解如何将角度发布到 mvc 控制器。谢谢。

【参考方案3】：

您不需要做任何特别的事情来让 Angular 发布到标准 MVC 控制器，事实上，我有几个 Angular/MVC 应用程序使用的代码几乎与您在上面发布到工作正常的控制器的代码相同.

我会使用 Firebug 来确认您的应用发布到了正确的位置。我注意到的一件事是，您可能不希望 URL 末尾的 / 结尾（所以 Home/Give 而不是 Home/Give/）

祝你好运！