Angled JSからASP.Net Web API 2にPOSTされた複雑なフォームデータをバインドするときに発生する

角度データサービスからWeb API 2コントローラのPOSTアクションにフォームデータを渡す方法に関するいくつかのデモの例を取り上げています。しかし、私のオブジェクトは常にコントローラ側でnullです。 SORTBY、currentPageに、ItemsPerPage、SortDesc - ここに私のコードはAngled JSからASP.Net Web API 2にPOSTされた複雑なフォームデータをバインドするときに発生する

ようAngularJSは、Web APIに

$http({ 
      method: 'POST', 
      url: MyApp.rootPath + 'api/CustomerSpaSilo/SearchCustomers?nameFilter=' + nameFilter, 
      data: $.param({ '': pagingVM }), 
      headers: { 
       'Content-Type': 'application/x-www-form-urlencoded' 
      } 
     });

を呼び出してどのように見えるかpagingVMは、ページングの詳細が含まれている角度$スコープオブジェクトです。

マイウェブAPI POSTメソッド

[HttpPost] 
     [Route("SearchCustomers")] 
     public HttpResponseMessage Post(string nameFilter, [FromBody] PagingViewModel pagingVM) 
     { 
      if (nameFilter == null) 
       nameFilter = ""; 

      //Code Implementation 
     }

PagingViewModelクラス

public class PagingViewModel 
    { 
     public string SortBy { get; set; } 

     public bool SortDesc { get; set; } 

     public int CurrentPage { get; set; } 

     public int TotalItems { get; set; } 

     public int ItemsPerPage { get; set; } 

     public int TotalPages 
     { 
      get { 
       if (this.ItemsPerPage > 0) 
        return (int)Math.Ceiling((decimal)TotalItems/this.ItemsPerPage); 
       else 
        return 1; 
      } 
     } 
    }

pagingVMパラメータは常にデフォルトオブジェクトとして来ています。 Chromeのネットワークアクティビティを簡単に見てみると、すべての値がリクエスト本体でフォームデータとして渡されていることがわかります。私がパラメータの型をFormDataCollectionに変更すると、値を読み込んでオブジェクトを構築できますが、Web APIが受信リクエストの値をバインドするのを探しています。私はここに何かを逃していますか

出典

2016-04-12 Vivek N

私はこの 'かなり確信している'：pagingVMが読むべき '' pagingVMを：pagingVM – Kell

@Kell私もそれを試みたが役に立たなかった。実際には、それは私が最初に試みた方法です。クロムネットワークタブでは、pagingVM [SortBy]：CustomerIDなどと表示されます。私はそれの周りに角括弧が問題であるかどうか疑問に思っています。 –

おそらく、JSON.stringify（$。param（{'pagingVM'：pagingVM}））も必要です。 – Kell

あなたにのようなあなたの$httpサービスを使用する必要があります -

$http.post(MyApp.rootPath + 'api/CustomerSpaSilo/SearchCustomers?nameFilter=' + nameFilter, pagingVM).then(function (result) { 
       //success 
       }, function (data) { 
       //faild 
       });

出典

2016-04-12 13:46:44

それもうまくいきませんでした。リクエストペイロードは{"pagingVM"：{"SortBy"： "CustomerID"、 "SortDesc"：false、 "CurrentPage"：2、 "TotalItems"：13、 "ItemsPerPage"：10、 "TotalPages"：2}}のようになります。。さらに私はフォームデータとして自分のデータを送信したい。 –

コントローラ

[RoutePrefix("api/CustomerSpaSilo")] 
    public class CustomerSpaSiloController : ApiController 
    { 
     [HttpPost] 
     [Route("SearchCustomers")] 
     public IHttpActionResult Post(string nameFilter, [FromBody] PagingViewModel pagingVM) 
     { 
      if (nameFilter == null) 
       nameFilter = ""; 

      //Code Implementation 

      return Ok("Result=" + pagingVM.ToString()); 
     } 
    }

モデル

public class PagingViewModel 
    { 
     public string SortBy { get; set; } 

     public bool SortDesc { get; set; } 

     public int CurrentPage { get; set; } 

     public int TotalItems { get; set; } 

     public int ItemsPerPage { get; set; } 

     public int TotalPages 
     { 
      get 
      { 
       if (this.ItemsPerPage > 0) 
        return (int) Math.Ceiling((decimal) TotalItems/this.ItemsPerPage); 
       else 
        return 1; 
      } 
     } 

     public override string ToString() 
     { 
      return string.Format("PagingViewModel(SortBy='{0}',SortDesc='{1}', CurrentPage='{2}', TotalItems='{3}', ItemsPerPage='{4}')", 
       SortBy, SortDesc, CurrentPage, TotalItems, ItemsPerPage); 
     } 
    }

郵便配達のスクリーンショット

jsのクライアント

<!DOCTYPE html> 
<html ng-app="app"> 
<head> 
    <title>Home</title> 
</head> 
<body ng-controller="HomeController"> 

<button ng-click="post()">post</button> 
<p>{{status}}</p> 
<pre>{{result | json}}</pre> 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
<script> 
    (function() { 
     'use strict'; 

     console.trace('js loaded'); 

     angular 
      .module('app', []) 
      .factory('api', apiFactory) 
      .controller('HomeController', HomeController); 

     function apiFactory($http) { 
      var svc = { 
       searchCustomers: searchCustomers 
      }; 
      return svc; 

      function searchCustomers(nameField, paging) { 
       return $http 
        .post('/api/CustomerSpaSilo/SearchCustomers?nameFilter=' + nameField, 
         paging, 
         { 
          headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, 
          transformRequest: function (obj) { 
           var str = []; 
           for (var p in obj) 
            str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); 
           return str.join("&"); 
          } 
         } 
        ); 
      } 
     } 

     function HomeController($scope, api) { 

      console.trace('HomeController'); 

      $scope.status = null; 
      $scope.result = null; 
      $scope.post = function() { 

       var paging = { 
        SortBy: 'abc', 
        SortDesc: false, 
        CurrentPage: 3, 
        TotalItems: 52, 
        ItemsPerPage: 10 
       }; 

       api.searchCustomers('ddd', paging) 
        .then(function(response) { 
         $scope.status = 'OK'; 
         $scope.result = response.data; 
        }, function(reason) { 
         $scope.status = 'Error'; 
         $scope.result = reason; 
        }); 
      }; 
     } 
    })(); 
</script> 
</body> 
</html>

クロムのスクリーンショット

出典

2016-04-12 14:28:44 Ali

答えをありがとう。私はそれがどのように進むのかをあなたに教えてくれます。 –

郵便配達部が機能します。それは少し役に立ちます。しかし、jsクライアントの部分は動作していません。要求ペイロードは、{"SortBy"： "abc"、 "SortDesc"：false、 "CurrentPage"：3、 "TotalItems"：52、 "ItemsPerPage"：10}のようになります。あなたはjsクライアントがあなたのために働いていますか？ –

私はデータとしてデータを渡しました：$。param（pagingVM）これはうまくいったようです。答えをありがとう、それは私を助けた。私はあなたのjsクライアントコードが期待どおりに動作しているかどうかを知ることにはまだ興味があります。 –

Angled JSからASP.Net Web API 2にPOSTされた複雑なフォームデータをバインドするときに発生する

答えて

関連する問題