JQuery AJAX Webmethod POST接收一个对象

时间:2018-06-08 14:54:50

标签: jquery asp.net ajax webmethod

我正在尝试序列化十几个输入并将其发布到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"}]

所有者类的剪辑(属性与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作为List(所有者))也获取调用的方法,但我最终得到一个空对象列表JSON变量的长度

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

1 个答案:

答案 0 :(得分:0)

从我可以得出结论来自JQuery.serializeArray()的结果格式导致[{"name":"firstName","value":"John"},{"name":"lastName","value":"Doe"}]名称:值密钥对格式被web方法拒绝。

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

我偶然发现了另一篇帖子Stackoverflow Link,有人提供了一个格式函数,可以将$('#mydiv').serialize()转换为可由web方法使用的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;
    }
});

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

简单课程

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