ASP.NET Core Razor ajax POST request data object is empty

Question

There is a simple ajax POST request that must stringify a simple class and pass it in the body of POST request, but the Person parameter on the server-side has empty(default) values

// javascript
var person = { "FirstName": "Andrew", "LastName": "Lock", "Age": "31" };
$.ajax({
    type: "POST",
    url: "/UpdatePostBody?handler=Abc",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    data: JSON.stringify(person),
    headers: {
        RequestVerificationToken:
            $('input:hidden[name="__RequestVerificationToken"]').val()
    },
})
    .done(function (result) {
        console.log(result);
});

// C# code
public IActionResult OnPostAbc(Person person)
{
    return new JsonResult("my result");
}

On the server-side, there is a simple ASP.NET Core Razor page with a method that gets hit and returns the result but the person param members have no values.

Yiyi You · Accepted Answer · 2021-02-23 01:43:23Z

10

Your Pesron data is null is because your Age in class Person is int type.And your person in { "FirstName": "Andrew", "LastName": "Lock", "Age": "31" } is string type,So you cannot get it.Also,as you pass json data from ajax to handler,you need to add [FromBody] in handler.Here is a demo:

cshtml:

<button onclick="postdata()">Abc</button>
function postdata() {
        //change Age type to int
        var person = { "FirstName": "Andrew", "LastName": "Lock", "Age": 31 };
        $.ajax({
            type: "POST",
            url: "/UpdatePostBody?handler=Abc",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify(person),
            headers: {
                RequestVerificationToken:
                    $('input:hidden[name="__RequestVerificationToken"]').val()
            },
        })
            .done(function (result) {
                console.log(result);
            });
    }

cshtml.cs:

public IActionResult OnPostAbc([FromBody]Person person)
        {
            return new JsonResult("my result");
        }

result:

answered Feb 23, 2021 at 1:43

Yiyi You

18.4k1 gold badge19 silver badges31 bronze badges

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

1 Comment

Igor Over a year ago

[FromBody] of course was used, the real problem was the "31" string used instead of an int value, just haven't observed the typo

Mike Brind · Accepted Answer · 2021-02-23 07:16:08Z

2

As you have identified, JSON is sent as part of the request body. You could (as you have done in your own answer) read the input stream and deserialize it manually, but there is a much simpler way using the [FromBody] attribute on the handler parameter:

public IActionResult OnPostAbc([FromBody] Person person)
{
    return new JsonResult($"my result: {person.FirstName} {person.LastName}");
}

However, this only works in 3.1 with the default serializer (System.Text.Json) if you remove the quotes from numbers in your person object:

var person = { "FirstName": "Andrew", "LastName": "Lock", "Age": 31 };

Or if you add your own type converter.

The previous serializer, JSON.Net, is happy with either version. And quoted numbers are supported in ASP.NET Core 5.

edited Feb 23, 2021 at 7:16

answered Feb 22, 2021 at 19:19

Mike Brind

30.3k6 gold badges65 silver badges95 bronze badges

2 Comments

Igor Over a year ago

Thanks but this method does not work :)(I have tried it), maybe because of Razor pages?

Mike Brind Over a year ago

I've updated my answer to include a note about quoted numbers

Igor · Accepted Answer · 2021-02-22 15:04:28Z

1

Solved by reading the data from POST body

public async Task<IActionResult> OnPostAbc()
{
    var buffer = new byte[1024];
    using (var ms = new MemoryStream())
    {
        var read = 0;
        while ((read = await Request.Body.ReadAsync(buffer, 0, buffer.Length)) != 0)
        {
            ms.Write(buffer, 0, read);
        }
        ms.Seek(0, SeekOrigin.Begin);
        var person = 
            JsonConvert.DeserializeObject<Person>(Encoding.UTF8.GetString(ms.GetBuffer()));
        return new JsonResult($"my result: {person.FirstName} {person.LastName}");
    }
}

answered Feb 22, 2021 at 15:04

Igor

3742 gold badges3 silver badges16 bronze badges

Collectives™ on Stack Overflow

ASP.NET Core Razor ajax POST request data object is empty

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related