Come faccio a rendere un elemento di forma parziale usando AJAX

Ho una forma che assembla sezioni di una forma più grande. Per esempio:

Html.RenderPartial("Partials/MealPreference", Model); 

Vorrei aggiungere in modo dinamico sezioni al modulo. Data la natura delle mie vedute parziali, devo passare anche il modello. In ciò, sto fallendo miseramente.

Il markup sulla mia pagina contenente:

 
$(document).ready(function () { $('#addPreference').click(function () { $.ajax({ type: "POST", url: '@Html("AddPreference", "Main")', success: function (html) { $(html).appendTo('#additionalPreference'); console.log(html); }, error: function (xhr, ajaxOptions, thrownError) { alert("Error"); }, complete: function () { console.log("End"); } }); }); });

Azione del mio controller:

 [HttpPost] public ActionResult AddPreference(FormViewModel model) { if (ModelState.IsValid) { return PartialView("Partials/AdditionalPreference", model); } else { return PartialView("Partials/LoadFailed"); } } 

Il modello non è mai valido. Come faccio a passare il modello dalla pagina contenente all’azione del controller? Questo sembrerebbe essere qualcosa di semplice da fare (sarebbe certamente in Web Forms) ma soffocamento su questo per 3 ore.