web-dev-qa-db-ja.com

AJAX and Web Api Post Method-どのように機能しますか？

AJAX/Jqueryおよびc＃を使用してデータベースに書き込もうとしています。パラメーターをnullとして表示するC＃コードに渡すたびに、Visual Studioが生成するデフォルトのテンプレートを使用しています。コントローラークラスを作成します。

注：これは、私が電話しようとしている休憩サービスです。 （通常のASP Webサイト... MVCではありません。また、GET Rest APIは完全に機能します。）

Jquery/AJAX：

        var dataJSON = { "name": "test" }

        $('#testPostMethod').bind("click", GeneralPost);
        function GeneralPost() {
            $.ajax({
                type: 'POST',
                url: '../api/NewRecipe',
                data:JSON.stringify(dataJSON),
                contentType: 'application/json; charset=utf-8',
                dataType: 'json'
            });
        }

C＃

    //If I remove the [FromBody] Tag then when I click the button this method is never called.
    public void Post([FromBody]string name)

    {

    }

編集：

コードを少し調整しましたが、まだ同じ問題が発生しています。要約すると、POSTメソッドを読み込んでいますが、nullを渡しています。

C＃

 public class RecipeInformation
    {
        public string name { get; set; }

    }

        public void Post(RecipeInformation information)

        {

        }

AJAX：

    var dataJSON = { information: { name: "test" } };

    $('#testPostMethod').bind("click", GeneralPost);
    console.log(dataJSON);
    function GeneralPost() {
        $.ajax({
            type: 'POST',
            url: '../api/NewRecipe',
            data: dataJSON,
            contentType: 'application/json; charset=utf-8',
        });
    }
c#jqueryajaxasp.net-web-api
23
Yecats

単純型の場合、サーバー側で：

public void Post([FromBody]string name)
{
}

クライアント側では、json形式で送信するかどうかを定義するだけです。

    var dataJSON = "test";

    $('#testPostMethod').bind("click", GeneralPost);
    function GeneralPost() {
        $.ajax({
            type: 'POST',
            url: '/api/NewRecipe',
            data: JSON.stringify(dataJSON),
            contentType: 'application/json; charset=utf-8',
            dataType: 'json'
        });
    }

複雑なタイプで動作させたい場合は、サーバー側から次を定義する必要があります。

public class RecipeInformation
{
    public string name { get; set; }
}

public class ValuesController : ApiController
{
    public void Post(RecipeInformation information)
    {
    }
}

そして、クライアント側から：

    var dataJSON = { name: "test" };

    $('#testPostMethod').bind("click", GeneralPost);
    function GeneralPost() {
        $.ajax({
            type: 'POST',
            url: '/api/NewRecipe',
            data: JSON.stringify(dataJSON),
            contentType: 'application/json; charset=utf-8',
            dataType: 'json'
        });
    }
50
cuongle

ASP.NET WebAPIを使用しており、URLからすべての単純型（int、bool、stringなど）とbodyからすべての複雑な型をバインドしていると思います。名前をFromBody属性でマークした場合、URLマッピングの代わりに要求本文からバインドします。

ASP.NET WebAPIルーティングとパラメーターバインディングの詳細については、こちらをご覧ください。

2
Sławomir Rosiek

このようなことを試して、jquery paramメソッドを使用できます

    var postData = {
        name : 'name'
    }

    $('#testPostMethod').bind("click", GeneralPost);
    function GeneralPost() {
        $.ajax({
            type: 'POST',
            url: '../api/NewRecipe',
            data: $.param(postData,true),
            contentType: 'application/json; charset=utf-8',
            dataType: 'json'
        });
    }
2
itsstephyoutrick

クラスを次のように作成する場合、データコントラクトの属性が不足している部分があります。

[DataContract]
public class RecipeInformation
{
    [DataMember]
    public string name { get; set; }
}

これらの属性はSystem.Runtime.Serializationにあり、Jsonパーサー（Json.NET）はそれらを使用してモデルのデシリアライズ（ヘルプ）を行います。

1
Christopher Stevenson

APIコントローラーでのバインドは少し奇妙な側面です。私は信じている：

public void Post([FromBody]RecipeInformation information)

と

var dataJSON = { name: "test" };

動作するはずです。フォームデータとして渡すだけで確実に動作します。

1
Yaur

$（ "＃updateuser"）。click（function（）{

        var id = $("#id").val();
        var dataJSON = $("#username").val();

        alert("" + dataJSON);

        $.ajax({


            url: 'http://localhost:44700/api/Home/' + id,
            type: 'PUT',
            data: JSON.stringify(dataJSON),
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',

            success: function (data, textStatus, xhr) {
                $.each(data, function (key, val) {
                    $("<li>" + val + "</li>").appendTo($("#names"));
                })
            },
            error: function (xhr, textStatus, errorThrown) {
                alert('Error in Operation');
            }

            })

    })
0
Rai Ahmad Fraz

Microsoft Docs 前述のJSコードを使用することで問題が見つかりました

_$.post('api/updates/simple', { "": $('#status1').val() });
_

私が逃したのは空のプロパティ名を追加することでしたので、OPが行う必要があるのは{"":data:JSON.stringify(dataJSON)},の代わりにdata:JSON.stringify(dataJSON),です

0
RobLudlmsFrn