How to send two integer parameters to an Asp.net MVC Controller using Ajax

Question

I have a composite key table (Personal and Professional). The Personal property is in a Hidden and Profioid is accumulated in a data-id. Stays two information must be passed to the controller so I can delete the record. Currently, I have this working, but passing only 1 parameter. How do I do this with two parameters?

Html - Razor:

<div class="form-group row align-items-center">
    <div class="col-md-4">
        @Html.HiddenFor(model => model.PessoasCargosViewModel[i].PessoaId, new { @class = "hid-pessoaId" })
        <label asp-for="PessoasCargosViewModel[i].ProfissaoId" class="control-label sel-profissao">Profissão</label>
        <select asp-for="PessoasCargosViewModel[i].ProfissaoId" asp-items="Model.Profissoes" data-plugin="selectpicker" title="Selecione uma opção" class="form-control show-tick show-menu-arrow sel-profissao"></select>
        <span asp-validation-for="PessoasCargosViewModel[i].ProfissaoId" class="text-danger sel-profissao"></span>
    </div>
    <div class="col-md-2">
        <div class="checkbox-custom checkbox-default">
            <input type="checkbox" asp-for="PessoasCargosViewModel[i].CargoPrincipal" class="ckb-cargoPrincipal" autocomplete="off" />
            <label asp-for="PessoasCargosViewModel[i].CargoPrincipal" class="ckb-cargoPrincipal">Cargo Principal</label>
        </div>
    </div>
    <div class="col-md-1">
        <button type="button" class="btn btn-icon btn-default btn-outline btn-remover-cargo" data-id="@Model.PessoasCargosViewModel[i].ProfissaoId" style="margin-top: 30px;"><i class="icon wb-trash" aria-hidden="true"></i></button>
    </div>
</div>

Javascript:

$("#div-cargos").on("click", ".btn-remover-cargo", function (e) {
    e.preventDefault();
    var id = $(this).attr("data-id");


    if (id)
        $.post("/pessoa-cargo/remover-pessoa-cargo/" + id);

    $(this).parent().parent().remove();
    qtdProfissoes--;

    $("#div-cargos .row").each(function (indice, elemento) {
        $(elemento).find(".sel-profissao").attr("name", "PessoasCargosViewModel["+ indice+"].ProfissaoId");
        $(elemento).find(".ckb-cargoPrincipal").attr("name", "PessoasCargosViewModel["+ indice +"].CargoPrincipal");
    });
});

Controller:

[HttpPost]
[Route("pessoa-cargo/remover-pessoa-cargo/{id:int}")]
public void DeletePessoaCargo(int id)
{
    _pessoaCargoAppService.Remove(id);
}

Answer 1

Basically just add one more parameter:

[HttpPost]
[Route("pessoa-cargo/remover-pessoa-cargo/{id:int}")]
public void DeletePessoaCargo(int id, int pessoaId)
{
    _pessoaCargoAppService.Remove(id, pessoaId);
}

And make the call this way:

let pessoaId = $(this).parent().parent().find('.hid-pessoaId').val();

$.post(`/pessoa-cargo/remover-pessoa-cargo/${id}?pessoaId=${pessoaId}`);

Or if you want to do a more correct route by REST Apis standards can be done like this:

[HttpDelete]
[Route("Pessoas/{pessoaId:int}/Cargos/{cargoId:int}")]
public void DeletePessoaCargo([FromUri]int pessoaId, [FromUri]int cargoId)
{
    _pessoaCargoAppService.Remove(pessoaId, cargoId);
}

And call:

$.ajax({
    url: `/Pessoas/${pessoaId}/Cargos/${id}`,
    type: 'DELETE',
    //success: function se quiser tratar apos o sucesso
    //error: function se quiser tratar apos algum erro
})