複数のオブジェクトをAjaxからWebMethodに渡す

Question

formの情報をWebMethodに渡しています。目的は、UseInfoオブジェクトにフォームからのデータを取り込み、NewUserクラスに追加したいくつかのプロパティも、ajaxリクエストから渡されます。

入力パラメータとしてUserInfoがある場合、オブジェクトはajaxポストの後に正常に移植されます。ただし、NewUserオブジェクトがある場合は、プロパティRelationshipのみが設定されますが、UserInfoオブジェクトはNothingとして表示されます。

私が間違っていることは何ですか？クラスNewUserに別の構造を与える必要がありますか？

NEWUSERクラス

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

問題があるTHA $（ "form"）。serialize（）を使用してWebAPIサービスに送信し、エンコードされたフォーム文字列を送信しています。これにより、WebAPI要求のオブジェクトに対して、フォームを "field1 = value1 & field2 = value2 & field3 = value3"という文字列に変換します。だから.NETはそれを単純なオブジェクトに変換しようとします。

あなたが持っているオブジェクトにあなたの要求を合わせるために、コンテンツタイプ 'json'を送信するようにあなたのajaxを変更することをお勧めします。

次に、クライアントオブジェクトへのフォームのシリアル化を制御するメソッドを追加します。

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

お知らせカスタム関数、serializeUserRequest（）、それは、サーバー側のWebAPIのパラメータに一致するJSONリクエストオブジェクトを生成します。これが機能する

$.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 /リレーションシップオブジェクトのプロパティと同じフォームのフィールド名にすることである（IE：「表示名」、「姓」、など）。また、2つのルートオブジェクト間でフォーム属性を分割するために、Relationオブジェクトにマップされるフィールドに「rel_」を追加し、その他のフィールド名はすべてUserInfoにマップします。

例：

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