2017-07-06 4 views
1

ユーザが保存ボタンをクリックすると、JavaScript関数はAJAXを使用してコントローラを呼び出し、オブジェクトに関するJSONデータを送信します。コントローラのNullパラメータがAjaxから

JavaScriptの機能

$.ajax({ 
     url: "/Data/sendFridgeItems?items=" + JSON.stringify($scope.items.data), 
     type: "POST", 
     data: JSON.stringify($scope.items.data), 
     dataType: "json", 
     contentType: "application/json; charset=utf-8", 
     success: function() { 
      console.log("good!"); 
     }, 
     error: function() { 
      console.log("error"); 
     } 
    }); 

コントローラ

[HttpPost] 
    public ActionResult SendFridgeItems(string items) 
    { 
     fridge[] fridgeItems = JsonConvert.DeserializeObject<fridge[]>(items); 
     foreach (fridge item in fridgeItems) 
     { 
      bool exists = cookDB.fridges.AsEnumerable() 
       .Any(x => x.Name == item.Name && x.Purchased == item.Purchased && x.Count == item.Count); 
      if (!exists) 
      { 
       cookDB.fridges.Add(item); 
       cookDB.SaveChangesAsync(); 
      } 
     } 
     return null; 
    } 

、それは動作しますが、私は、URLパラメータを使用して自分のデータを送信する方法は、私の状況で正しいとは思いませんデータが十分に大きくなるからです。自分のデータをコントローラに送るより良い方法があるかどうかを知りたがっていますか?

このように送信しようとしましたが、コントローラがnull値を受け取りました。

$.ajax({ 
     url: "/Data/sendFridgeItems", 
     type: "POST", 
     data: JSON.stringify($scope.items.data), 
     dataType: "json", 
     contentType: "application/json; charset=utf-8", 
     success: function() { 
      console.log("good!"); 
     }, 
     error: function() { 
      console.log("error"); 
     } 
    }); 

$ scope.items.data

N.Ivanovのソリューションのためのコントローラ(このコントローラ+ N.固定
[{"id":2,"name":"Item1","count":2,"type":"pcs.","purchased":"12/09/2017","wasted":"15/10/2017","cam":"Freezer","comment":"no comment","$$hashKey":"object:38"},{"id":3,"name":"Item2","count":30,"type":"g.","purchased":"15/01/1880","wasted":"21/03/1882","cam":"Cooler","comment":"commented","$$hashKey":"object:39"}] 

$ scope.items

$scope.items = { 
    "count": 2, 
    "data": [ 
     { 
      "name": "Item1", 
      "count": 2, 
      "type": "pcs.", 
      "purchased": "12/09/2017", 
      "wasted": "15/10/2017", 
      "cam": "Freezer", 
      "comment": "no comment" 
     }, 
    { 
      "name": "Item2", 
      "count": 30, 
      "type": "g.", 
      "purchased": "15/01/1880", 
      "wasted": "21/03/1882", 
      "cam": "Cooler", 
      "comment": "Commented" 
     } 
    ] 
}; 

のJSONイワノフのアヤックス=解)

public ActionResult SendFridgeItems(fridge[] items) 
    { 
     fridge[] fridgeItems = JsonConvert.DeserializeObject<fridge[]>(items.ToString()); 
     foreach (fridge item in items) 
     { 
      bool exists = cookDB.fridges.AsEnumerable() 
       .Any(x => x.Name == item.Name && x.Purchased == item.Purchased && x.Count == item.Count); 
      if (!exists) 
      { 
       cookDB.fridges.Add(item); 
       cookDB.SaveChangesAsync(); 
      } 
     } 
     return null; 
    } 
+0

はこのようにそれを作ると私は 'データをお知らせコントローラに送信するJSON解析を試してみてくださいJSON.stringify($ scope.items.data) }、 ' –

答えて

1

ajaxのdataフィールドはObjectを取り込み、それに文字列を与えます。 $scope.items.dataがオブジェクトであると仮定して、オブジェクトのみを試してみてください。 $scopeの変数が何であるかについてもう少し詳しく知っていれば、より良い回答を得ることができます。

コード:

$.ajax({ url: "/Data/sendFridgeItems", type: "POST", d̶a̶t̶a̶:̶ ̶$̶s̶c̶o̶p̶e̶.̶i̶t̶e̶m̶s̶.̶d̶a̶t̶a̶,̶ dataType: "json", contentType: "application/json; charset=utf-8", success: function() { console.log("good!"); }, error: function() { console.log("error"); } });

この情報がお役に立てば幸い!


EDIT:あなたは$scope.items.dataの内容を提供$scope.items.dataは、オブジェクトの配列であることに気づくために私を導いてきた

さらに検査後。これはあなたの問題を解決しJSONLint

・ホープを通じて $.ajax({ url: "/Data/sendFridgeItems", type: "POST", data: { "items": $scope.items.data }, dataType: "json", contentType: "application/json; charset=utf-8", success: function() { console.log("good!"); }, error: function() { console.log("error"); } });

私は{ "item": $scope.items.data }が有効なJSONであることを確認しました:だから、仕事と実際に有効なJSONを供給するAJAXために、次のコードを試してみてください! {「アイテム」:

+0

また、次のように試してみることもできます:' data:{item:JSON.stringify($ scope.items。データ)}、 'これが役立つことを願っています! –

+1

"data:$ scope.items.data" "無効なJSONプリミティブ:Item1"が発生します。また、データ:{item:JSON.stringify($ scope.items.data)}が "無効なJSONプリミティブ:アイテム"を発生させます。データのように引用:{"item":JSON.stringify($ scope.items.data)}は同じエラーを発生させます。変数は関数と同じスコープにあります。 JSON形式の$ scope.items.dataのデータを – Ryu

+0

@Ryuに追加しました。私の答えを更新しました。* EDIT *をチェックしてください。 –

0

は、オブジェクトとしてデータを解析し、

$.ajax({ 
    url: "/Data/sendFridgeItems", 
    type: "POST", 
    data: JSON.parse($scope.items.data), 
    dataType: "json", 
    contentType: "application/json; charset=utf-8", 
    success: function() { 
     console.log("good!"); 
    }, 
    error: function() { 
     console.log("error"); 
    } 
}); 
関連する問題