jquery - 在 jquery 数据表组件中使用 Ajax 发布 ViewModel 的问题

Question

序列化表单内容后，我需要执行 POST 并使用 Ajax 发送视图模型。执行 POST 时，视图模型到达时带有空字段。我试过使用“JSON.stringfy”并转换类，但它也不起作用。有谁知道如何帮助我？

注意：Ajax 脚本使用引号，因为我携带的是数据表 jquery。

谢谢 ：）

控制器：

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

}

阿贾克斯：

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

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

视图模型：

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

标签： jqueryasp.netajaxasp.net-coredatatables

Answer 1

这是一个演示： View（使用 serializeArray 和 foreach 将表单数据更改为对象）；

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

控制器：

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

楷模：

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

结果：