如何在 Jquery 中将 MVC 表单序列化为 JSON

Posted 2023-04-12

【中文标题】如何在 Jquery 中将 MVC 表单序列化为 JSON

【英文标题】：How to Serialize MVC form into JSON in Jquery

【发布时间】：2015-10-26 10:41:12

【问题描述】：

我想使用 JQuery 将我的 MVC 表单序列化为 JSON，然后想反序列化一些值，例如 C# 后端的输入字段的值，但我无法在 json 中序列化它...请帮助我解决这个问题。以下是我的代码。

<script type="text/javascript">
    $(function () 

        $('#btnsearch').click(function (e) 

            var searchname = $('#txtsearch').val();

            var form = $(this).serializeArray();

            DrawTable(form);
        );



        function DrawTable() 
            var props = [];
            props.push( name: "FirstName", value: firstname );
            BindDataTable( AllowPaging: true, ShowFilter: false, ShowEditLink: true, EmptyTableText: 'No Data Found', SortIndex: 0, SortDirection: "asc" ,
                              "#tblCustomers",
                              "@Url.Action("GetAllCustomers", "Customer")",
                              props,
                              [ name: "Id", cellClass: "alignCenter", Sortable: true, index: 0 ,  name: "FirstName" ,  name: "ABN" ,  name: "Phone" ,  name: "Email" ,  name: "Address1" ,  name: "City" ,  name: "Country" ],
                              [ name: "Id", type: "anchor", title: 'customerTable', viewtitle: 'View', link: '@Url.Action("Edit", "Customer")', index: 0 ]);

         

       // DrawTable(data);
        //$('#myInputTextField').on('keyup', function () 
        //    oTable.search($(this).val()).draw();
        //);



    );

        </script>

【参考方案1】：

是的，这是一个非常古老的问题，并且有很多类似的问题有答案：

Serialize form data to JSON Convert form data to JavaScript object with jQuery

但这是专门针对 Asp.MVC 的：我已经测试了大多数答案，但它们无法序列化按照 Asp.mvc 工作方式编码的表单，当有列表类型的属性时 .MVC 表单编码为

   TheProperty[1].SubProperty=Value
   TheProperty[2].SubProperty=Value

当使用选项配置时，唯一正确处理这种情况的序列化程序是this

 associativeArrays: false 

（感谢 raphaelm22 的解决方案！）

【讨论】：

找了好几个小时了，谢谢！没有这个，将 ASP.NET 表单数组发布到 JSON 端点是不可能的。

【参考方案2】：

您不能使用$(this).serializeArray();，因为this 指的是$('#btnsearch')，它不是一个表单。

使用$("#your_form_id).serializeArray(); 或$("#your_form_id).serialize()。

【讨论】：

你能告诉我如何在 c# 中反序列化它并从中获取特定值，就像我想获取我在文本框中输入的文本一样

或者更好：$(this).closest("form").serializeArray()，这样你就不需要知道（甚至不需要）表单的id了。

@AhmadCheema - *** 如何将 JSON 反序列化为强类型对象有很多很好的答案。

@Riokmij 序列化后我得到了这个：form = "__RequestVerificationToken=tYY7hJDUAgtisu8r8dB4VxwFhJb2m8JRPz_bIgbmJhgZjLQp6Sf-lnQE2x3TG9BNCc4B-PTPAU9TewJNUP_d6kgK8TUIej2fiPkWAiImu_Y1" 序列化是否正确？