How to give the post via ajax

Question

I’m having trouble sending an email through a website. The structure that is is as follows:

User fills the information in the form and I have a javascript that will give a post via ajax this ajax will call a method c# called Faleconoscocontroller.

HTML code:

 <form method="post" id="contact-form" action="#" role="form">
                                <div class="form-group">
                                    <label class="sr-only" for="contact-name">Nome</label>
                                    <input type="text" class="form-control" id="Nome" name="Nome" placeholder="Nome">
                                    <small id="contact-name-help" class="form-text text-muted"></small>
                                </div>

                                <div class="form-group">
                                    <label class="sr-only" for="contact-email">Email</label>
                                    <input type="email" class="form-control" id="Email" name="Email" placeholder="E-mail">
                                    <small id="contact-email-help" class="form-text text-muted"></small>
                                </div>

                                <div class="form-group">
                                    <label class="sr-only" for="contact-email">Celular</label>
                                    <input type="text" name="Celular" id="Celular" placeholder="Celular ou Telefone" required="required" class="form-control celular" celular="true">
                                    <small id="contact-email-help" class="form-text text-muted"></small>
                                </div>

                                <div class="form-group">
                                    <label class="sr-only" for="contact-message">Mensagem</label>
                                    <textarea rows="10" class="form-control" id="Mensagem" name="Mensagem" placeholder="Mensagem"></textarea>
                                    <small id="contact-message-help" class="form-text text-muted"></small>
                                </div>

                                <button id="btnEnviarContato" type="button" class="btn btn-green-bright pull-right" >Enviar</button>


                                <div id="MensagemSucesso" class="success alert-success alert-dismissible alert" hidden role="alert">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Fechar"> <span aria-hidden="true">×</span> </button>
                                    Sua mensagem foi recebida com sucesso! Em breve entraremos em contato.
                                </div>
                                <div class="error alert-error alert" style="display:none">Ocorreu um erro.</div>
                                <div class="clearfix">
                                </div>
   </form>

Javascript code:

  $('#btnEnviarContato').click(function () {

        enviarContato();
    });

function enviarContato() {

var nome = $('#Nome').val();
var email = $('#Email').val();
var celular = $('#Celular').val();
var mensagem = $('#Mensagem').val();

if (nome === '') {
    $('#Nome').focus();
    return;
}
if (email === '') {
    $('#Email').focus();
    return;
}
if (celular === '') {
    $('#Celular').focus();
    return;
}

if (mensagem === '') {
    $('#Mensagem').focus();
    return;
}

$.ajax({
    type: "post",
    url: "/FaleConosco/EnviarContato",
    data: {
        nome: nome, email: email, celular: celular, mensagem: mensagem
    },
    success: function (data) {
        $('#MensagemSucesso').removeAttr('hidden');

        $('#Nome').val('');
        $('#Email').val('');
        $('#Celular').val('');
        $('#Mensagem').val('');


    },
    error: function () {


    },
    complete: function () {

    }
});


};

If the post is ok then it enters my method that will make the backend

Controller:

 public class FaleConoscoController : Controller
{
    private readonly IRepositorio _repositorio;
    private IHostingEnvironment _env;

    public FaleConoscoController(IRepositorio repositorio, IHostingEnvironment env)
    {
        this._repositorio = repositorio;
        this._env = env;
    }

    [HttpPost]
    public async Task<IActionResult> EnviarContato(string nome, string email, string celular, string mensagem, string webRoot)
    {




        Email enviarEmail = new Email();
        await enviarEmail.Contato(nome, email, celular, mensagem, _env.WebRootPath);

        return Json(true);


    }

    public IActionResult Error() => View();
}

PROBLEM: I’m not able to give the post via ajax for him to make the call to my method.

Answer 1

It may be that your method is not receiving its parameters correctly, try adding the "[Frombody]" in your Send contact method, being as follows:

 [HttpPost]
public async Task<IActionResult> EnviarContato([FromBody]string nome, string email, string  celular, string mensagem, string webRoot)
{

    Email enviarEmail = new Email();
    await enviarEmail.Contato(nome, email, celular, mensagem, _env.WebRootPath);

    return Json(true);


}

So you kind of force the body reading of the request.

Take a look at: https://docs.microsoft.com/pt-br/aspnet/web-api/overview/formats-and-model-binding/parameter-binding-in-aspnet-web-api