1

Estou criando um submit form através do meu javascript e enviando um objeto para ser consumido pela minha Action na Controller. Já tentei de varias formas e mesmo assim não acontece da forma como esperado. nesse código abaixo esta retornando erro 400.

JS

var valor = {"IdContato":0,"IdUsuario":0,"Nome":descricao,"Telefone":"","Email":"","Status":"","Corretor":"","Captador":"","Pessoa":"","IdPessoa":"","TipoContato":"","IdTipoContato":"","Genero":"","IdGenero":""};
var url = "/Contato/Inicio/";

post(url, valor);

function post(path, params, method = "POST") {      
      const form = document.createElement('form');
      form.method = method;      
      form.action = path;
      form.style = "style: none";
      for (const key in params) {
         if (params.hasOwnProperty(key)) {
            const hiddenField = document.createElement('input');
            hiddenField.type = 'hidden';
            hiddenField.name = key;
            hiddenField.value = params[key];

            form.appendChild(hiddenField);
         }
      }
      document.body.appendChild(form);
      form.submit();
   }

Minha Controller

[HttpPost("Contato/Inicio")]
      public async Task<IActionResult> Index(ContatoFilterDto filter)
      {
         await carregaDropDowns();
         var usuarioLogado = GetUsuarioLogado();
         filter.IdUsuario = usuarioLogado.Id;
         var result = await _contatoApplication.GetByFilter(filter);
         ViewBag.Contatos = result;
         return View();
      }

A intenção deses código é após a execução da controller, chamar a view de contatos com os dados filtrados. Mas como mencionei, ao chamar o código acima, o browser indica erro 400, como se a pagina não existe.

Esse aqui é meu html. se trata de um navBar com um Select onde de acordo com a chave ele envia para uma pagina de pesquisa. O que eu fiz no javascript, foi transformar o valor do input do select em um form e enviar via post pelo submit.

HMTL

@using Newtonsoft.Json;

@{

    var title = ViewData["Title"];
    UsuarioViewModel user = JsonConvert.DeserializeObject<UsuarioViewModel>(User.Claims.FirstOrDefault(c => c.Type == "Usuario").Value);
    var userId = user != null ? user.Id : 0;
    var webAppUrl = ViewBag.WebAppUrl;
    string imagemPerfil = user != null && user?.PossuiImagemPerfil == true ? $"{webAppUrl}/{user.CaminhoImagemPerfil}" : $"{webAppUrl}/images/profile-picture.jpg";
}

<style>
    .nav-link-icon {
        font-size: 35px;
        padding-top: 0;
        padding-bottom: 0;
        line-height: 38px;
    }
    .dropdown-optgroup {
        padding: 0 8px;
        font-size: .9em;
    }
</style>

<nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" data-widget="pushmenu" href="#" role="button" style="padding-right: 15px;"><i class="fas fa-bars"></i></a>
        </li>
        <li class="nav-item">
            <div class="input-group">
                @*<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Ref. Imóvel</button>
                <ul class="dropdown-menu">
                   <li><span class="dropdown-optgroup">Contatos</span></li>
                   <li><a class="dropdown-item" href="#">Nome</a></li>
                   <li><a class="dropdown-item" href="#">E-mail</a></li>
                   <li><a class="dropdown-item" href="#">Telefone</a></li>
                   <li><a class="dropdown-item" href="#">CPF/CNPJ</a></li>
                   <div class="dropdown-divider"></div>
                   <li><span class="dropdown-optgroup">Imóvel</span></li>
                   <li><a class="dropdown-item" href="#">Titulo do Imóvel</a></li>
                   <li><a class="dropdown-item" href="#">Código do Imóvel</a></li>
                   <li><a class="dropdown-item" href="#">Proprietário</a></li>
                   <div class="dropdown-divider"></div>
                   <li><span class="dropdown-optgroup">Leads</span></li>
                   <li><a class="dropdown-item" href="#">Nome</a></li>
                   <li><a class="dropdown-item" href="#">E-mail</a></li>
                   <li><a class="dropdown-item" href="#">Telefone</a></li>
                   <li><a class="dropdown-item" href="#">Código do Imóvel</a></li>
                </ul>*@
               <select class="form-select btn btn-outline-secondary dropdown-toggle" id="slctBuscar" style="text-align:left"  aria-label="Default select example">
                  <optgroup label="Contatos">
                     <option value="1">Nome</option>
                     <option value="2">E-mail</option>
                     <option value="3">Telefone</option>
                     <option value="4">CPF/CNP</option>
                  </optgroup>
                  <optgroup label="Imóvel">
                     <option value="5">Titulo do Imóvel</option>
                     <option value="6">Código do Imóvel</option>
                     <option value="7">Proprietário</option>
                  </optgroup>
                  <optgroup label="Leads">
                     <option value="8">Nome</option>
                     <option value="9">E-mail</option>
                     <option value="10">Telefone</option>
                     <option value="11">Código do Imóvel</option>
                  </optgroup>                   
               </select>
                <input type="text" class="form-control" id="inputBuscar" aria-label="Pesquisa Ref. Imóvel">
                <button class="btn btn-outline-primary" type="button" id="btnBuscar">Pesquisar</button>
            </div>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link" data-toggle="dropdown" href="#" role="button" style="padding-left: 15px;"><i class="fas fa-plus"></i></a>

            <div class="dropdown-menu dropdown-menu-lg dropdown-menu-left">
               <a asp-controller="Contato" asp-action="Registro" class="dropdown-item">
                  Cliente
               </a>
               <a asp-controller="Imovel" asp-action="Registro" class="dropdown-item">
                  Imóvel
               </a>
               <a asp-controller="Agendamento" asp-action="Registro" class="dropdown-item">
                  Agenda
               </a>
               <a asp-controller="Atendimento" asp-action="Registro" class="dropdown-item">
                  Atendimento
               </a>
            </div>
        </li>
    </ul>

    <ul class="navbar-nav ml-auto" style="gap: 5px;">

        <li class="nav-item">
           <button type="button" id="btnContract" onclick="location.href='@Url.Action("Edit", "Usuario", new { id = @userId })'+'#assinaturas'" class="btn btn-success">             
                 <i class="fa fa-credit-card"></i>
                 Contratar
           </button>
        </li>

        <li class="nav-item">
            <button type="button" class="btn btn-outline-primary">
                <i class="fas fa-external-link-alt"></i>
                Ver Site
            </button>
        </li>

        @*<li class="nav-item dropdown">
            <a class="nav-link" data-toggle="dropdown" href="#">
                <i class="far fa-bell"></i>
                <span class="badge badge-warning navbar-badge">15</span>
            </a>
            <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                <span class="dropdown-header">15 Notifications</span>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">
                    <i class="fas fa-envelope mr-2"></i> 4 new messages
                    <span class="float-right text-muted text-sm">3 mins</span>
                </a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">
                    <i class="fas fa-users mr-2"></i> 8 friend requests
                    <span class="float-right text-muted text-sm">12 hours</span>
                </a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">
                    <i class="fas fa-file mr-2"></i> 3 new reports
                    <span class="float-right text-muted text-sm">2 days</span>
                </a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
            </div>
        </li>*@

        <li class="nav-item dropdown">
            <a class="nav-link" data-toggle="dropdown" href="#" style="padding: 3px 10px;">
                <div class="image">
                    <img src="@imagemPerfil" class="img-circle elevation-2 img-profile" alt="User Image">
                </div>
            </a>

            <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                <a asp-controller="Usuario" asp-action="Edit" asp-route-id="@userId" class="dropdown-item">
                    Configurações
                </a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" asp-controller="Conta" asp-action="LogOut">
                    Sair
                </a>
            </div>

        </li>

    </ul>
</nav>

<script>
   var ObjetoConsulta = new Object();
   function pegarUrl(value) {
      switch (value) {
         case '1':
         case '2':
         case '3':
         case '4':
            return "/api/PesquisarContato";
            break;
         case '5':
         case '6':
         case '7':
            return "/api/PesquisarImovel";
            break;
         case '8':
         case '9':
         case '10':
         case '11':
            return "/api/PesquisarLeads";
            break;
         default:            
      }
   }
   ObjetoConsulta.Buscar = function (url, value, descricao) {                  
      console.log(url);
      $.ajax({
         type: 'GET',
         url: url,
         dataType: "JSON",
         cache: false,
         async: true,
         data: { value: value, descricao: descricao },
         success: function (data) {
            window.location.href = "/Contato/Inicio/";
            var hiddenField = document.getElementsByName('input');
            hiddenField.setAttribute('value', descricao);
            console.log(descricao);
         }
      });
   }
   $(function () {
      $("#btnBuscar").click(
         function () {
            var value = $("#slctBuscar").val();
            var descricao = $("#inputBuscar").val();
            var url = pegarUrl(value);
            ObjetoConsulta.Buscar(url, value, descricao);            
                    
         });
   });
