Problemas POSTing a ViewModel utilizando Ajax en un componente jquery datatable

Después de serializar el contenido de un formulario, necesito hacer un POST y enviar el Viewmodel usando Ajax. Al realizar POST, el visor llega con campos vacíos. He intentado usar "JSON.stringfy" y convertir la clase, pero tampoco funcionó. ¿Alguien sabe cómo ayudarme?

Nota: El script Ajax está usando comillas porque estoy llevando un jquery datatable.

Gracias :)

image

Controlador:

[HttpPost]
[AllowAnonymous]
[Route("financeiro-gerenciar/getFinanceiro")]
public JsonResult GetFinanceiro (FinanceiroPesquisaAvancadaViewModel financeiroPesquisaAvancadaViewModel)
{

}

Ajax:

"ajax": {
    "url": '/financeiro-gerenciar/getFinanceiro',
    "data": function (d) {

        var frmFinanceiroPesquisaAvancada = $("#frm-pesquisa-avancada").serialize();
        
        d.financeiroPesquisaAvancadaViewModel = frmFinanceiroPesquisaAvancada;
    },
    "type": "POST",
    "datatype": "json"
}

ViewModel:

public class FinanceiroPesquisaAvancadaViewModel
{
    [Key]
    public int Id { get; set; }

    public int PessoaEmpresaId { get; set; }

    public FinanceiroTipo FinanceiroTipo { get; set; }

    public string NumeroDocumento { get; set; }

    public decimal ValorDocumento { get; set; }

    public FinanceiroSituacao FinanceiroSituacao { get; set; }

    public int PessoaClienteId { get; set; }

    public int PessoaFornecedorId { get; set; }
   
    public DateTime? DataInicial { get; set; }
   
    public DateTime? DataFinal { get; set; }
    
    public DateTime? DataHoraCadastro { get; set; }
   
    public DateTime? DataHoraInclusao { get; set; }

    public bool PadraoSistema { get; set; }
}

Pregunta hecha hace 3 años, 5 meses, 0 días - Por daniel1

3 Respuestas:

  • Aquí hay una demostración: View(use serializeArray and foreach to change form data to an object);

    
        Id
    
        PessoaEmpresaId
    
        NumeroDocumento

    
    


    
    
        
    
            a
            b
            c
            d
        
    
        

    

@section scripts{
    

    
    
}

    Controlador:

    [HttpPost]
        [AllowAnonymous]
        [Route("financeiro-gerenciar/getFinanceiro")]
        public IActionResult GetFinanceiro(FinanceiroPesquisaAvancadaViewModel financeiroPesquisaAvancadaViewModel) {
            List l = new List {
            new DataTableModel{  a="a1",b="b1",c="c1",d="d1"},
            new DataTableModel{  a="a2",b="b2",c="c2",d="d2"},
            new DataTableModel{  a="a3",b="b3",c="c3",d="d3"},
            new DataTableModel{  a="a4",b="b4",c="c4",d="d4"},

            };
            return Json(new {data=l });
        }

    Modelos:

        public class DataTableModel
        {
            public string a { get; set; }
            public string b { get; set; }
    
            public string c { get; set; }
    
            public string d { get; set; }
    
        }
public class FinanceiroPesquisaAvancadaViewModel
    {
        [Key]
        public int Id { get; set; }

        public int PessoaEmpresaId { get; set; }

        //public FinanceiroTipo FinanceiroTipo { get; set; }

        public string NumeroDocumento { get; set; }

        public decimal ValorDocumento { get; set; }

        //public FinanceiroSituacao FinanceiroSituacao { get; set; }

        public int PessoaClienteId { get; set; }

        public int PessoaFornecedorId { get; set; }

        public DateTime? DataInicial { get; set; }

        public DateTime? DataFinal { get; set; }

        public DateTime? DataHoraCadastro { get; set; }

        public DateTime? DataHoraInclusao { get; set; }

        public bool PadraoSistema { get; set; }
    }

    resultado: enter image description here

    Respondida el Dec 17, 2020 a las 00:28 - por codealchemyf00f

    Votos positivos: 0 | Votos negativos: 0

  • El problema que estás experimentando tiene que ver con cómo estás serializando y enviando los datos del formulario al controlador a través de Ajax. En lugar de enviar el frmFinanceiroPesquisaAvancada directamente, necesitas convertirlo en un objeto Javascript y enviarlo en el formato correcto. Aquí tienes una posible solución:

    En la función data de tu Ajax, necesitas convertir los datos del formulario a un objeto JSON. Esto se puede lograr creando un objeto Javascript y asignando los valores del formulario a las propiedades correspondientes:

    javascript
"ajax": {
    "url": '/financeiro-gerenciar/getFinanceiro',
    "data": function (d) {
        var frmFinanceiroPesquisaAvancada = $("frm-pesquisa-avancada").serializeArray();        var financeiroData = {};

        $.each(frmFinanceiroPesquisaAvancada, function(i, field){
            financeiroData[field.name] = field.value;
        });

        d.financeiroPesquisaAvancadaViewModel = financeiroData;
    },
    "type": "POST",
    "datatype": "json"
}

    De esta forma, estás convirtiendo correctamente los datos del formulario en un objeto JSON que coincide con la estructura de tu FinanceiroPesquisaAvancadaViewModel, lo que permitirá al controlador recibir los datos correctamente.

    Además, asegúrate de que el nombre de los campos en tu formulario coincide con las propiedades de tu ViewModel para que puedan ser mapeados correctamente al enviar la solicitud POST.

    Respondida el Dec 18, 2020 a las 00:24 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • El problema:

    Cuando envías datos a un controlador de ASP.NET Core mediante una solicitud AJAX, el enlace del modelo no funciona correctamente y los campos del modelo llegan vacíos.

    Solución:

    Para resolver este problema, debes utilizar la serialización JSON en el lado del cliente antes de enviar los datos mediante AJAX.

    Código actualizado:

    JavaScript (AJAX):

    javascript
"ajax": {
    "url": '/financeiro-gerenciar/getFinanceiro',
    "data": function (d) {
        var frmFinanceiroPesquisaAvancada = $("frm-pesquisa-avancada").serialize();        
        // Convertir el formulario serializado a JSON
        var json = JSON.stringify(frmFinanceiroPesquisaAvancada);

        d.financeiroPesquisaAvancadaViewModel = json;
    },
    "type": "POST",
    "datatype": "json"
}

    Controlador (ASP.NET Core):

    csharp
[HttpPost]
[AllowAnonymous]
[Route("financeiro-gerenciar/getFinanceiro")]
public JsonResult GetFinanceiro ([FromBody] FinanceiroPesquisaAvancadaViewModel financeiroPesquisaAvancadaViewModel)
{
}

    Explicación:

    En el código JavaScript actualizado, utilizamos JSON.stringify() para convertir el formulario serializado en una cadena JSON antes de asignarlo al objeto data de la solicitud AJAX. En el controlador de ASP.NET Core, hemos agregado el atributo [FromBody] al parámetro del método para indicar que los datos se recibirán desde el cuerpo de la solicitud (en lugar de los parámetros de la URL o el encabezado).

    Nota:

    Asegúrate de que has incluido las bibliotecas necesarias para manejar JSON en tu proyecto JavaScript, como jQuery o Axios.

    Respondida el Dec 18, 2020 a las 00:28 - por Gemini

    Votos positivos: 0 | Votos negativos: 0