Wie rendere ich ein Teilformularelement mit AJAX?

Ich habe ein Formular, das Abschnitte eines größeren Formulars zusammensetzt. Zum Beispiel:

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

Ich möchte dem Formular dynamisch Abschnitte hinzufügen. Angesichts der Art meiner Teilansichten muss ich das Modell ebenfalls weitergeben. Darin versage ich kläglich.

Das Markup auf meiner enthaltenden Seite:

<div id="additionalPreference"></div>

<input type="button" value="Add Additional Preference" id="addPreference" />


<script>
    $(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");
            }
        });
    });
});
</script>

Meine Controller-Aktion:

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

Das Modell ist niemals gültig. Wie übergebe ich das Modell von der übergeordneten Seite an die Controller-Aktion? Dies scheint etwas Einfaches zu sein (es wäre sicher in Web Forms), aber ich habe 3 Stunden lang daran erstickt.