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

Posted 2023-05-08

【中文标题】在 jquery 数据表组件中使用 Ajax 发布 ViewModel 的问题

【英文标题】：Problems POSTing a ViewModel using Ajax in a jquery datatable component

【发布时间】：2021-03-27 16:30:42

【问题描述】：

序列化表单的内容后，我需要执行 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; 

【问题讨论】：

为什么要序列化表单？

我序列化表单以从字段中获取信息。有其他方法吗？

【参考方案1】：

这是一个演示： 查看（使用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; 
    

结果：