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

Question

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>

marc_s · Accepted Answer · 2024-12-21 11:52:08Z

5

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

edited Dec 21, 2024 at 11:52

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Feb 27, 2018 at 15:57

DaniCE

2,4211 gold badge20 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Codemunkie Over a year ago

Been searching for this for hours, thank you! Posting ASP.NET form arrays to a JSON endpoint is impossible without this.

kamil-mrzyglod · Accepted Answer · 2015-08-04 06:45:12Z

0

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

answered Aug 4, 2015 at 6:45

kamil-mrzyglod

5,0081 gold badge22 silver badges30 bronze badges

4 Comments

ARC Over a year ago

can you please tell me that how to deserialize it in c# and get specific value from it like i want to get text that i entered in textbox

Najkin Over a year ago

Or better: $(this).closest("form").serializeArray(), this way, you don't need to know (or even have) the id of the form.

kamil-mrzyglod Over a year ago

@AhmadCheema - there are a lot of good answers on StackOverflow how to deserialize JSON to strongly typed object.

ARC Over a year ago

@Riokmij after serializing i got this: form = "__RequestVerificationToken=tYY7hJDUAgtisu8r8dB4VxwFhJb2m8JRPz_bIgbmJhgZjLQp6Sf-lnQE2x3TG9BNCc4B-PTPAU9TewJNUP_d6kgK8TUIej2fiPkWAiImu_Y1" is it serialized correctly ?

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related