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

  • Pergunta

  • 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);
            }



    • Editado JR-Master domingo, 25 de março de 2018 20:52
    domingo, 25 de março de 2018 17:19

Respostas

  • 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
    • Editado Matheus S. Campos terça-feira, 27 de março de 2018 11:51 Estava sem URL do post
    • Marcado como Resposta JR-Master terça-feira, 27 de março de 2018 11:54
    terça-feira, 27 de março de 2018 11:50

Todas as Respostas

  • 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.

    segunda-feira, 26 de março de 2018 14:54
  • 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.
    segunda-feira, 26 de março de 2018 16:34
  • Neste código:
    var customerId = $(this).data('id');

    De onde vem esse valor 'id' ? Você está pegando do "viewButton" ? Ele é um formulário ?

    segunda-feira, 26 de março de 2018 17:01
  •  <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>

    segunda-feira, 26 de março de 2018 21:52
  • 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
    • Editado Matheus S. Campos terça-feira, 27 de março de 2018 11:51 Estava sem URL do post
    • Marcado como Resposta JR-Master terça-feira, 27 de março de 2018 11:54
    terça-feira, 27 de março de 2018 11:50
  • Valeu Mateus!!!
    terça-feira, 27 de março de 2018 11:54
  • Por nada amigo ! Fico feliz em ter te ajudado. Abraços
    terça-feira, 27 de março de 2018 12:45