JQuery AJAX Webmethod POST receiving an object

Question

I'm trying to serialize a dozen or so inputs and post this to a ASP.Net webmethod.

My question is rather than manually deserialize the JSON string and populate the object class can this be done automatically? I'll be receiving a single object not a list of objects.

I've been trying for days to accomplish this with no success, scouring lots of posts and just not finding any obvious examples to this. Sorry if I've overloaded with info just trying to cover everything.

Any help, ideas or direction is appreciated.

JQuery

            function pushOwnerData(formData) {  //formData is array of inputs
            // [used for debug purposes]
            //var test = "{owner: " + JSON.stringify(formData) + "}";
            // JSON.stringify({ formData: formData })
            //{ myOwner: JSON.stringify(formData) },
            // [end debug tinkering]
            var request = $.ajax({
                url: 'records_v1.2.aspx/UpdateOwnerInfo',
                method: "POST",
                data: "{myOwner: " + JSON.stringify(formData) + "}",
                contentType: "application/json; charset=utf-8",
                dataType: "json"
            });
            request.done(function (r) {
                console.log('success');
            });
            request.fail(function (jqXHR, textStatus) {
                console.log("pushOwnerData Request failed: " + textStatus);
            });

        }


        function editOwnerDialog() {
            var ownerDiv = getOwnerContent();
            $(ownerDiv).dialog({   
                modal: true,
                draggable: false,
                resizable: false,
                show: 'fold',
                hide: 'blind',
                width: 500,
                height: 350,
                dialogClass: 'ui-dialog-osx',
                title: "Edit Owner",
                buttons: {
                    "Save Changes": function () {
                        if (validateOwnerData()) {
                            // serialize to an array to be passed to a webmethod
                            var fields = $(".divTableBody").find("select,textarea,input").serializeArray();
                            var id = $('.owner_detail').find('.id').html();
                            fields.push({ name: "id", value: id });
                            // [used for debug purposes]
                            // var jsonFields = JSON.stringify(fields); 
                            // var test = $(".divTableBody").find("select,textarea,input").serialize(); 
                            // var jsonTest = JSON.stringify(test); 
                            // [end debug tinkering]
                            var result = pushOwnerData(fields);
                        } else {
                            return false;
                        }
                    },
                    "Cancel": function () {
                        $(this).dialog("destroy");
                    }
                },
                open: function () {
                    // create a mask for phone class
                    $('#owner_phone').mask("(999) 999-9999");
                },
                close: function () {
                    $(this).dialog("destroy");
                }

            });
        };

Ex of JSON data

[{"name":"prefix","value":""},{"name":"address1","value":"1234 Stone Mountain Rd"},{"name":"first","value":"Amy"},{"name":"address2","value":"Suite 18"},{"name":"middle","value":"Marie"},{"name":"city","value":"atlanta"},{"name":"last","value":"Smith"},{"name":"state","value":"GA"},{"name":"suffix","value":""},{"name":"postalcode","value":"65472"},{"name":"phone","value":"(850) 775-3131"},{"name":"email","value":"baba@hotmail.com"},{"name":"id","value":"2501"}]

Snip of Owner class (properties have same names as json keys)

    Private _id As Integer
    <DataMember()>
    Public Property id() As Integer
        Get
            Return _id
        End Get
        Set(ByVal value As Integer)
            _id = value
        End Set
    End Property

    Private _last As String
    <DataMember()>
    Public Property last() As String
        Get
            If Not _last = "" Then
                _last = Microsoft.VisualBasic.StrConv(_last, VbStrConv.ProperCase)
            End If
            Return _last
        End Get
        Set(ByVal value As String)
            _last = value
        End Set
    End Property

    Private _first As String
    <DataMember()>
    Public Property first As String
        Get
            If Not _first = "" Then
                _first = Microsoft.VisualBasic.StrConv(_first, VbStrConv.ProperCase)
            End If
            Return _first
        End Get
        Set(ByVal value As String)
            _first = value
        End Set
    End Property

Webmethod trying to populate my owner class without having to include all properties as method variables (ByVal first as string, ...etc), is this possible?

I've tried (ByVal myOwner as List(of Owner)) also which gets the method called but I end up with a list of empty objects the length of the JSON variables

    <WebMethod()> _
Public Shared Function UpdateOwnerInfo(ByVal myOwner As Owner) As String
    Dim result As Boolean = False
    'ToDo
    Return result
End Function

Answer 1

From what I can conclude it's the resulting format from JQuery.serializeArray() that results in a [{"name":"firstName","value":"John"},{"name":"lastName","value":"Doe"}] name : value key pair format which is rejected by the webmethod.

The webmethod seems to consume a format only where the key is the type property name ie: {"firstName":"John","lastName":"Doe"} this works and populates my class without issue.

I stumbled across another post here Stackoverflow Link that someone provided a format function that will convert a $('#mydiv').serialize() into a json string that can be consumed by the webmethod. Not sure if there's a better way or if my inexperience resulted in pushing a square block through a round hole but this worked for me.

Full disclosure:

HTML

<form id="form1" runat="server">
<div class="myForm">
    First name: <input type="text" class="first" name="firstName" />
    Last name: <input type="text" class="last" name="lastName" />
</div>
<button id="go">
    Go</button>
</form>

JQuery

jQuery(document).ready(function ($) {


    $("#go").click(function () {
        //var formData = { firstName: 'John', lastName: 'Doe' };
        var formData = $(".myForm").find("input").serialize();
        pushOwnerData(formData);
    });

    function pushOwnerData(formData) { 
        var json1 = "{\"formData\":" + toSimpleJson(formData) + "}";    
        var request = $.ajax({
            url: 'testJSON.aspx/UpdateOwnerInfo',
            method: "POST",
            data: json1,
            contentType: "application/json; charset=utf-8",
            dataType: "json"
        });
        request.done(function (r) {
            alert('success');
        });
        request.fail(function (jqXHR, textStatus) {
            alert("pushOwnerData Request failed: " + textStatus);
        });

    }


    function toSimpleJson(serializedData) {
        var ar1 = serializedData.split("&");
        var json = "{";
        for (var i = 0; i < ar1.length; i++) {
            var ar2 = ar1[i].split("=");
            json += i > 0 ? ", " : "";
            json += "\"" + ar2[0] + "\" : ";
            json += "\"" + (ar2.length < 2 ? "" : ar2[1]) + "\"";
        }
        json += "}";
        return json;
    }
});

Webmethod

Imports System.Data
Imports System.Web.Services
Imports System.Configuration
Imports System.Data.SqlClient

Partial Class testJSON
    Inherits System.Web.UI.Page

        <WebMethod()> _
        Public Shared Function UpdateOwnerInfo(ByVal formData As OwnerTest) As String
            Dim result As Boolean = False

            Return result
        End Function
End Class

Simple class

Public Class OwnerTest
    Public Property firstName As String
    Public Property lastName As String
End Class