从 AngularJS 客户端发布到 ASP.NET WebApi 服务器

Question

我正在尝试将字符串从 AngularJS 应用程序（使用 $http）发布到基于 ASP.NET WebApi 构建的服务器，但我一添加参数就得到 404。

客户端代码是这样的

$scope.add = function () {
    // ...cut...
    $http({ method: "POST", url: url, data: { fileString: "test string" }}).then(
        function successCallback(response) {
            $log.info(response.data);
        }
    );
}

服务器代码是

[HttpPost]
public IHttpActionResult UploadExcel(string fileString) {
    // cut
}

我得到一个 404，但是如果我删除服务器端的参数它可以工作，所以我可以使用这样的服务器端代码

[HttpPost]
public IHttpActionResult UploadExcel() {
    // cut
}

怎么了？我应该以不同的方式传递数据吗？我尝试了不同的组合，但我无法让它发挥作用。

Answer 1

您要做的是发送一个字符串，而不是像您现在使用 { fileString: "test string" } 所做的 JSON 对象。当我想发送一个字符串时，我通常会像这样从 Angular 发送数据：

$http.post("/Search/QuickSearch?searchQuery="+ searchString);

我的控制器准备好接收这样的字符串：

[HttpPost]
public IHttpActionResult QuickSearch(string searchQuery)
{
    // cut
}

如果我想发送一个 JSON 对象，我会告诉我的控制器它应该期待什么，就像这样：

[HttpPost]
public IHttpActionResult SaveActivity(ActivityEditForm form);
{
    // cut
}

public class ActivityEditForm
{
    public int? Id { get; set; }
    [Required]
    public string Title { get; set; }

    public string Description { get; set; }
}

然后像这样从 Angular 发送我的 JSON：

$http.post("/Activity/SaveActivity", { form: activity });

Answer 2

我建议你应该捕获 Angular 发送的请求。默认情况下，Angular 在请求正文中以 json 字符串形式发送参数。

我不确定 Asp.net 是否可以从正文中的 json 字符串解析它们。

所以，你可以尝试添加下面的代码（也需要jQuery）

angular.module('yourApp').config(function ($httpProvider) {
    $httpProvider.defaults.transformRequest = function(data){
        if (data === undefined) {
            return data;
        }
        return $.param(data);
    }
});

Answer 3

第一个错误在控制器中，[FromBody]应该和输入参数一起使用。

public IHttpActionResult UploadExcel([FromBody]string fileString)

那么客户端上的data变量应该是单个字符串，所以

$http({ method: "POST", url: url, data: "test string" }).then(

反正我后来发现这个解决方案有些问题，这似乎是最简单的，但我建议避免它。

---

最佳解决方案

感谢@Squazz 的回答和this SO answer 我强烈建议更改 webapi 控制器，客户端是正确的。只需引入一个类来处理单个字符串并适配输入参数

// new class with a single string
public class InputData {
    public string fileString { get; set; }
}

// new controller 
[HttpPost]
public IHttpActionResult UploadExcel([FromBody] InputData myInput) {
    string fileString = myInput.fileString;
    // cut
}

这样来自客户端的 JSON 代码会被自动解析，并且很容易更改数据输入。

额外提示

$scope.add 角度函数在问题中是正确的，但这里有一个更完整的示例

$scope.testDelete = function () {
    var url = "http://localhost/yourAppLink/yourControllerName/UploadExcel";
    var data = ({ fileString: "yourStringHere" });
    $http({ method: "POST", url: url, data: data }).then(
        function successCallback(response) {
            console.log("done, here is the answer: ", response.data);
        }, function errorCallback(response) {
            console.log("an error occurred");
        }
    );
}