Ajax Post Request always passes null Object to MVC Controller

Question

I am trying to use JQuery ajax post to call an ASP.Net Core Controller. I have tried all different scenarios, but any of them is not working. Here is my Javascript Function:

   $("#verify-answer").click(function () {

        if ($("#question_answer").val() != "") {
            var request = JSON.stringify({
                'Answer': $('#question_answer').val(),
                'UserId': 1,
                'TenantId': 0
            });

            $.ajax({
                url: "/Account/PasswordRecoveryChallengResponseGetToken",
                type: "POST",             
                contentType: 'application/json',
                data: request,
                datatype: "json",
                success: function (result) {

                    console.log("answer token challenge: ");

                },
                error: function (result) {                      
                }
            });
        }

        return false;
    });

Partial View HTML:

 <div>
     <form>
         <p>Challenge-Response Option</p>
          <label for="username">Username</label>
          <input type="text" class="form-control" id="username_recovery">
          <button type="submit"  id="get-questions" onclick="return false;" >Retrieve Question</button>
      </form>
  </div>


 <div id="question">
    <div>                      
       <form>
            <div id="user_question"> </div>
            <label for="username">Answer</label>
            <input type="text" id="question_answer">
            <div  id="questions_answer_message"></div>
            <button type="submit"  id="verify-answer">Verify Answer</button>
        </form>
     /div>
  </div>

This is my controller:

[HttpPost]
public async Task<IActionResult> PasswordRecoveryChallengResponseGetToken(ResetPasswordQuesionChallengeRequest request)
{

}

Model passed:

public class ResetPasswordQuesionChallengeRequest : Core.TenantClientEntityBase
{

    [Required]
    public string Answer { get; set; }
}


 public abstract class TenantClientEntityBase
{
    [Required]
    public int TenantId { get; set; }

    [Required]
    public int UserId { get; set; }
}

This is Request Payload:

The request parameter has always the following values:

• Answer = null
• UserId = 0
• TenantId = 0

What am I doing wrong?

Answer 1

I find I have to put [FromBody] in all my POSTs or I encounter the same issue.

e.g.

public async Task<IActionResult> PasswordRecoveryChallengResponseGetToken([FromBody] ResetPasswordQuesionChallengeRequest request)