JQuery AJAX Webmethod POST 接收对象

Question

我正在尝试序列化十几个输入并将其发布到 ASP.Net webmethod。

我的问题不是手动反序列化 JSON 字符串并填充对象类，这可以自动完成吗？我将收到一个对象而不是对象列表。

我已经尝试了好几天来完成这项工作，但没有成功，搜索了很多帖子，但没有找到任何明显的例子。抱歉，如果我的信息过多，只是想涵盖所有内容。

感谢任何帮助、想法或方向。

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");
                }

            });
        };

JSON 数据示例

[{"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"}]

Owner 类的片段（属性与 json 键同名）

    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 试图填充我的所有者类，而不必将所有属性都包含为方法变量（ByVal 首先作为字符串，...等），这可能吗？

我已经尝试过 (ByVal myOwner as List(of Owner)) 也可以调用该方法，但我最终得到一个空对象列表，其长度为 JSON 变量的长度

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

Answer 1

据我所知，JQuery.serializeArray() 的结果格式导致[{"name":"firstName","value":"John"},{"name":"lastName","value":"Doe"}] name : value 密钥对格式被 webmethod 拒绝。

webmethod 似乎只使用一种格式，其中键是类型属性名称，即：{"firstName":"John","lastName":"Doe"} 这可以正常工作并毫无问题地填充我的类。

我在Stackoverflow Link 偶然发现了另一篇帖子，有人提供了一个格式函数，可以将$('#mydiv').serialize() 转换为可供webmethod 使用的json 字符串。不确定是否有更好的方法，或者我的经验不足导致将方形块推过圆孔，但这对我有用。

全面披露：

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;
    }
});

网络方法

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

简单类

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