将多个对象从 Ajax 传递到 WebMethod

Question

我正在将信息从我的 form 传递到我的 WebMethod。目标是用表单中的数据填充 UseInfo 对象，并填充我在 NewUser class 上添加的一些属性，这些属性也是从 ajax 请求传递的.

当我将 UserInfo 作为输入参数时，对象在 ajax post 之后成功填充。但是，如果我有 NewUser 对象，则只有属性 Relationship 被填充，但 UserInfo 对象显示为 Nothing。

知道我做错了什么吗？我需要为我的 class NewUser 提供不同的结构吗？

新用户class

 Public Class NewUser

        Public Property UserInfo As UserInfo
            Get
                Return _UserInfo
            End Get
            Set(value As UserInfo)
                _UserInfo = value
            End Set
        End Property
        Private _UserInfo As UserInfo

        Public Property Relationship As String
            Get
                Return m_Relationship
            End Get
            Set(value As String)
                m_Relationship = value
            End Set
        End Property
        Private m_Relationship As String

    End Class

WebMethod

    <HttpPost>
<ValidateAntiForgeryToken>
<DnnModuleAuthorize(AccessLevel:=SecurityAccessLevel.View)>
    Public Function AddUserDependant(<FromBody> oNewUser As NewUser) As HttpResponseMessage
        Try
            If Me.UserInfo.IsInRole("Carer") Then
                UsersControllerOmni.CreateDnnUser(oNewUser.UserInfo)

                Return Request.CreateResponse(HttpStatusCode.OK)
            Else
                Return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, "")
            End If
        Catch ex As Exception
            Return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, ex)
        End Try

    End Function

AJAX

$.ajax({
      type: "POST",
      cache: false,
      url: serviceUrl + "/ModuleTask/AddUserDependant",
      beforeSend: sf.setModuleHeaders,
      contentType: "application/json; charset=utf-8",
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      data: $("form").serialize()
  }).done(function (result) {


  }).fail(function (xhr, result, status) {
      alert(result);
  });

Answer 1

问题是您正在使用 $("form").serialize() 将表单字符串发送和编码到您的 WebAPI 服务。这会将表单转换为字符串 "field1=value1&field2=value2&field3=value3" 到您的 WebAPI 请求中的对象。所以 .NET 将尝试将其转换为一个简单的对象。

为了让您的请求适合您拥有的对象，我建议将您的 ajax 更改为发送内容类型 'json'。

然后添加一个方法来控制表单序列化到客户端对象。

$.ajax({
      type: "POST",
      cache: false,
      url: serviceUrl + "/ModuleTask/AddUserDependant",
      beforeSend: sf.setModuleHeaders,
      contentType: "application/json; charset=utf-8",
      dataType: 'json',
      data: $('form').serializeUserRequest()
}).done(function (result) {
}).fail(function (xhr, result, status) {
      alert(result);
});

请注意生成与服务器端 WebAPI 参数匹配的 json 请求对象的自定义函数 serializeUserRequest()。

$.fn.serializeUserRequest = function()
{
    var requestObj = { "UserInfo": {}, "Relationship": {} };
    var formData = this.serializeArray();
    $.each(formData , function(i, fd) {
        if (fd.name.indexOf("rel_") == 0) {
          var fld = fd.name.substring(4);
          requestObj.Relationship[fld] = fd.value;
        } else {
          requestObj.UserInfo[fd.name] = fd.value;
        }
    });
    return requestObj;
};

为此，我假设您将表单字段名称设置为与 UserInfo/Relationship 对象属性相同（即："DisplayName"、"FirstName" 等）。此外，为了在这两个根对象之间拆分表单属性，我将 "rel_" 添加到映射到 Relationship 对象的字段，所有其他字段名称将映射到 UserInfo。

示例：

<input type="text" name="rel_Name" maxlength="50" size="50"/>

将多个对象从 Ajax 传递到 WebMethod

Pass multiple objects from Ajax to WebMethod

vb.net

ajax

jquery

dotnetnuke