web-dev-qa-db-ja.com

Jsonを渡す方法 POST としてWeb APIメソッドにデータを送りますか？

ASP.NET MVC4 Web APIアプリケーションは顧客を節約するためにpostメソッドを定義します。顧客はPOSTリクエストボディにjson形式で渡されます。 postメソッドのcustomerパラメータにプロパティのnull値が含まれています。

投稿データが顧客オブジェクトとして渡されるようにこれを修正する方法

可能であれば、Content-Type：application/x-www-form-urlencodedを使用してください。フォームを投稿するjavascriptメソッドでそれを変更する方法がわからないからです。

コントローラ：

public class CustomersController : ApiController {

  public object Post([FromBody] Customer customer)
        {
            return Request.CreateResponse(HttpStatusCode.OK,
            new
            {
                customer = customer
            });
        }
    }
}

public class Customer
    {
        public string company_name { get; set; }
        public string contact_name { get; set; }
     }

要求：

POST http://localhost:52216/api/customers HTTP/1.1
Accept: application/json, text/javascript, */*; q=0.01
X-Requested-With: XMLHttpRequest
Content-Type: application/x-www-form-urlencoded; charset=UTF-8

{"contact_name":"sdfsd","company_name":"ssssd"}
javascriptasp.net-mvcjsonasp.net-mvc-4asp.net-web-api
276
Andrus

_編集_ ：31/10/2017

同じコード/アプローチが Asp.Net Core 2.0 でも機能します。主な違いは、asp.netコアでは、Web APIコントローラとMvcコントローラの両方が単一のコントローラモデルに統合されていることです。そのため、あなたの戻り値の型はIActionResultかその実装の1つであるかもしれません（例：OkObjectResult）

つかいます

contentType:"application/json"

送信時にJSON.stringifyメソッドを使ってJSON文字列に変換する必要があります。

そしてモデルバインダーはjsonデータをあなたのクラスオブジェクトにバインドします。

以下のコードはうまく動作します（テスト済み）

$(function () {
    var customer = {contact_name :"Scott",company_name:"HP"};
    $.ajax({
        type: "POST",
        data :JSON.stringify(customer),
        url: "api/Customer",
        contentType: "application/json"
    });
});

結果

enter image description here

contentTypeプロパティは、データをJSON形式で送信していることをサーバーに通知します。 JSONデータ構造を送信したので、モデルバインディングは正しく行われます。

Ajaxリクエストのヘッダを調べると、Content-Typeの値がapplication/jsonに設定されていることがわかります。

ContentTypeを明示的に指定しないと、デフォルトのコンテンツタイプapplication/x-www-form-urlencoded;が使用されます。

2015年11月に編集して、コメントに含まれる他の問題を解決する

複雑なオブジェクトを投稿する

このようなWeb APIアクションメソッドのパラメータとして複雑なビューモデルクラスがあるとしましょう。

public class CreateUserViewModel
{
   public int Id {set;get;}
   public string Name {set;get;}  
   public List<TagViewModel> Tags {set;get;}
}
public class TagViewModel
{
  public int Id {set;get;}
  public string Code {set;get;}
}

あなたのWeb APIエンドポイントは

public class ProductController : Controller
{
    [HttpPost]
    public CreateUserViewMode Save([FromBody] CreateUserViewModel m)
    {
        // I am just returning the posted model as it is. 
        // You may do other stuff and return different response.
        // Ex : missileService.LaunchMissile(m);
        return m;
    }
}

これを書いている時点では、ASP.NET MVC 6は最新の安定版であり、MVC 6では、Web APIコントローラーとMVCコントローラーの両方がMicrosoft.AspNet.Mvc.Controller基本クラスを継承しています。

クライアント側からメソッドにデータを送信するには、以下のコードがうまく機能するはずです。

//Build an object which matches the structure of our view model class
var model = {
    Name: "Shyju",
    Id: 123,
    Tags: [{ Id: 12, Code: "C" }, { Id: 33, Code: "Swift" }]
};

$.ajax({
    type: "POST",
    data: JSON.stringify(model),
    url: "../product/save",
    contentType: "application/json"
}).done(function(res) {       
    console.log('res', res);
    // Do something with the result :)
});

モデルバインディングは、一部のプロパティに対しては機能しますが、すべてに対しては機能しません。どうして ？

Web APIメソッドのパラメータを[FromBody]属性で装飾していない場合

[HttpPost]
public CreateUserViewModel Save(CreateUserViewModel m)
{
    return m;
}

ContentTypeプロパティ値を指定せずにモデル（JSON形式ではなく生のJavaScriptオブジェクト）を送信する

$.ajax({
    type: "POST",
    data: model,
    url: "../product/save"
}).done(function (res) {
     console.log('res', res);
});

モデルバインディングは、型が複合型または別の型であるプロパティではなく、モデルのフラットプロパティに対して機能します。私たちの場合、IdおよびNameプロパティは、パラメータmに正しくバインドされますが、Tagsプロパティは空のリストになります。

短いバージョンの$.postを使用している場合も同じ問題が発生します。この場合、要求の送信時にデフォルトのContent-Typeが使用されます。

$.post("../product/save", model, function (res) {
    //res contains the markup returned by the partial view
    console.log('res', res);
});
494
Shyju

WebapiでPOSTを扱うのは難しいかもしれません。すでに正しい答えを追加したいです。

GETを扱うのは簡単なのでPOSTに特に焦点を当てます。私は多くの人がwebapisでGETに関する問題を解決するために探し回っているとは思わない。いずれかの方法..

あなたの質問があれば - MVC Web Apiでは、 - どのように - 一般的なHTTP動詞以外のカスタムアクションメソッド名を使用しますか？ - 複数の投稿を行いますか？ - 複数の単純型を投稿しますか？ - jQueryを介して複雑な型を投稿しますか？

それでは、以下の解決策が役立ちます。

まず、Web APIでCustomアクションメソッドを使用するには、Web APIルートを次のように追加します。

public static void Register(HttpConfiguration config)
{
    config.Routes.MapHttpRoute(
        name: "ActionApi",
        routeTemplate: "api/{controller}/{action}");
}

そして、あなたは次のようなアクションメソッドを作成することができます。

[HttpPost]
public string TestMethod([FromBody]string value)
{
    return "Hello from http post web api controller: " + value;
}

それでは、ブラウザのコンソールから以下のjQueryを起動してください。

$.ajax({
    type: 'POST',
    url: 'http://localhost:33649/api/TestApi/TestMethod',
    data: {'':'hello'},
    contentType: 'application/x-www-form-urlencoded',
    dataType: 'json',
    success: function(data){ console.log(data) }
});

第二に、複数の投稿を実行する、それは簡単です、複数のアクションメソッドを作成し、[HttpPost]属性で飾ります。カスタム名などを割り当てるには[ActionName（ "MyAction"）]を使用してください。以下の4番目のポイントでjQueryに来るでしょう。

第三に、まず第一に、単一のアクションで複数のSIMPLE型を投稿することはできません。さらに、（クエリ文字列またはRESTスタイルでパラメータを渡すのとは別に）単一の単純型でさえも投稿するための特別なフォーマットがあります。これが私がRest Clients（FiddlerやChromeのAdvanced RESTクライアントエクステンション）のようなものに頭を悩ませ、5時間近くWebを捜し求めていた点で、次のURLが役に立ちました。リンクに関連するコンテンツを引用します。

Content-Type: application/x-www-form-urlencoded
in the request header and add a = before the JSON statement:
={"Name":"Turbo Tina","Email":"[email protected]"}

シモンズ：固有の構文に気付いた？

http://forums.asp.net/t/1883467.aspx?The+received+value+is+null+when+I+try+to+Post+to+my+Web+Api

とにかく、その話を乗り越えましょう。移動します。

第四に、jQuery、もちろん、$ .ajax（）を介して複雑な型を投稿することが、早急にその役割を果たすようになるでしょう。

アクションメソッドが、IDと名前を持つPersonオブジェクトを受け取るとしましょう。だから、JavaScriptから：

var person = { PersonId:1, Name:"James" }
$.ajax({
    type: 'POST',
    url: 'http://mydomain/api/TestApi/TestMethod',
    data: JSON.stringify(person),
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function(data){ console.log(data) }
});

そしてアクションは次のようになります。

[HttpPost]
public string TestMethod(Person person)
{
    return "Hello from http post web api controller: " + person.Name;
}

上記のすべて、私のために働いた！乾杯！

66
Vaibhav

私はこれで遊んでいて、やや奇妙な結果を発見しました。次のようにC＃のクラスにパブリックプロパティがあるとします。

public class Customer
{
    public string contact_name;
    public string company_name;
}

それなら、Shyjuが提案しているようにJSON.stringifyトリックを行い、それを次のようにして呼び出す必要があります。

var customer = {contact_name :"Scott",company_name:"HP"};
$.ajax({
    type: "POST",
    data :JSON.stringify(customer),
    url: "api/Customer",
    contentType: "application/json"
});

しかし、あなたがこのようにあなたのクラスにゲッターとセッターを定義するならば：

public class Customer
{
    public string contact_name { get; set; }
    public string company_name { get; set; }
}

それならあなたはもっと簡単にそれを呼ぶことができます：

$.ajax({
    type: "POST",
    data :customer,
    url: "api/Customer"
});

これはHTTPヘッダを使用します。

Content-Type:application/x-www-form-urlencoded

ここで何が起こっているのかよくわかりませんが、フレームワークのバグ（機能？）のように見えます。おそらく、異なるバインディングメソッドが異なる「アダプタ」を呼び出しているため、application/json用のアダプタはパブリックプロパティで動作しますが、フォームエンコードデータ用のアダプタは動作しません。

しかし、どれがベストプラクティスと考えられるのかわかりません。

10
Andy

使用 JSON.stringify（） JSON形式の文字列を取得するには、AJAXを呼び出すときに、必ず以下の属性を渡します。

  • contentType： 'application/json'
  • dataType： 'json'

以下は、asp.net Web APIへのajax投稿呼び出しを行うためのjqueryコードを提供するものです。

var product =
    JSON.stringify({
        productGroup: "Fablet",
        productId: 1,
        productName: "Lumia 1525 64 GB",
        sellingPrice: 700
    });

$.ajax({
    URL: 'http://localhost/api/Products',
    type: 'POST',
    contentType: 'application/json',
    dataType: 'json',
    data: product,
    success: function (data, status, xhr) {
        alert('Success!');
    },
    error: function (xhr, status, error) {
        alert('Update Error occurred - ' + error);
    }
});
1
Dilip Nannaware

WebAPIサービスが、渡しているJSONと一致する構造を持つ厳密に型指定されたオブジェクトを期待していることを確認してください。また、投稿しているJSONを必ず文字列化してください。

これが私のJavaScriptです（AngluarJSを使用）。

$scope.updateUserActivity = function (_objuserActivity) {
        $http
        ({
            method: 'post',
            url: 'your url here',
            headers: { 'Content-Type': 'application/json'},
            data: JSON.stringify(_objuserActivity)
        })
        .then(function (response)
        {
            alert("success");
        })
        .catch(function (response)
        {
            alert("failure");
        })
        .finally(function ()
        {
        });

そして、これが私のWebAPIコントローラです。

[HttpPost]
[AcceptVerbs("POST")]
public string POSTMe([FromBody]Models.UserActivity _activity)
{
    return "hello";
}
0
scott janson

1）あなたのクライアントサイドでは、http.postリクエストを以下のような文字列で送ることができます。

var IndexInfo = JSON.stringify(this.scope.IndexTree);
this.$http.post('../../../api/EvaluationProcess/InsertEvaluationProcessInputType', "'" + IndexInfo + "'" ).then((response: any) => {}

2）その後、あなたのWeb APIコントローラで、あなたはそれを逆シリアル化することができます

public ApiResponce InsertEvaluationProcessInputType([FromBody]string IndexInfo)
    {
var des = (ApiReceivedListOfObjects<TempDistributedIndex>)Newtonsoft.Json.JsonConvert.DeserializeObject(DecryptedProcessInfo, typeof(ApiReceivedListOfObjects<TempDistributedIndex>));}

3）ApiReceivedListOfObjectsクラスは以下のようになります。

public class ApiReceivedListOfObjects<T>
    {
        public List<T> element { get; set; }

    }

4）手順2のJsonConvert.DeserializeObjectコマンドの前に、シリアル化された文字列（ここではIndexInfo）が次のような構造になるようにします。

var resp = @"
    {
        ""element"": [
        {
            ""A"": ""A Jones"",
            ""B"": ""500015763""
        },
        {
            ""A"": ""B Smith"",
            ""B"": ""504986213""
        },
        {
            ""A"": ""C Brown"",
            ""B"": ""509034361""
        }
        ]
    }";
0
Mahdi ghafoorian

xml -Web API 2の代わりにjson形式でデータを返すための次のコード： -

Global.asaxファイルに次の行を追加します 

GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;
        GlobalConfiguration.Configuration.Formatters.Remove(GlobalConfiguration.Configuration.Formatters.XmlFormatter);
0
UJS
@model MVCClient.Models.ProductDetails

@{
    ViewBag.Title = "ProductDetails";
}
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $("#Save").click(function () {
            var ProductDetails = new Object();
            ProductDetails.ProductName =  $("#txt_productName").val();
            ProductDetails.ProductDetail = $("#txt_desc").val();
            ProductDetails.Price= $("#txt_price").val();
            $.ajax({
                url: "http://localhost:24481/api/Product/addProduct",
                type: "Post",
                dataType:'JSON',
                data:ProductDetails, 

                success: function (data) {
                    alert('Updated Successfully');
                    //window.location.href = "../Index";
                },
                error: function (msg) { alert(msg); }
            });
        });
    });
    </script>
<h2>ProductDetails</h2>

<form id="form1" method="post">
    <fieldset>
        <legend>ProductDetails</legend>


        <div class="editor-label">
            @Html.LabelFor(model => model.ProductName)
        </div>
        <div class="editor-field">

            <input id="txt_productName" type="text" name="fname">
            @Html.ValidationMessageFor(model => model.ProductName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ProductDetail)
        </div>
        <div class="editor-field">

            <input id="txt_desc" type="text" name="fname">
            @Html.ValidationMessageFor(model => model.ProductDetail)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Price)
        </div>
        <div class="editor-field">

            <input id="txt_price" type="text" name="fname">
            @Html.ValidationMessageFor(model => model.Price)
        </div>



        <p>
            <input id="Save" type="button" value="Create" />
        </p>
    </fieldset>

</form>
    <div>
        @Html.ActionLink("Back to List", "Index")
    </div>

</form>



@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}
0
Debendra Dash

マイクロソフトはこれを行う良い例を挙げました：

https://docs.Microsoft.com/ja-jp/aspnet/web-api/overview/advanced/sending-html-form-data-part-1

まずリクエストを検証する

if (ModelState.IsValid)

そしてシリアル化されたデータを使用します。

Content = new StringContent(update.Status)

ここで 'ステータス'は複合型のフィールドです。シリアル化は.NETによって行われ、心配する必要はありません。

0
FrankyHollywood