jquery - Why am I getting 415 trying to post a string?

Question

I want to send the email (string) from aspnet/identity to my dbcontext on registration. The console outputs

Failed to load resource. the server responded with a status of 415 () :5001/api/UserEntities/insertEmail:1

When I click on the part in italics I get:

{"type":"https://tools.ietf.org/html/rfc7231#section-6.5.13","title":"Unsupported Media Type","status":415,"traceId":"00-30216fe89ca6b54e8fa1121b1954ad81-0a607d94a5b71142-00"}

RegisterConfirmation.cshtml

    var data = {
            email: $('#email').val()
        };
    $(document).ready(function () {
        $.ajax({
            type: "POST",
            url: '../../api/UserEntities/insertEmail',
            data: data,
            success: function () {
                alert($('#email').val()); //this shows the email correctly in the popup
            }
        });
    });

UserEntitiesController.cs

    [Route("insertEmail")]
    public void Insert([FromBody] string email)
    {
        _uecontext.Users.Add(new DinderDL.Models.UserEntity
        {
            Email = email
        });
        _uecontext.SaveChanges();
    }

I have also tried this with the same result:

    $(document).ready(function () {
        $.post('../../api/UserEntities/insertEmail', {
            email: $('#email').val();
        }).then(alert('hello'));
    });

except I get:

POST https://localhost:5001/api/UserEntities/insertEmail 415
send @ jquery.min.js:2
ajax @ jquery.min.js:2
S.<computed> @ jquery.min.js:2
(anonymous) @ RegisterConfirmation?email=baba@gmail.com&returnUrl=%2F:71
e @ jquery.min.js:2
t @ jquery.min.js:2
setTimeout (async)
(anonymous) @ jquery.min.js:2
c @ jquery.min.js:2
fireWith @ jquery.min.js:2
fire @ jquery.min.js:2
c @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
B @ jquery.min.js:2

question from:https://stackoverflow.com/questions/65645837/why-am-i-getting-415-trying-to-post-a-string

Answer 1

Your api endpoint accepts a request with valid request body (determined by [FromBody] decorated on the input string email) but your request is posted with the default contentType of application/x-www-form-urlencoded (by $.ajax). That results in an empty request body sent.

So you have 2 options, either remove the [FromBody] or post the ajax request with a content type of application/json. With that content type, the whole string passed to data option will be sent via the request body. The server-side code will parse that request body using a json serializer formatter (input formatter) because the content-type header value is application/json.

Here is the how you follow the second option (posting json request):

$.ajax({
        type: "POST",
        url: '../../api/UserEntities/insertEmail',
        contentType: 'application/json',
        data: data.email,
        success: function () {
           //...
        }
    });

NOTE: the above code we don't use JSON.stringify because it's unnecessary. Your server-side model is just a string. In case of using JSON.stringify, you need to update your model to use a class like this:

//just an example to help you understand
public class DataModel {
    [JsonProperty("email")]
    public string Email {get;set;}
}
//update your Insert method to this
public void Insert([FromBody] DataModel data)
{
    //accessing data.Email
}
//then you can use JSON.stringify to post the json of your email object
$.ajax({
        type: "POST",
        url: '../../api/UserEntities/insertEmail',
        contentType: 'application/json',
        data: JSON.stringify(data),
        success: function () {
           //...
        }
    });

References:

FromBodyAttribute

Input formatters