</script>

Classe ContatoFilterDto

using ProCorretor.Domain.Enumerators;
using System.Collections.Generic;

namespace ProCorretor.Domain.DTOs.Filters
{
    public class ContatoFilterDto
    {
        public int? IdContato { get; set; }
        public int? IdUsuario { get; set; }
        public string Nome { get; set; }
        public string Telefone { get; set; }
        public string Email { get; set; }
        public int Status { get; set; }
        public string Corretor { get; set; }
        public string Captador { get; set; }
        public int Pessoa { get; set; }
        public Pessoa IdPessoa { get; set; }
        public int TipoContato { get; set; }
        public TipoContato IdTipoContato { get; set; }
        public int Genero { get; set; }
        public Genero IdGenero { get; set; }

    }
}
3
  • 400 é bad request o que é direrente de um 404, "como se a pagina não exitisse" como você mencionou. O 400 pode acontecer por a requisição foi mal feita e não pode ser recebida nesse caso na action. Possíveis razões: - verbot errado (espera POST recebeu um GET), o objeto não é o esperado (esperar um Date e veio um int, etc), header inválido, etc. Isso era pra contextualizar, agora pra saber melhor falta ai no seu código o html por exemplo (está fazendo posto via form, falta a tag form), falta a definição da classe ContatoFilterDto, pra ver se faz match com o json Commented 24/11/2021 às 12:01
  • Pra um melhor debug sugiro ir na ferramente de debug do brower (F12) e ver lá na aba de rede (network) o que foi enviado e qual o erro, lá deve mostrar o problema, que pode ser a url, o tipo de chamada e também o objeto que foi enviado. Adicione esses dados na pergunta para te ajudarmos melhor :) Commented 24/11/2021 às 12:02
  • Efetuei a edição com o HMTL e a Classe. Commented 24/11/2021 às 19:59

2 Respostas 2

3

Aparentemente o que está acontecendo é que no teu endpoint, você espera receber um objeto com as propriedades IdContato, IdUsuario, Nome, etc...

Mas o que você está enviando do front são somente essas propriedades "soltas".

Você teria a principio, duas soluções:

  1. Mandar um objeto para o endpoint, por exemplo:
valor = { 
    "objeto":{
        "IdContato":0,
        "IdUsuario":0,
        "Nome":"descricao",
        "Telefone":"",
        "Email":"",
        "Status":"",
        "Corretor":"",
        "Captador":"",
        "Pessoa":"",
        "IdPessoa":"",
        "TipoContato":"",
        "IdTipoContato":"",
        "Genero":"",
        "IdGenero":""
    }
};
  1. Poderia também, adaptar teu endpoint, para receber esses dados separados:
[HttpPost("Contato/Inicio")]
public async Task<IActionResult> Index(int idContato, int idUsuario, string nome, etc....)
{
    var filter  = new ContatoFilterDto()
    {
        IdUsuario = idUsuario,
        Nome = nome
        ....
    };

    await carregaDropDowns();
    var usuarioLogado = GetUsuarioLogado();
    filter.IdContato = usuarioLogado.Id;
    var result = await _contatoApplication.GetByFilter(filter);
    ViewBag.Contatos = result;
    return View();
}

Essa segunda solução ficaria melhor usando AutoMapper por exemplo, eu particularmente acho mais correto a primeira abordagem.

0

Consegui resolver o problema mencionado. O que acontece é que mesmo enviando do Metodo "POST", ele enviava para o GET. Alterei o endpoint para GET e a rotina executou corretamente, o próprio framework se encarrega de transformar o objeto Json em uma classe, basta enviar a propriedades iguais.

Encontrei em uma documentação que a chamada que eu estava executando, não aceita POST, por isso do problema.

1
  • Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 26/11/2021 às 10:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .