중첩 모델이 바인딩되지 않습니다.

Question

JSON 데이터 구조를 MVC (3) 컨트롤러에 전달하고 모든 속성이 바인딩 된 JSON 객체를 C# 객체로 변환하려고합니다. 속성 중 하나는 간단한 유형입니다. 그것은 기본 모델 바인딩입니다. 여기

내 모델입니다 :

다음

public class Person 
{ 
    public string Name { get; set; } 
    public JobTitle JobTitle { get; set; } 
} 

public class JobTitle 
{ 
    public string Title { get; set; } 
    public bool IsSenior { get; set; } 
} 

(이하 "사람"클래스의 strcture 일치하는 JSON 객체를 전달 AJAX를 요청을) 내 Index.cshtml 페이지입니다 :

은

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     return View(); 
    } 

    public ActionResult ShowPerson(Person person) 
    { 
     return View(person); 
    } 
} 

은 "ShowPerson.cshtml"파일을 무시 :

<div id="myDiv" style="border:1px solid #F00"></div> 
<script type="text/javascript"> 
var person = { 
     Name: "Bob Smith", 
     JobTitle: { 
      Title: "Developer", 
      IsSenior: true 
     } 
    }; 

$.ajax({ 
    url: "@Url.Action("ShowPerson", "Home")", 
    data: $.param(person), 
    success: function (response){ 
     $("#myDiv").html(response); 
    }, 
    error: function (xhr) { 
     $("#myDiv").html("<h1>FAIL</h1><p>" + xhr.statusText + "</p>"); 
    } 
}); 
</script> 

그리고 내 HomeController는 다음과 같습니다 왜냐하면 문제가 발생하기 전에 문제가 발생하기 때문입니다.

HomeController.ShowPerson 동작에서 "person.Name"속성이 올바르게 바인딩되고 "Title"및 "IsSenior"속성을 포함하는 "person.JobTitle"개체가 인스턴스화되지만 여전히 기본값이 " Title = null "및"IsSenior = false ".

나는 과거에 문제없이 중첩 모델 바인딩을 수행했다. 내가 뭘 놓치고 있니? 아무도 왜 모델 바인딩이 한 단계 깊숙이 작동하는 것처럼 보일지에 대해 밝힐 수 있습니까?

나는 SO를 검색했으며 양식에서 데이터를 전송할 때 다른 사람들이 바인딩 문제를 겪고있는 것 같아서 $ .ajax() 요청에 뭔가 빠졌을 것입니다.

Answer 1

확인,

• 는 application/json; charset=utf-8로 contentType이을 설정 json
• 로 dataType와을 설정, 당신이해야 할 변화의 몇 가지가 있습니다.
• 사용 JSON.stringify()

아래의 수정 된 코드입니다.

var person = { 
    Name: "Bob Smith", 
    JobTitle: { 
     Title: "Developer", 
     IsSenior: true 
    } 
}; 

var jsonData = JSON.stringify(person); 

$.ajax({ 
    url: "@Url.Action("ShowPerson", "Home")", 
    data: jsonData, 
    dataType: 'json', 
    type: 'POST', 
    contentType: "application/json; charset=utf-8", 

    success: function (response){ 
    $("#myDiv").html(response); 
    }, 
    error: function (xhr) { 
    $("#myDiv").html("<h1>FAIL</h1><p>" + xhr.statusText + "</p>"); 
    } 
}); 

Answer 2

는 아약스 작동

contentType: "application/json; charset=utf-8", 
dataType: 'json', 
type: 'POST', 
data: $.toJSON(person);