Net Core 2.1 Ajax Post to Controller

Question

I have been pulling my hair over this one for some time now and just don't see what I'm doing wrong.

I have a series of fields in a SWAL dialog I want to post to my controller but for the life of me it just won't, doesn't even call the Post method. Error received is just the 400 error code.

var issue = JSON.stringify(this.swalForm);
        $.ajax({
            type: "POST",
            url: "../api/Issues",
            contentType: "application/json; charset=utf-8",
            beforeSend: function (xhr) {
                xhr.setRequestHeader("RequestVerificationToken",
                    $('input:hidden[name="__RequestVerificationToken"]').val());
            },
            dataType: "json",
            data: issue,
            error: function (xhr) {
                alert('Error: ' + xhr.statusText);
            },
            success: function (msg) {
                console.log(msg.result);
            }
        });

That's my AJAX call

[HttpPost]
    public async Task<IActionResult> PostIssue([FromBody] Issue issue)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }

        _context.Issue.Add(issue);
        await _context.SaveChangesAsync();

        return CreatedAtAction("GetIssue", new { id = issue.Id }, issue);
    }

This is the Post Method in my controller

public partial class Issue
{
    public Issue()
    {
        Document = new HashSet<Document>();
        IssueMember = new HashSet<IssueMember>();
    }

    public int Id { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }
    public DateTime? DueDate { get; set; }
    public int CategoryId { get; set; }
    public int StatusId { get; set; }
    public int? PriorityId { get; set; }
    public int ProjectId { get; set; }
    public string Location { get; set; }
    public int TeamId { get; set; }
    public DateTime CreatedDate { get; set; }
    public int CreatedById { get; set; }
    public DateTime? ModifiedDate { get; set; }
    public int? ModifiedById { get; set; }
    public bool Active { get; set; }

    public Category Category { get; set; }
    public User CreatedBy { get; set; }
    public User ModifiedBy { get; set; }
    public Priority Priority { get; set; }
    public Project Project { get; set; }
    public Status Status { get; set; }
    public Team Team { get; set; }
    public ICollection<Document> Document { get; set; }
    public ICollection<IssueMember> IssueMember { get; set; }
}

What the Model looks like

{"Title":"Ajax Issue","Description":"Made with ajax","DueDate":"2018-08-21","CategoryId":"3","StatusId":"2","PriorityId":"3","ProjectId":"1","Location":"Home","TeamId":"1","CreatedDate":"2018-08-21","CreatedById":"1","ModifiedDate":"2018-08-21","ModifiedById":"1","Active":"Active"}

And finally what the payload looks like on Post

Answer 1

Figured it out!! SMH...

Active is a bool variable in my controller but when checked it's passing a string "Active" to it. JSON doesn't match the model and therefore no call to the api method.

Check your payload and make sure it matches your models people!

Answer 2

Javascript code seems ok. 1st try to debug web api using fiddler or postman then you will get exactly error message from PostIssue() method instead of 500.