Problems POSTing a ViewModel using Ajax in a jquery datatable component

After serializing the content of a form, I need to do a POST and send the viewmodel using Ajax. When performing POST, the viewmodel is arriving with empty fields. I’ve tried using “JSON.stringfy” and converting the class, but it didn’t work either.
Does anyone know how to help me?

Note: The Ajax script is using quotation marks because I am carrying a datatable jquery.

Thanks 🙂

Problems POSTing a ViewModel using Ajax in a jquery datatable component

Controller:

[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; }
}

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Here is a demo:
View(use serializeArray and foreach to change form data to an object);

<form id="frm-pesquisa-avancada">
        Id<input asp-for="Id" /><br />
        PessoaEmpresaId<input asp-for="PessoaEmpresaId" /><br />
        NumeroDocumento<input asp-for="NumeroDocumento" />

    </form>
<button onclick="LoadPack()">GetData</button>
<table id="tblList" class="table table-striped table-bordered" style="width:100%">
    <thead>
        <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
            <th>d</th>
        </tr>
    </thead>
</table>

@section scripts{
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">

    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
    <script type="text/javascript">
       
        function LoadPack(url) {

            //use serializeArray and foreach to change form data to an object

            var formdata = $("#frm-pesquisa-avancada").serializeArray();
            var data = {};
            $(formdata).each(function (index, obj) {
                data[obj.name] = obj.value;
            });
            $('#tblList').DataTable({
                destroy: true,
                ajax: {
                    "type": "POST",
                    "url": '/financeiro-gerenciar/getFinanceiro',
                    "dataType": "json",
                    "data": data
                   
                },
                columns: [
                    { "data": "a", responsivePriority: 1, "searchable": true },
                    { "data": "b", responsivePriority: 2, "searchable": true },
                    { "data": "c", responsivePriority: 3, "searchable": true },
                    { "data": "d", responsivePriority: 4, "searchable": true },
                ],
            });

        };
        
    </script>
}

Controller:
[HttpPost]
        [AllowAnonymous]
        [Route("financeiro-gerenciar/getFinanceiro")]
        public IActionResult GetFinanceiro(FinanceiroPesquisaAvancadaViewModel financeiroPesquisaAvancadaViewModel) {
            List<DataTableModel> l = new List<DataTableModel> {
            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 });
        }

Models:
    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; }
    }

result:
Problems POSTing a ViewModel using Ajax in a jquery datatable component


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x