Envie dados JSON via POST (ajax) e receba resposta json do Controller (MVC)

139

Eu criei uma função em javascript assim:

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

Liguei para o jquery.json-2.3.min.jsarquivo de script e usei-o como toJSON(array)método.

No controlador, eu tenho essa Addação

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

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

}

Mas, sendInfocomo o parâmetro do método se torna nulo.

O modelo:

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

Como eu poderia fazer no método de ação quando os dados foram enviados com o POST?

Eu não sei usar Além disso, é possível enviar de volta a resposta (para ajax) via JSON?

Snake-eyes
fonte
2
Olá, olhos de cobra. Você pode alterar a resposta aceita para a resposta de Neha? A resposta de Praveen Prasad está quebrada no momento, pois (no momento da escrita) falha ao codificar JSON e falha ao definir o cabeçalho JSON Content-Type. Neha corretamente faz os dois. Eu testei as duas respostas.
null

Respostas:

120

Crie um modelo

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

Controladores como abaixo

    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
fonte
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 em ação

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

você pode vincular sua matriz assim

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

Espero que isso possa ajudá-lo.

Neha
fonte
Não é assim que a rigidez do modelo suscita algumas preocupações de segurança, pois pode violar os dados e inserir algumas vulnerabilidades XSS?
Dave
@ Não, um ponto de extremidade (neste caso, uma função de controlador mvc) NUNCA deve confiar em um cliente; portanto, a verificação XSS deve ser feita no servidor. O controlador é responsável por analisar os dados da maneira correta e enviá-los de volta ao chamador (aplicativo da web). O chamador também poderia ser algo como violinista, ou carteiro, ou talvez um outro app .. Espero que isso faz sentido ..
Dieterg
6
Para sua informação, enviar um conjunto de caracteres com application / json é inválido. O conjunto de caracteres se aplica apenas a tipos de texto / *. application / json é SEMPRE UTF-8, independentemente de qualquer cabeçalho.
Rich Remer
Quando substituo dataType por contentType na solicitação, ele funciona.
Huangli #
3
Meu problema resolvido usando JSON.stringify (), alguém pode explicar por que precisamos disso enquanto alguém enviando objeto json?
Muhammad Zeshan Ghafoor
13

Usar JSON.stringify(<data>) .

Mude seu código: data: sendInfopara data: JSON.stringify(sendInfo). Espero que isso possa ajudá-lo.

Hiep Nguyen
fonte
1
Pode ser necessário definir o contentType como 'application / json' também. Alguns pontos de extremidade podem adivinhar, mas dizer que é JSON é mais confiável.
null
2

Para postar o JSON, você precisará especificá-lo. JSON.stringifye defina a processDataopção como false.

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

Seu PersonSheets tem uma propriedade int Id, Idnão está na postagem, portanto, a ligação do modelo falha. Torne o ID nulo (int?) Ou envie pelo menos Id = 0 com o POst.

Kirsten
fonte
-2

Você não precisa ligar $.toJSONe adicionartraditional = true

data: { sendInfo: array },
traditional: true

faria.

Abdul Munim
fonte
não é uma boa escolha! Se eu seguir o seu código, o parâmetro method Add(object[] sendInfo)será nulo!
Olhos de cobra