Надсилання даних JSON через POST (ajax) та отримання відповіді json від контролера (MVC)


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як параметр методу стає нульовим.

Модель:

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?

Я не знаю, як користуватися. Також можна надіслати відповідь (на ajax) через JSON?


2
Привіт Зміїні очі. Чи можете ви змінити прийняту відповідь на відповідь Нехи? Відповідь Praveen Prasad наразі порушена, оскільки вона (під час написання) не кодує JSON і не може встановити заголовок типу JSON Content-Type. Неха правильно робить це обоє. Я перевірив обидві відповіді.
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). Абонент може також бути чимось на кшталт фідлера, або листоноші, чи, можливо, іншим додатком. Сподіваюся, це має сенс ..
Дітерг

6
FYI, надсилання шаблону з додатком / json недійсне. Charset застосовується лише для типів тексту / *. application / json - ВЖЕ завжди UTF-8, незалежно від будь-яких заголовків.
Річ Ремер

Коли я замінюю dataType на contentType у запиті, він працює.
huangli

3
Моя проблема, вирішена за допомогою JSON.stringify (), може хто-небудь мало пояснити, навіщо нам це потрібно, якщо хтось надсилає об’єкт json?
Мухаммед Зешан Гафор

13

Використовуйте JSON.stringify(<data>).

Змініть код: data: sendInfoна data: JSON.stringify(sendInfo). Сподіваюся, що це може вам допомогти.


1
Вам може знадобитися також встановити contentType на "application / json". Деякі кінцеві точки можуть здогадатися, але сказати їм, що це JSON, є більш надійним.
null

2

Щоб опублікувати JSON, вам потрібно буде його впорядкувати. JSON.stringifyі встановіть processDataпараметр у значення false.

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

0

У ваших PersonSheets є властивість int Id, Idвона не розміщена, тому прив'язка моделі не вдається. Зробіть Id нульовим (int?) Або надішліть atleast Id = 0 за допомогою POst.


-2

Вам не потрібно дзвонити $.toJSONта додаватиtraditional = true

data: { sendInfo: array },
traditional: true

зробив би.


немає гарного вибору! Якщо я дотримуюся вашого коду, параметр методу Add(object[] sendInfo)буде нульовим!
Зміїні очі
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.