jsonをmvcコントローラに渡す

Question

jQuery ajaxを介してAsp.Net MVCコントローラにデータを投稿しようとしています。私は私が働いていますフォロークラスを持っている：

public class InnerStyle 
{ 
    [JsonProperty("color")] 
    public string HeaderColor { get; set; } 
    [JsonProperty("font-size")] 
    public string HeaderFontSize { get; set; } 
    [JsonProperty("font-family")] 
    public string HeaderFontFamily { get; set; } 
} 

postメソッドは次のようになります。

public JsonResult UpdateRecord(InnerStyle innerStyle) 
{ 
    //Do some validation 

    return Json("OK"); 
} 

そして、私のjQueryのようになります：

$('#font-size-ddl').change(function() { 
    var value = $(this).val(); 
    headerObj["font-size"] = value; 
    console.log(JSON.stringify({ innerStyle: headerObj })); 
    $.ajax({ 
      type: "POST", 
      url: "@Url.Action("UpdateRecord", "Document")", 
      data: JSON.stringify({ innerStyle: headerObj}), 
      contentType: "application/json; charset=utf-8", 
      success: function (data) { 
      console.log(data); 
      } 
    }); 
}); 

にconsole.logで上記の変更イベントにより、次のJSON文字列が生成されます：

{"innerStyle":{"text-align":"","font-size":"20px","color":""}} 

ここで私の問題は、UpdateRecordアクションでブレークポイントを設定し、innerStyleオブジェクトがnullであることを確認することです。誰かが私がどこに間違って行くのか教えてもらえますか？

Answer 1

以下のコードを試してみましたが、うまくいきました。

$.ajax({ 
      type: "POST", 
      url: "@Url.Action("UpdateRecord", "Document")", 
      data: JSON.stringify({"text-align":"","font-size":"20px","color":""}), 
      contentType: "application/json; charset=utf-8", 
      success: function (data) { 
      console.log(data); 
      } 
    }); 

は、私は単純にパラメータ名"innerStyle"を削除しました。私はちょうどタイプミスかもしれない1つの事に気づいた。 "text-align"："font-family"の代わりにのプロパティを渡しています。したがって、コントローラーのアクション内のすべてのプロパティにデータを設定していません。UpdateRecord（InnerStyle innerStyle）。あなたは、コントローラのアクションUpdateRecordデータベース（InnerStyle innerStyle）

{ 
    "color": "sample string 1", 
    "font-size": "sample string 2", 
    "font-family": "sample string 3" 
} 

Answer 2

@code、あなたのコードは結構です上のオブジェクト全体をマッピングするために、以下のJSONオブジェクトに似て渡す必要があります。あなたがAJAX経由でコントローラを打っている間は[Json Property]を使うことはできません。実際のクラスのプロパティを使用する必要があります。

$('#font-size-ddl').change(function() { 
    var value = $(this).val(); 
    var headerObj = {}; 
    headerObj["HeaderColor"] = "Red"; 
    headerObj["HeaderFontSize"] = value; 
    headerObj["HeaderFontFamily"] = "Arial"; 
    console.log(JSON.stringify({ custom: headerObj })); 
    $.ajax({ 
     type: "POST", 
     url: "@Url.Action("UpdateRecord", "Employee")", 
     traditional: true, 
     data: JSON.stringify({ custom: headerObj }), 
     dataType: JSON, 
     contentType: "application/json; charset=utf-8", 
     success: function (data) { 
      console.log(data); 
     } 
    }); 
});