Como passar um Id para Action usando JavaScript - Asp.net core

Question

Pessoal, estou aprendendo javascript e estou com uma dúvida... Preciso consultar em uma tabela de histórico, mas preciso passar um Id para minha action usando o java script. Pelo exemplo que vi na net, a url ("http://localhost:52346/customer-management/customer-history/" + customerId)está sendo passada usando um caminho fixo e isso não seria uma boa prática. Como que eu faço para passar o Id de uma forma correta sem usar essa url abaixo?

@section scripts
    {
<script type="text/javascript">
        $(".viewbutton").on("click", function() {
            var customerId = $(this).data('id');
            $.ajax({
                url: "http://localhost:52346/customer-management/customer-history/" + customerId,                
                cache: false
            }).done(function(data) {
                var formatHtml = "<table class='table table-striped'>";
                formatHtml += "<thead><th>Action</th><th>When</th><th>Id</th><th>Name</th><th>E-mail</th><th>Birth Date</th><th>By User</th></thead>";

                for (var i = 0; i < data.length; i++) {
                    var change = data[i];
                    formatHtml += "<tr>";
                    formatHtml += "<td>" + change.action + "</td>";
                    formatHtml += "<td>" + change.when + "</td>";
                    formatHtml += "<td>" + change.id + "</td>";
                    formatHtml += "<td>" + change.name + "</td>";
                    formatHtml += "<td>" + change.email + "</td>";
                    formatHtml += "<td>" + change.birthDate + "</td>";
                    formatHtml += "<td>" + change.who + "</td>";
                    formatHtml += "</tr>";
                }
                formatHtml += "</table>";
                $("#customerHistoryData").html(formatHtml);
            });
        });
</script>
}

[AllowAnonymous]
        [Route("customer-management/customer-history/{id:int}")]
        public JsonResult History(int id)
        {
            var customerHistoryData = _customerAppService.GetAllHistory(id);
            return Json(customerHistoryData);
        }

Answer 1

Bom dia Jalber,

Tudo bem ? Eu não entendi bem o que você disse sobre:  "Como que eu faço para passar o Id de uma forma correta sem usar essa url abaixo?". Pois normalmente eu faço com esse tipo de configuração na rota:

[Route("api/controller/index/{id}")]
[HttpGet]

E quanto ao Javascript eu faço desta mesma forma que você fez, passando o ID na frente da URL. 

Você pode fazer diretamente no seu arquivo NomeArquivo.cshtml

 @using (Html.BeginForm("Index", "SeuController", FormMethod.Post, new { enctype = "multipart/form-data" }))
  {

}

Neste exemplo acima usando o @using ... você envia as informações de um form como POST, e seu controller receberá em seu método as informações enviadas:

public ActionResult Index(HttpPostedFileBase file, FormCollection colecao)
{

}

Nisso, você não precisaria usar javascript para fazer essa requisição.

Obrigado ! Espero ter ajudado.  : )

Marque como útil, caso tenha te ajudado em algo.

Answer 2

O meu problema é que não está conseguindo passar o Id pela rota... o evento click funciona, mas ele não consegue dar post no Id... Não sei se tem algo a ver com o LocalHost.... Por isso gostaria de passar esse Id tipo var url = @Html.Action("History", "Customer")... Sei lá.. já tentei de tudo, mas não consigo.

Answer 3

Neste código:
var customerId = $(this).data('id');
De onde vem esse valor 'id' ? Você está pegando do "viewButton" ? Ele é um formulário ?

Answer 4

 <button type="button" class="btn btn-sm btn-icon btn-pure btn-default on-default remove-row" title="Histórico" data-id="@item.Id" data-toggle="modal" data-target="#customerHistory" data-original-title="Histórico">
     <span class="icon-2x wb-time"></span>
 </button>

Answer 5

Acho que o seu código $(this).data('id') está como undefined.

Aqui nesse post do Stack, a segunda resposta está mostrando como obter o valor dinamicamente lendo sua div primeiro, e logo depois o seu atributo data-id.

As vezes o seu código não está obtendo informação do 'id' que você precisa. Essa versão do Jquery que obtém os dados de um data-id é a partir da versão 1.6.

https://stackoverflow.com/questions/15822820/reading-data-id-attribute-with-jquery?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa

Answer 6

Valeu Mateus!!!

Answer 7

Por nada amigo ! Fico feliz em ter te ajudado. Abraços