백엔드 ASP.NET MVC (MEF)에 여러 양식 게시/바인딩

Question

하나의 Ajax (jQuery) 호출로 여러 양식을 ASP 애플리케이션에 보내려고합니다. ASP가를 automaticly 생성되도록

이

Key : Value 
Form1 : All serialized form elements for Form1 
Form2 : All serialized form elements for Form2 

는 일반적으로 우리는 다음과 같은 방법을 사용 : 우리이 (가)으로 Request.Form 속성에 다음을받는 서버에서

var formContainer = { 
     Form1 : form1.serialize(), 
     Form2 : form2.serialize() 
    } 
    $.ajax({ 
     type: "POST", 
     url: '@Url.Action("CreateModel", "Controller")', 

     data: formContainer, 
     success: function (result) { } 
    }); 

:

우리는 다음과 같은 jQuery 코드를 사용 올바른 속성 값을 가진 객체 :

public ActionResult CreateModel(ClassForForm1 obj) 

그러나 두 개의 f orms가 함께 보내지는 모델 바인더는 클래스를 바인딩하고 빌드 할 수 없습니다. 이 작업을 위해 우리는 모델 작성자가 Request.Form [ "Form1"]의 값을 사용하기를 원합니다.

우리는 extern 라이브러리 (DevExpress, 위의 자체 구현을 작성했습니다)를 사용하기 때문에 사용자 정의 모델 바인더를 사용할 수 없습니다.

우리는 MEF 프레임 워크를 사용하여 기능을 추가합니다 (이 기능은보기에 양식으로 추가됩니다). 이런 이유로 우리는 백엔드에 너무 기대되는 것을 모릅니다. 따라서 래퍼 ViewModel을 작성하는 것은 허용되지 않습니다.

다른 양식 데이터를 처리하는 기능은 다른 모듈에서 처리됩니다.

모든 솔루션을 환영합니다!

미리 감사드립니다.

Answer 1

일반적으로 결합 된보기 모델을 사용하여 수행됩니다. 그렇지 않으면 요청 매개 변수를 수동으로 구문 분석해야합니다. 여러 형태의 데이터를 결합하는 방법을 보여주는 fiddle입니다.

[HttpPost] 
public ActionResult Index(IndexViewModel model) { 
    var firstModel = (new First()).CloneMatching(model); 
    var lastModel = (new Last()).CloneMatching(model); 

    return RedirectToAction("Thanks"); 
} 

가 CloneMatching 확장 방법에 대한 Best way to clone properties of disparate objects를 참조하십시오

public class IndexViewModel { 
    // properties from form1 
    public string first { get; set; } 

    // properties from form2 
    public string last { get; set; } 
} 

public class First { 
    public string first { get; set; } 
} 

public class Last { 
    public string last { get; set; } 
} 

을 그리고 액션 서명 :

서버에서

$(function() { 
    $('button').click(function(e) { 
     var form1 = $('#form1'); 
     var form2 = $('#form2'); 
     $.ajax({ 
      type: "POST", 
      url: '/echo/html/', 
      data: form1.serialize()+"&"+form2.serialize(), 
      success: function (result) { 
       alert(result); 
      } 
     }); 
    }); 
}); 

, 뷰 모델이 필요합니다.

Answer 2

이 같은 자바 스크립트 객체를 생성하는 경우 :

이

var formContainer = { obj : { 
      Form1 : form1.serialize(), 
      Form2 : form2.serialize() 
     } 
} 

컨트롤러는 이름이 'OBJ'당신은 당신의 방법에서 'OBJ'로 자바 스크립트에서 만든 ....

그것을 일치한다

public ActionResult CreateModel(ClassForForm1 obj) 

Answer 3

필자의 이전 샘플은 클래스에 이름과 값 소품이 있기 때문에 효과가있었습니다. 나는 정말로 유감 스럽다.": {"Prop1 "그러나 지금 당신은 다음 JSON 문자열

"{ "Form1을 당신에게 제공해야합니다 양식 및 양식 컨테이너

function mapForm(form) 
{ 
    var result = {}; 

    $.map($(form).serializeArray(), 
        function(el){ 
         mapFormProperty(result, el); 
          });  
    return result; 
} 

function mapFormProperty(form, property) 
{ 
    form[property.name] = property.value; 
} 

$('.submit').click(function(){ 

    var form1 = mapForm($('#form1')); 
    var form2 = mapForm($('#form2'));   

    var formContainer = { 
     'Form1': form1, 
     'Form2': form2}; 

    $.ajax({ 
     type: "POST", 
     url: '@Url.Action("CreateModel", "Controller")', 
     data: JSON.stringify(formContainer), 
     success: function (result) { } 
}); 

작업을 DEMO

JS 작업 볼 수 있습니다 : "Value1", "Prop2": "Value2"}, "Form2": { "Prop1": "Value1", "Prop2": "Value2"}} "

당신이 당신의 행동 서명

액션

public ActionResult CreateModel(ClassForForm1 Form1) //argument name must be equal to data property 
                //but not equal to class name 

을 변경하고 일을해야하는 경우 ODEL 바인더는이 문제를 해결할 수있을 것입니다. 내 테스트 샘플에서 작동합니다