Web APIにJSONオブジェクトを送信する

Question

フォームからWeb APIアクションに情報を送信する方法を理解しようとしています。ここに私の見解は

ある

<div id="part-sources"> 
    @foreach (SmallHorse.ProductSource source in Model.Sources) 
    { 
     @source.ItemNumber <br /> 
    } 
</div> 
<label>Part Number</label> 
<input type="text" id="part-number" name="part-number" /> 

<input type="submit" id="save-source" name="save-source" value="Add" /> 

ここ

var source = { 
     'ID': 0, 
     'ProductID': $('#ID').val(), 
     'PartNumber': $('#part-number').val(), 
     'VendorID': $('#Vendors').val() 
    } 

    $.ajax({ 
     type: "POST", 
     dataType: "json", 
     url: "/api/PartSourceAPI/", 
     data: JSON.stringify({ model: source }), 
     success: function (data) { 
      alert('success'); 
     }, 
     error: function (error) { 
      jsonValue = jQuery.parseJSON(error.responseText); 
      jError('An error has occurred while saving the new part source: ' + jsonValue, { TimeShown: 3000 }); 
     } 
    }); 

は私のモデルである

public class PartSourceModel 
{ 
    public int ID { get; set; } 
    public int ProductID { get; set; } 
    public int VendorID { get; set; } 
    public string PartNumber { get; set; } 
} 

ここに私のコントローラのアクションは

です：これは私が使用しようとしているjQueryの/ AJAXです

// POST api/partsourceapi 
public void Post(PartSourceModel model) 
{ 
    // currently no values are being passed into model param 
} 

私には何が欠けていますか？今、私がデバッグし、Ajaxリクエストがコントローラのアクションに当たったときにステップ実行すると、モデルのパラメータに何も渡されません。

Answer 1

これを試してみてくださいする必要があります。

jqueryの

$('#save-source').click(function (e) { 
     e.preventDefault(); 
     var source = { 
      'ID': 0, 
      //'ProductID': $('#ID').val(), 
      'PartNumber': $('#part-number').val(), 
      //'VendorID': $('#Vendors').val() 
     } 
     $.ajax({ 
      type: "POST", 
      dataType: "json", 
      url: "/api/PartSourceAPI", 
      data: source, 
      success: function (data) { 
       alert(data); 
      }, 
      error: function (error) { 
       jsonValue = jQuery.parseJSON(error.responseText); 
       //jError('An error has occurred while saving the new part source: ' + jsonValue, { TimeShown: 3000 }); 
      } 
     }); 
    }); 

コントローラ

public string Post(PartSourceModel model) 
    { 
     return model.PartNumber; 
    } 

ビュー

<label>Part Number</label> 
<input type="text" id="part-number" name="part-number" /> 

<input type="submit" id="save-source" name="save-source" value="Add" /> 

今、あなたはあなたがテキストボックスに必要事項を記入した後、controllerはバックアラートでPartNumberボックスに書いたものを吐き出すだろう「Add」をクリックしたとき。

Answer 2

私はあなたがmodel引用符で囲む必要があると考えている：

JSON.stringify({ "model": source }) 

Answer 3

変更：

data: JSON.stringify({ model: source }) 

へ：

data: {model: JSON.stringify(source)} 

そして、あなたのコントローラでこれを行う：

public void PartSourceAPI(string model) 
{ 
     System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer(); 

    var result = js.Deserialize<PartSourceModel>(model); 
} 

あなたはjqueryのに使用するURLが/api/PartSourceAPIの場合、コントローラ名はapiでなければならず、アクション（メソッド）はPartSourceAPI

Answer 4

var model = JSON.stringify({ 
    'ID': 0, 
    'ProductID': $('#ID').val(), 
    'PartNumber': $('#part-number').val(), 
    'VendorID': $('#Vendors').val() 
}) 

$.ajax({ 
    type: "POST", 
    dataType: "json", 
    contentType: "application/json", 
    url: "/api/PartSourceAPI/", 
    data: model, 
    success: function (data) { 
     alert('success'); 
    }, 
    error: function (error) { 
     jsonValue = jQuery.parseJSON(error.responseText); 
     jError('An error has occurred while saving the new part source: ' + jsonValue, { TimeShown: 3000 }); 
    } 
}); 

var model = JSON.stringify({  'ID': 0,  ...': 5,  'PartNumber': 6,  'VendorID': 7 }) // output is "{"ID":0,"ProductID":5,"PartNumber":6,"VendorID":7}" 

データのようなものである "{" モデル "： "ID"：0、" 商品コード "：6、" 製品型番 "：7、" ベンダーID "：8}}" ウェブAPIコントローラができませんあなたのモデルにバインドしてください