Search code examples
javascriptajaxasp.net-coreasp.net-ajaxajaxform

Jquery Ajax Posting with ASP Core JsonResult


I would like to post a form of data with Jquery Ajax in Asp Core.

AJAX CODE

    if (contactForm.valid() == true) {
    var formData = new FormData();
    formData.append("Name", contactForm.find("input[name='Name']").val());
    formData.append("Email", contactForm.find("input[name='Email']").val());
    formData.append("Subject", contactForm.find("input[name='Subject']").val());
    formData.append("Message", contactForm.find("textarea[name='Message']").val());
    $.ajax({
        url: "/home/contact",
        method: 'POST',
        data: formData,
        processData: false,
    }).done(function (data) {
        if (data == "success") {
            setTimeout(function () { $("#footer_contact__form .alert-success").removeClass("d-none") }, 500);
        }
        else {
            setTimeout(function () { $("#footer_contact__form .alert-danger").removeClass("d-none") }, 500);
        }
    }).fail(function () {

    });
}

CONTROLLER

 [HttpPost]
    public JsonResult Contact(Contact entity)
    {
        if (ModelState.IsValid)
        {
            entity.Date = DateTime.Now;
            _uow.Contact.Add(entity);
            return Json("ok");
        }
        else
        {
            return Json("failed");
        }
    }

I get an error when I do this. How do I post smoothly a model with Asp Core and Ajax? Thank you.


Solution

  • You should set the contentType option to false.

    $.ajax({
        url: "/home/contact",
        method: 'POST',
        data: formData,
        processData: false,
        contentType:false,
    })
    

    For more details, refer to this thread.