Kirim data JSON melalui POST (ajax) dan terima respons json dari Controller (MVC)

140

Saya membuat fungsi dalam javascript seperti itu:

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
       });
}

Saya menelepon jquery.json-2.3.min.jsfile script dan saya menggunakannya untuk toJSON(array)metode.

Di pengontrol, saya memiliki Addtindakan ini

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

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

}

Tetapi sendInfokarena parameter metode menjadi nol.

Model:

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;
    }
}

Bagaimana saya bisa melakukan metode tindakan ketika data dikirim dengan POST?

Saya tidak tahu bagaimana cara menggunakannya. Juga, dimungkinkan untuk mengirim kembali respon (ke ajax) melalui JSON?

Mata ular
sumber
2
Hai Snake Eyes. Bisakah Anda mengubah jawaban yang diterima untuk jawaban Neha? Jawaban oleh Praveen Prasad saat ini rusak karena (pada saat penulisan) gagal untuk menyandikan JSON, dan gagal untuk menyetel header Jenis Konten JSON. Neha dengan benar melakukan keduanya. Saya telah menguji kedua jawaban tersebut.
null

Jawaban:

120

Buat model

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

Pengontrol Seperti Di Bawah Ini

    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>
Praveen Prasad
sumber
140
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) {
                ...
            }
        });

dan beraksi

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

Anda dapat mengikat array Anda seperti ini

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);
});

semoga ini bisa membantu Anda.

Neha
sumber
Bukankah sehingga merangkai model menimbulkan beberapa masalah keamanan seperti pada dapat merusak data dan memasukkan beberapa kerentanan XSS?
Dave
@Dave no, titik akhir (dalam hal ini fungsi pengontrol mvc) TIDAK PERNAH mempercayai klien, oleh karena itu pemeriksaan XSS harus dilakukan di server. Pengontrol bertanggung jawab untuk mengurai data dengan cara yang benar dan mengirim data kembali ke pemanggil (webapp). Penelepon juga bisa seperti pemain biola, atau tukang pos, atau mungkin aplikasi lain .. Semoga ini masuk akal ..
Dieterg
6
FYI, mengirim charset dengan application / json tidak valid. Charset hanya berlaku untuk tipe teks / *. application / json SELALU UTF-8, apa pun headernya.
Rich Remer
3
Masalah saya diselesaikan menggunakan JSON.stringify (), adakah yang bisa menjelaskan sedikit mengapa kita memerlukan ini sementara jika seseorang mengirim objek json?
Muhammad Zeshan Ghafoor
1
@MohammadZeshan Kemungkinan karena badan, di seberang kawat, akan terlihat seperti [object]string nilai Anda. Anda akan meminta titik akhir, yang kemungkinan besar adalah C #, untuk membaca objek JavaScript.
vapcguy
13

Gunakan JSON.stringify(<data>).

Ubah kode Anda: data: sendInfomenjadi data: JSON.stringify(sendInfo). Semoga ini bisa membantu Anda.

Hiep Nguyen
sumber
1
Anda mungkin perlu menyetel contentType ke 'application / json' juga. Beberapa endpoint mungkin menebak, tetapi memberi tahu mereka bahwa JSON lebih andal.
null
3

Untuk memposting JSON, Anda perlu merangkainya. JSON.stringifydan setel processDataopsi ke false.

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

PersonSheets Anda memiliki properti int Id, Idtidak ada dalam postingan, jadi pengikatan model gagal. Jadikan Id nullable (int?) Atau kirim setidaknya Id = 0 dengan POst.

Kirsten
sumber
-2

Anda tidak perlu menelepon $.toJSONdan menambahkantraditional = true

data: { sendInfo: array },
traditional: true

akan dilakukan.

Abdul Munim
sumber
tidak ada pilihan yang bagus! Jika saya mengikuti kode Anda maka parameter metode Add(object[] sendInfo)akan menjadi nol!
Snake Eyes