Публикация на сервер ASP.NET WebApi от клиента AngularJS

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

То, что вы хотите сделать, это отправить строку, а не объект JSON, как вы делаете сейчас с { fileString: "test string" }. Когда я хочу, чтобы отправить строку, что я обычно делаю, что я отправляю данные из угловых так:

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

А затем отправить мой JSON из Угловая, как это:

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

Answer 2

Я предлагаю вам уловить запрос, отправленный 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 код от клиента автоматически анализироваться, и это легко изменить входные данные.

Extra Кончик

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