Asp.net 나는이 양식에 내장 내 모델, 전달해야 ajax.beginForm

Question

MVC 직렬화 :이 방법에

using (Ajax.BeginForm("Index", null, new AjaxOptions() { UpdateTargetId = "FormContainer", HttpMethod = "Post", InsertionMode = InsertionMode.Replace, OnSuccess = "successFunc" }, new { id = "UpdateForm" })) 

는 :

public ActionResult SavePreset(DocumentFilterModel model, string name) 
{ 
    //Do some magic 
    return PartialView("Partial/FilterListPartial", model); 
} 

중요한 점은 기본적으로이 양식 보고서 미리 설정을 수집합니다. 그러나 DB에 프리셋을 저장하는 옵션을 추가해야합니다. 따라서 SavePreset 메서드가 필요합니다.

나는이 스크립트를 사용하는 것을 시도했다 :

$("#SavePresetButton").on("click", function() { 
$.ajax({ 
    type: "POST", 
    url: '@Url.Action("SavePreset", "Reports")', 
    data: { 
     name: $("#PresetNameEditor").val(), 
     model: $("#UpdateForm").serialize() 
    } 
    }).success(function(result) { 
     $("#FilterSettingsContainer").html(result); 
    }); 
}); 

을하지만 난 내가 하나가 DocumentFilterModel model에 null를 얻을 문제를 발생했습니다 중 (string로 변경 model parametr의 유형 경우)를 역 직렬화 할 수 없습니다. 상황이 내가 시도 : 그런데

var SettingsModel = new JavaScriptSerializer().Deserialize<DocumentFilterModel>(model); 
var a = JsonConvert.DeserializeObject<DocumentFilterModel>(model); 

, (별도의 부분보기에있는이 필터를) 나는 것 그대로 내 양식을 유지하려면, 난 아직 기록의 목록 내 두 번째 부분보기를 업데이트해야하기 때문에 , DocumentFilterModel이 너무 커서 수동으로 구문 분석 할 수 없습니다.

Answer 1

serialize 메서드는 양식을 읽고 입력 요소 이름과 값으로 URL 인코딩 된 문자열을 생성합니다. 그래서 기본적으로 그것은 큰 querystring이 될 것입니다. 당신이 $.ajax 전화의 data 속성으로, JQuery와 (FormData 같은) 요청 본문을 위해 그것을 사용 되었 때

그래서 당신은이

data:{ 
     name: $("#PresetNameEditor").val(), 
     model: $("#UpdateForm").serialize() 
    } 

같은 그것은이 객체를 보내려고 시도 할 때 이

{name: "Abc", model: "FirstName=Scott&Email=someEmail"} 

처럼 당신은 당신이 JS의 두 속성을 가진 객체와 두 번째 속성은 쿼리 문자열 형식으로 모든 입력 값을 가지고있는 것을 알 수있다. 모델 바인더는이 데이터를 읽고 사용자의 DocumentFilterModel 개체에 매핑 할 수 없습니다.

serialize 메서드의 결과를 혼합하여 데이터로 보내려는 js 개체를 작성할 수 없습니다.

단순히 ayax 호출의 데이터 속성 값으로 serialize의 결과를 사용하고 쿼리 문자열에 이름을 전달하십시오.

$("#SavePresetButton").on("click", function() { 
    $.ajax({ 
     type: "POST", 
     url: '@Url.Action("SavePreset", "Reports")?name='+$("#PresetNameEditor").val(), 
     data: $("#UpdateForm").serialize() 
    }).done(function(result) { 
     console.log(result); 
    }); 
});