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.