Javascript, Ajax : Bad Request 400

Question

I'm working on ASP Net Core Project and I'm trying to send to my controller with JQuery Ajax function from a partial view modal, parameters.

The recovered URL is correct for example: http://localhost:44321/Validations/ValidationRefuse?ficheId=24&commentaire=Commentaire%20de%20test

But it's always: Failed to load resource: the server responded with a status of 400 (Bad Request)

My Javascript:

    $("#buttonRefusFiche").click(function (e) {
        ficheId = $("#ficheId").val();
        commentaire = $("#inputCommentaire").val();
        $.ajax({
            url: "/Validations/ValidationRefuse?ficheId=" + ficheId + "&commentaire" + commentaire,
            type: 'POST',
            contentType: 'application/html',
            cache: true,
            success: function () {
                alert("Validation refusée.");
            },
            error: function () {
            }
        })
    });

My C# method:

        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> ValidationRefuse(int ficheId, string commentaire)
        { ... }

My Partial View:

<div class="modal-header">
    <h5 class="modal-title" id="exampleModalLongTitle">Validez-vous cette fiche ?</h5>
    <button type="button" class="btn btn-outline-dark btn-circle" data-dismiss="modal" aria-label="Close">
        <i class="fa fa-close"></i>
    </button>
</div>
<form asp-controller="Validations" asp-action="ValidationParResponsable" asp-route-id="@Model.FicheId" asp-route-eId="@Model.EnseignantId">
    <div class="modal-body">
        <div class="form-group">
            <input type="hidden" id="ficheId" asp-for="FicheId" />
            <input type="hidden" asp-for="EnseignantId" />
            <input type="hidden" asp-for="EtatId" />
            <label class="control-label font-weight-bold">Commentaire :</label>
            <textarea class="form-control" id="inputCommentaire" asp-for="Commentaire" placeholder="Votre commentaire"></textarea>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-danger" id="buttonRefusFiche">Refuser</button>
        <button type="submit" class="btn btn-success">Valider</button>
    </div>
</form>

I hope it's understandable, thanks for your responses. :)

Answer 1

When you use a POST request you have to send the parameters in the body of the request, not in the URL like that:

  $("#buttonRefusFiche").click(function (e) {
            ficheId = $("#ficheId").val();
            commentaire = $("#inputCommentaire").val();
            $.ajax({
                url: "/Validations/ValidationRefuse",
                type: 'POST',
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                dataType : "html",
                data : {
                    ficheId : ficheId,
                    commentaire : commentaire
                },
                cache: true,
                success: function () {
                    alert("Validation refusée.");
                },
                error: function () {
                }
            })
        });

I also changed the contentType and added dataType.

For more information about ajax Post see documentation

Answer 2

I resolved this problem, I just needed remove [ValidateAntiForgeryToken] from my controller and to pass data directly in the body of the Ajax instead the url.