CODEWITHSUNDEEP
javascriptc#jqueryjsonasp.net-mvc
ARC
ARC

Reputation: 1081

How to serialize ASP.NET MVC form into JSON in Jquery

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>

Upvotes: 6

Views: 5867

Answers (2)

DaniCE
DaniCE

Reputation: 2421

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

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

Upvotes: 5

kamil-mrzyglod
kamil-mrzyglod

Reputation: 4998

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().

Upvotes: 0

Related Questions