Send JSON data via POST (ajax) and receive json response from Controller (MVC)

Question

I created a function in javascript like that:

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

I called jquery.json-2.3.min.js script file and I used it for toJSON(array) method.

In controller, I have this Add action

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

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

But sendInfo as method parameter becomes null.

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

How could I do in action method when the data was sent with POST ?

I don't know how to use. Also, it is possible to send back the response (to ajax) via JSON ?

Hi Snake Eyes. Can you please change the accepted answer to Neha's answer? The answer by Praveen Prasad is currently broken as it (at time of writing) fails to encode JSON, and fails to set JSON Content-Type header. Neha's correctly does both of these. I've tested both answers. — null
– null, Commented Jan 23, 2017 at 10:33

Shashank Agrawal · Accepted Answer · 2015-12-09 09:49:23Z

171

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

and in action

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

you can bind your array like this

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

hope this can help you.

edited Dec 9, 2015 at 9:49

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

answered Dec 15, 2011 at 10:32

Neha

3,0153 gold badges21 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Dave Over a year ago

Isn't it so that stringify'ing the model rises some security concerns as on can tamper the data and insert some XSS vulnerabilities?

Dieterg Over a year ago

@Dave no, an endpoint (in this case an mvc controller function) should NEVER trust a client, therefore the XSS check should be done at the server. The controller is responsible for parsing the data in the correct way and send the data back to the caller (webapp). The caller could also be something like fiddler, or postman, or maybe another app.. Hope this makes sense..

Rich Remer Over a year ago

FYI, sending a charset with application/json is invalid. Charset only applies to text/* types. application/json is ALWAYS UTF-8, regardless of any headers.

Muhammad Zeshan Ghafoor Over a year ago

My problem solved using JSON.stringify(), can anyone little explain why we need this while if someone sending json object?

vapcguy Over a year ago

@MohammadZeshan Likely because the body, across the wire, would look like [object] instead of your string of values. You'd be asking the endpoint, which would likely be C#, to read a JavaScript object.

|

kah608 · Accepted Answer · 2018-06-12 15:27:09Z

150

Create a model

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

Controllers Like Below

    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>

edited Jun 12, 2018 at 15:27

kah608

5652 silver badges10 bronze badges

answered Dec 15, 2011 at 8:49

Praveen Prasad

32.2k20 gold badges77 silver badges106 bronze badges

1 Comment

grantr Over a year ago

dataType and contentType are important

Shashank Agrawal · Accepted Answer · 2015-12-09 09:46:40Z

15

Use JSON.stringify(<data>).

Change your code: data: sendInfo to data: JSON.stringify(sendInfo). Hope this can help you.

edited Dec 9, 2015 at 9:46

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

answered Jul 10, 2014 at 9:09

Hiep Nguyen

1611 silver badge2 bronze badges

1 Comment

null Over a year ago

You may need to set the contentType to 'application/json' as well. Some endpoints may guess, but telling them it is JSON is more reliable.

camille · Accepted Answer · 2020-01-28 18:54:58Z

11

To post JSON, you will need to stringify it. JSON.stringify and set the processData option to false.

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

edited Jan 28, 2020 at 18:54

camille

16.9k18 gold badges44 silver badges67 bronze badges

answered Jan 28, 2020 at 18:34

user1799669

1311 silver badge4 bronze badges

Comments

Sivakumar D · Accepted Answer · 2022-03-13 16:16:00Z

1

Need to use JSON.stringify
And in the Flask use json.loads

res = request.get_data("data")
d_token = json.loads(res)

json.loads returns a dictionary, te values can be retrieved d_token['tokenID']

 $.ajax({
            type: "POST",
            url: "/subscribe",
            contentType: 'application/json;charset=UTF-8',
            data: JSON.stringify({'tokenID':  token}),
            success: function (data) {
                console.log(data);
              
            }
     });

Flask

@app.route('/test', methods=['GET', 'POST'])
def test():
    res = request.get_data("data")
    d_token = json.loads(res)
    logging.info("Test called..{}".format(d_token["tokenID"]))

answered Mar 13, 2022 at 16:16

Sivakumar D

1094 bronze badges

Comments

Kirsten · Accepted Answer · 2016-10-27 14:13:04Z

0

Your PersonSheets has a property int Id, Id isn't in the post, so modelbinding fails. Make Id nullable (int?) or send atleast Id = 0 with the POst .

answered Oct 27, 2016 at 14:13

Kirsten

5084 silver badges11 bronze badges

Comments

buddemat · Accepted Answer · 2022-08-15 17:11:37Z

0

    const URL = "http://localhost:8779/api/v1/account/create";
    let reqObj = {accountName:"", phoneNo:""}

    const httpRequest = new XMLHttpRequest();
    let accountName = document.getElementById("accountName").value
    let phoneNo = document.getElementById("phoneNo").value
    reqObj.accountName = accountName;
    reqObj.phoneNo = phoneNo;
    console.log(reqObj);
    console.log(JSON.stringify(reqObj))
    httpRequest.onload = function() {
        document.getElementById("mylabel").innerHTML = this.responseText;
    }
    httpRequest.open("POST", URL);
    httpRequest.overrideMimeType("application/json");
    httpRequest.send(reqObj);

edited Aug 15, 2022 at 17:11

buddemat

5,33016 gold badges37 silver badges61 bronze badges

answered Aug 11, 2022 at 16:16

Bashir Onuche Okala III

689 bronze badges

Comments

Abdul Munim · Accepted Answer · 2011-12-15 08:46:04Z

-2

You don't need to call $.toJSON and add traditional = true

data: { sendInfo: array },
traditional: true

would do.

edited Dec 15, 2011 at 8:46

answered Dec 15, 2011 at 8:28

Abdul Munim

19.2k8 gold badges54 silver badges61 bronze badges

1 Comment

Snake Eyes Over a year ago

no good choice ! If I follow your code then the method parameter Add(object[] sendInfo) will be null !

Collectives™ on Stack Overflow

Send JSON data via POST (ajax) and receive json response from Controller (MVC)

8 Answers 8

6 Comments

Create a model

Controllers Like Below

Javascript

1 Comment

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

6 Comments

Create a model

Controllers Like Below

Javascript

1 Comment

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Linked

Related