從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的答案和這個SO答案我強烈建議改變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 angular函數在問題中是正確的，但這里有一個更完整的例子

$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");
        }
    );
}