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

Question

我想使用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>

- ARC

Answer 1

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

• 将表单数据序列化为JSON
• 使用jQuery将表单数据转换为JavaScript对象

但是这个问题特别针对Asp.MVC：我已经测试了大多数答案，它们无法序列化以Asp.MVC的方式编码的表单。当表单中存在列表类型的属性时，Asp.MVC会进行编码，导致序列化失败。

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

唯一正确处理该情况的序列化器是此项，当配置了该选项时。

{ associativeArrays: false }

感谢raphaelm22的解决方案！

- DaniCE

---

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

Answer 2

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

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

- kamil-mrzyglod

---

请问您如何在C#中反序列化并从中获取特定值，比如我想要获取文本框中输入的文本？ - ARC

或者更好的方法是：$(this).closest("form").serializeArray()，这样你就不需要知道（甚至拥有）表单的ID。 - Najkin

@AhmadCheema - 在StackOverflow上有很多好的答案，可以告诉你如何将JSON反序列化为强类型对象。 - kamil-mrzyglod

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