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

Question

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

Navigation

#1 by (1 votes)

0

I have a composite key table (PersonId and ProfissaoId). The PersonId property is in a hidden and ProfissaoId gets accumulated in a data-id. Stays two information must be passed to the controler so I can delete the record. Currently, I have this working, but only passing 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);
}

javascript asp.net ajax asp.net-mvc

asked by anonymous 21.09.2018 / 23:28

1 answer

Form group does not update angular template Function authorizing or not submitting form

score 1 · Accepted Answer

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 make a more correct route according to REST APIs, you can do 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
})