POST(ajax)を介してJSONデータを送信し、コントローラー(MVC)からJSON応答を受信する


139

私はそのようなJavaScriptで関数を作成しました:

function addNewManufacturer() {
       var name = $("#id-manuf-name").val();
       var address = $("#id-manuf-address").val();
       var phone = $("#id-manuf-phone").val();

       var sendInfo = {
           Name: name,
           Address: address,
           Phone: phone
       };

       $.ajax({
           type: "POST",
           url: "/Home/Add",
           dataType: "json",
           success: function (msg) {
               if (msg) {
                   alert("Somebody" + name + " was added in list !");
                   location.reload(true);
               } else {
                   alert("Cannot add to list !");
               }
           },

           data: sendInfo
       });
}

jquery.json-2.3.min.jsスクリプトファイルを呼び出してtoJSON(array)メソッドに使用しました。

コントローラでは、私はこのAddアクションを持っています

[HttpPost]
public ActionResult Add(PersonSheets sendInfo) {
    bool success = _addSomethingInList.AddNewSomething( sendInfo );

    return this.Json( new {
         msg = success
    });

}

しかしsendInfo、メソッドのパラメーターがnullになると。

モデル:

public struct PersonSheets
{
    public int Id;
    public string Name;
    public string Address;
    public string Phone;
}

public class PersonModel
{
    private List<PersonSheets> _list;
    public PersonModel() {
         _list= GetFakeData();
    }

    public bool AddNewSomething(PersonSheets info) {
         if ( (info as object) == null ) {
            throw new ArgumentException( "Person list cannot be empty", "info" );
         }

         PersonSheets item= new PersonSheets();
         item.Id = GetMaximumIdValueFromList( _list) + 1;
         item.Name = info.Name;
         item.Address = info.Address;
         item.Phone = info.Phone;

         _list.Add(item);

         return true;
    }
}

POSTでデータが送信されたときに、アクションメソッドでどのように実行できますか?

使い方がわかりません。また、JSONを介して(ajaxに)応答を返すことは可能ですか?


2
こんにちはスネークアイズ。受け入れた答えを根羽の答えに変えてもらえますか?Praveen Prasadによる回答は、現時点では(執筆時点で)JSONのエンコードに失敗し、JSON Content-Typeヘッダーの設定に失敗しているため、壊れています。Nehaはこれらの両方を正しく行います。私は両方の答えをテストしました。
nullの

回答:


120

モデルを作成する

public class Person
{
    public string Name { get; set; }
    public string Address { get; set; }
    public string Phone { get; set; }
}

以下のようなコントローラー

    public ActionResult PersonTest()
    {
        return View();
    }

    [HttpPost]
    public ActionResult PersonSubmit(Vh.Web.Models.Person person)
    {
        System.Threading.Thread.Sleep(2000);  /*simulating slow connection*/

        /*Do something with object person*/


        return Json(new {msg="Successfully added "+person.Name });
    }

JavaScript

<script type="text/javascript">
    function send() {
        var person = {
            name: $("#id-name").val(),
            address:$("#id-address").val(),
            phone:$("#id-phone").val()
        }

        $('#target').html('sending..');

        $.ajax({
            url: '/test/PersonSubmit',
            type: 'post',
            dataType: 'json',
            contentType: 'application/json',
            success: function (data) {
                $('#target').html(data.msg);
            },
            data: JSON.stringify(person)
        });
    }
</script>

141
var SendInfo= { SendInfo: [... your elements ...]};

        $.ajax({
            type: 'post',
            url: 'Your-URI',
            data: JSON.stringify(SendInfo),
            contentType: "application/json; charset=utf-8",
            traditional: true,
            success: function (data) {
                ...
            }
        });

そして実際に

public ActionResult AddDomain(IEnumerable<PersonSheets> SendInfo){
...

このように配列をバインドできます

var SendInfo = [];

$(this).parents('table').find('input:checked').each(function () {
    var domain = {
        name: $("#id-manuf-name").val(),
        address: $("#id-manuf-address").val(),
        phone: $("#id-manuf-phone").val(),
    }

    SendInfo.push(domain);
});

これがお役に立てば幸いです。


モデルを文字列化すると、データが改ざんされてXSSの脆弱性が挿入される可能性があるため、セキュリティ上の懸念が高まるのではないですか?
Dave

@デーブいいえ、エンドポイント(この場合はmvcコントローラー関数)はクライアントを信頼してはならないため、XSSチェックはサーバーで行われる必要があります。コントローラーは、正しい方法でデータを解析し、呼び出し元(webapp)にデータを送り返す責任があります。呼び出し側はまた、シオマネキ、または郵便配達、または多分他のアプリのようなもの。..・ホープ、これは理にかなって...かもしれない
Dieterg

6
参考までに、application / jsonで文字セットを送信することは無効です。文字セットは、text / *タイプにのみ適用されます。ヘッダーに関係なく、application / jsonは常にUTF-8です。
Rich Remer 2014

リクエストでdataTypeをcontentTypeに置き換えると、機能します。
黄里

3
JSON.stringify()を使用して解決した私の問題、誰かがjsonオブジェクトを送信しているときになぜこれが必要なのかについて誰かが少し説明できますか?
Muhammad Zeshan Ghafoor 2017年

13

を使用しJSON.stringify(<data>)ます。

あなたのコードを変更しますdata: sendInfodata: JSON.stringify(sendInfo)。これがお役に立てば幸いです。


1
contentTypeを 'application / json'に設定する必要がある場合もあります。一部のエンドポイントは推測する可能性がありますが、JSONであることをエンドポイントに伝える方が信頼性が高くなります。
ヌル

2

JSONをポストするには、それを文字列化する必要があります。オプションをfalseにJSON.stringify設定しprocessDataます。

$.ajax({
    url: url,
    type: "POST",
    data: JSON.stringify(data),
    processData: false,
    contentType: "application/json; charset=UTF-8",
    complete: callback
});

0

あなたのPersonSheets性質を持っているint IdIdポストではないので、modelbindingが失敗しました。Idをnullに設定できるようにする(int?)か、POstで少なくともId = 0を送信します。


-2

電話$.toJSONして追加する必要はありませんtraditional = true

data: { sendInfo: array },
traditional: true

するだろう。


良い選択はありません!あなたのコードに従うと、メソッドのパラメータAdd(object[] sendInfo)はnullになります!
Snake Eyes
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.