web-dev-qa-db-fra.com

Envoyer des données JSON via POST (ajax) et recevez une réponse JSON du contrôleur (MVC)

J'ai créé une fonction en javascript comme ça:

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

J'ai appelé le fichier de script jquery.json-2.3.min.js et je l'ai utilisé pour la méthode toJSON(array).

Dans le contrôleur, j'ai cette action Add

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

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

}

Mais sendInfo comme paramètre de méthode devient nul.

Le modèle:

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

Comment puis-je utiliser la méthode d'action lorsque les données ont été envoyées avec POST?

Je ne sais pas comment utiliser. En outre, il est possible de renvoyer la réponse (à ajax) via JSON?

Je vous remercie

jqueryajaxasp.net-mvcjson
112
Snake Eyes

Créer un modèle

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

Contrôleurs comme ci-dessous

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

et en action 

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

vous pouvez lier votre tableau comme ceci

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

j'espère que cela peut vous aider.

124
Neha

Utilisez JSON.stringify(<data>).

Changez votre code: data: sendInfo en data: JSON.stringify(sendInfo). J'espère que cela pourra vous aider.

8
Hiep Nguyen

Vos PersonSheets ont une propriété int Id, Id n'est pas dans le message, donc la liaison de modèle échoue. Assurez Id nullable (int?) Ou envoyez atleast Id = 0 avec le POst.

0
Kirsten