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

时间:2016-01-12 14:39:02

标签: javascript c# angularjs asp.net-web-api

我正在尝试将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
}

有什么问题?我应该以不同的方式传递数据吗?我尝试了不同的组合,但我无法让它发挥作用。

3 个答案:

答案 0 :(得分:5)

你想要做的是发送一个字符串,而不是像你现在用{ 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 });

答案 1 :(得分: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);
    }
});

答案 2 :(得分:2)

第一个错误在控制器中,public IHttpActionResult UploadExcel([FromBody]string fileString) 应与输入参数一起使用。

data

然后客户端上的$http({ method: "POST", url: url, data: "test string" }).then( 变量应该是单个字符串,所以

// 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
}

无论如何,我后来发现这个解决方案有些问题,看起来最简单,但我建议避免使用。

最佳解决方案

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

$scope.add

这样就可以自动解析来自客户端的JSON代码,并且可以轻松更改数据输入。

额外提示

$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"); } ); } 角度函数在问题中是正确的,但这是一个更完整的例子

function rfvc_update_order_status( $order_status, $order_id ) {
    $order = new WC_Order( $order_id );
    if ( 'on-hold' == $order_status && 'on-hold' == $order->status ) {
        $order->update_status('processing', 'order_note');
    }
    return $order_status;
}