I want to serialize my ASP.NET MVC form to JSON using jQuery and then want to deserialize some values like value of input field at backend in C#, but I am unable to serialize it in json. Please help me with this issue.

Here is my code:

<input type="search" id="txtsearch">
<input type="button" id="btnsearch" />

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

I want to serialize my ASP.NET MVC form to JSON using jQuery and then want to deserialize some values like value of input field at backend in C#, but I am unable to serialize it in json. Please help me with this issue.

Here is my code:

<input type="search" id="txtsearch">
<input type="button" id="btnsearch" />

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

• javascript
• c#
• jquery
• json
• asp-mvc

2 Answers 2

Yes, it's a very old question and there is a lot of similar questions with answers:

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

But this is asking specifically for ASP.NET MVC: I have tested most of the answers and they fail to serialize forms encoded the way ASP.NET MVC works, when there are property of list type that ASP.NET MVC forms encodes as

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

The only serializer that treats that case correctly is this, when configured with the option

{ associativeArrays: false }

(thanks raphaelm22 for your solution!)

You cannot use $(this).serializeArray(); because this refers to $('#btnsearch'), which is not a form.

Use $("#your_form_id).serializeArray(); or $("#your_form_id).serialize().