Jquery Ajax post to MVC controller does not work (returns null)

Question

my ajax post to controller does not work. The code below is a basic example of what I am trying to do.

On debug mode, it returns null and the values returned to the ajax call is empty, even if I appened the attribute

public IActionResult Login([FromBody]Data data)

It still does not work

Here is my ajax all

$('#SignIn').click(function () {
    $('#SignIn').val('Please Wait');            
    Ajax_Login();
});

function Ajax_Login() {           
    var data = {
        username: $('#Email').val().trim(),
        password: $('#Password').val()
    };
    $.ajax({
        type: "POST",
        url: "/Upload/Login",
        data: data,
        contentType: "application/json",
        dataType: "json",
        success: function (message) {
            alert(message);             
        },
        error: function (message) {
            alert(message);  
        }

I have also tried using data: JSON.stringfy({ User: Username, Pass: Password })

Here is my controller

public class Data
{
    public string Username { get; set; }
    public string Password { get; set; }
}

Controller method

[HttpPost]
public IActionResult Login(Data data)
{
    var message = data.Username + " and " + data.Password;
    return Json(message);
}

Ok thanks it worked. When do you use contentType ? when its stringfy ? and how do I mark this as answer ? thank you — Ehi
– Ehi, Commented Mar 19, 2018 at 12:44
You should never need to use contentType: "application/json" in mvc if you have generated your view correctly. But if you did have that option, then you would also have needed data: JSON.stringify(data), — user3559349
– user3559349, Commented Mar 19, 2018 at 12:46
And if you have generated you view correctly then you would not even need your var data = { ... }; code - it would be just data = $('form').serialize(); — user3559349
– user3559349, Commented Mar 19, 2018 at 12:47
And I need some sleep, so feel free to add your own answer if you want. — user3559349
– user3559349, Commented Mar 19, 2018 at 12:49

user3559349 · Accepted Answer · 2018-03-20 00:52:07Z

1

Your sending an object in the request, so you need to remove the contentType: "application/json", option in in ajax function so that it uses the default 'application/x-www-form-urlencoded; charset=UTF-8'.

Alternatively (if you do use 'application/json'), you need to stringify your object using data: JSON.stringify(data),. However, in mvc you should rarely have to use those options if you have generated the view correctly by strongly binding to your model, for example using <input asp-for="Username" /> or @Html.TextBoxFor(m => m.Username). When the view is generated correctly, then you can simply use var data = $(yourForm).serialize(); to correctly serialize all the form controls.

Note that the reason that JSON.stringfy({User: Username, Pass: Password}) did not work is because your model does not contain properties named User and Pass.

answered Mar 20, 2018 at 0:52

user3559349

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

2 Comments

Ehi Over a year ago

Brilliant explanation. Thanks a lot buddy

Mily Over a year ago

Hi, Ehi. I red everything and tried everything but it doesn't work for me. What is your final solution for your controller method and ajax data?

Collectives™ on Stack Overflow

Jquery Ajax post to MVC controller does not work (returns null)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related