Angular JS에서 복잡한 유형 컬렉션의 속성을 가진 MVC 모델 바인딩 콤플렉스 유형

Question

Angular JS 및 ASP.NET MVC를 사용하여 웹 응용 프로그램을 개발 중입니다. 하지만 모델 바인딩 복잡한 유형에 문제가 있습니다. 기본적으로 파일 목록, 문자열 목록을 업로드하고 있습니다. 데이터베이스에서 파일 업로드 후 경로를 저장하기 때문에 파일 (문자열 목록과 파일 목록)은 같은 열과 테이블입니다. 문자열의 경우 파일 경로가있는 동일한 열을 저장합니다. 예를 들어, 데이터베이스 테이블에는 Id (int) 및 Data (string) 열이 있습니다.

그런 다음 AngularJS가 게시 한 문자열 데이터를 파일 경로의 데이터 열에 데이터 열에 저장합니다. 그러나 요점은, 나는 그 명령을 기억할 필요가 있다는 것이다. 예를 들어, 사용자가 텍스트 필드를 추가하고 값을 입력 한 다음 파일 필드를 동적으로 추가 한 다음 파일을 선택한 다음 텍스트 필드를 추가하고 값을 다시 입력하십시오. 따라서 순서는 [ "텍스트 1 값", 파일, "텍스트 2 값"]이어야합니다. 하지만 문제는 파일의 HttpPostedFileBase와 텍스트 값의 문자열을 혼합 한 데이터 목록을 바인딩 할 수 없다는 것입니다. 그래서 내가 한 일은 아래와 같은 뷰 모델입니다.

public class CreateBlogVM 
    { 
     [Required] 
     [MaxLength(250)] 
     public string Title { get; set; } 
     [Required] 
     public ContentModel[] TextContents { get; set; } 
     [Required] 
     public ContentFileModel[] Files { get; set; } 
    } 

    public class ContentModel 
    { 
     public int OrderNo { get; set; } 
     public string Content { get; set; } 
    } 

    public class ContentFileModel 
    { 
     public int OrderNo { get; set; } 
     public HttpPostedFileBase File { get; set; } 
    } 

위에서 볼 수 있듯이 CreateBlogVM은 지금 바인딩하는 ViewModel입니다. 이 클래스에는 복잡한 유형의 두 가지 속성 인 TextContents와 Files가있을 것입니다. 그래서 순서를 기억, 나는 (클라이언트는이 값을 전달합니다) 우리가이

[HttpPostedFileBase, String, String, HttpPostedFileBase] 

같은 데이터 뭔가의 목록을 바인딩 할 수 없습니다 그러나 문제는 내가 게시 할 때이기 때문에 위에서 볼 수 OrderNo 필드와 복잡한 유형을 생성 Angular js의 데이터는 모든 값이 null이고 데이터를 바인딩하지 않습니다. "제목"값만 바인딩됩니다.

var textContents = new Array(); 
    var photoContents = new Array(); 

    for(var i=0; i<$scope.rows.length; i++) 
    { 
     if($scope.rows[i].type=="text") 
     { 
      var value = $scope.rows[i].value; 
      if (value == "" || value == null) { 
       showAlert("Text field should not be empty", "danger"); 
       return; 
      } 
      else { 
       var content = { OrderNo: i, Content: value } 
       textContents.push(content) 
      } 
     } 
     else if($scope.rows[i].type=="photo") 
     { 
      var file = $scope.rows[i].file; 
      if(file==null) 
      { 
       showAlert("Photo file is required", "danger"); 
       return; 
      } 
      else { 
       var content = { OrderNo: i, File: file }; 
       photoContents.push(file); 
      } 
     } 
    } 

    var fd = new FormData(); 
    fd.append('Title', $scope.title); 
    fd.append("TextContents", textContents); 
    fd.append("Files", photoContents); 

    $http.post("/Admin/Blog/Create", fd, { 
     transformRequest: angular.identity, 
     headers: { 'Content-Type': undefined } 
    }) 

    .success(function() { 
    }) 

    .error(function() { 
    }); 

위의 코드는 서버에 데이터를 제출하는 방법입니다. 데이터를 게시 할 때 모든 값은 null이고 mvc는 데이터를 바인딩하지 않습니다. 하지만이

public JsonResult Create(HttpPostedFileBase files, String contents, String title) 

같은 복잡한 유형을 사용하지 않고 값을 결합하지만 위와 같이 결합하면, 내가 파일과 문자열 내용을 주문 할 수없는 경우. 그래서 내 코드에 어떤 문제가 있습니까? 복잡한 유형의 개체 속성 목록이있는 복잡한 데이터를 어떻게 바인딩 할 수 있습니까?

Answer 1

변경에게 모델을 당신이 Content 및 관련 File 사이의 직접적인 관계를 얻을

public class CreateBlogVM 
{ 
    [Required] 
    [MaxLength(250)] 
    public string Title { get; set; } 
    public List<FileVM> Files { get; set; } 
} 
public class FileVM 
{ 
    [Required] 
    public string Content { get; set; } 
    [Required] 
    public HttpPostedFileBase Image { get; set; } 
} 

당신은 FormData 간단한 name/value쌍을 추가 할 수 있습니다합니다 (Order 속성이 필요하지 않습니다) 그래서 (객체하지 배열) . 루프에서 사용자가 수집 속성 (Files[0].Content, Files[0].Image, Files[1].Content 등)에 관한 인덱서로 이름을 생성하도록

var fd = new FormData(); 
fd.append('Title', $scope.title); 
for (var i=0; i<$scope.rows.length; i++) 
{ 
    .... 
    var content = $scope.rows[i].value; 
    fd.append('Files[' + i + '].Content', content); 
    .... 
    var file = $scope.rows[i].file; 
    fd.append('Files[' + i + '].Image', file); 
} 
.... 

를 사용하여 데이터를 추가

그런 다음 POST 메소드 서명 것이다

public JsonResult Create(CreateBlogVM model)