Invia dati JSON tramite POST (ajax) e ricevi la risposta json dal controller (MVC)


139

Ho creato una funzione in JavaScript come quella:

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

Ho chiamato il jquery.json-2.3.min.jsfile di script e l'ho usato per il toJSON(array)metodo.

Nel controller, ho questa Addazione

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

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

}

Ma sendInfocome parametro del metodo diventa nullo.

Il modello:

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

Come potrei fare nel metodo di azione quando i dati sono stati inviati con POST?

Non so come usare. Inoltre, è possibile rispedire la risposta (a Ajax) tramite JSON?


2
Ciao Snake Eyes. Potete per favore cambiare la risposta accettata alla risposta di Neha? La risposta di Praveen Prasad è attualmente interrotta in quanto (al momento della scrittura) non riesce a codificare JSON e non riesce a impostare l'intestazione Content-Type JSON. Neha fa correttamente entrambe queste cose. Ho testato entrambe le risposte.
null il

Risposte:


120

Crea un modello

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

Controller come di seguito

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

e in azione

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

puoi associare il tuo array in questo modo

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

Spero che questo possa aiutarti.


Non è così che stringere il modello solleva alcuni problemi di sicurezza in quanto possono manomettere i dati e inserire alcune vulnerabilità XSS?
Dave,

@Dave no, un endpoint (in questo caso una funzione di controller mvc) non dovrebbe MAI fidarsi di un client, quindi il controllo XSS dovrebbe essere eseguito sul server. Il responsabile del trattamento è responsabile dell'analisi dei dati nel modo corretto e della restituzione dei dati al chiamante (webapp). Il chiamante potrebbe anche essere qualcosa di simile a un violinista, o un postino, o forse un'altra app .. Spero che abbia un senso ...
Dieterg

6
Cordiali saluti, l'invio di un set di caratteri con application / json non è valido. Il set di caratteri si applica solo ai tipi di testo / *. application / json è SEMPRE UTF-8, indipendentemente dalle intestazioni.
Rich Remer,

Quando sostituisco dataType con contentType nella richiesta, funziona.
huangli,

3
Il mio problema è stato risolto usando JSON.stringify (), qualcuno può spiegare perché ne abbiamo bisogno se qualcuno invia un oggetto JSON?
Muhammad Zeshan Ghafoor l'

13

Usa JSON.stringify(<data>).

Cambia il tuo codice: data: sendInfoin data: JSON.stringify(sendInfo). Spero che questo possa aiutarti.


1
Potrebbe essere necessario impostare anche contentType su 'application / json'. Alcuni endpoint possono indovinare, ma dire loro che è JSON è più affidabile.
null il

2

Per pubblicare JSON, dovrai stringerlo. JSON.stringifye imposta l' processDataopzione su false.

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

0

Il tuo PersonSheets ha una proprietà int Id, Idnon è nel post, quindi la rilegatura dei modelli fallisce. Rendi Id nullable (int?) O invia almeno ID Id = 0 con il POst.


-2

Non è necessario chiamare $.toJSONe aggiungeretraditional = true

data: { sendInfo: array },
traditional: true

farebbe.


nessuna buona scelta! Se seguo il tuo codice, il parametro del metodo Add(object[] sendInfo)sarà null!
Snake Eyes,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.