如何使用AJAX渲染部分表单元素

Question

我有一个表单,可以组装更大表单的部分.例如:

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

我想动态地向表单添加部分.鉴于我的部分视图的性质,我也必须传递模型.在那,我失败了.

我的包含页面上的标记:

<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>

我的控制器动作:

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

该模型永远无效.如何将包含页面的模型传递给控制器​​操作？这似乎是一件简单的事情(它可以在Web窗体中使用),但我已经窒息了3个小时.

Answer 1

对于ajax调用,您必须构建模型:

$.ajax({
    type: "POST",
    url: '@Url.Action("AddPreference", "Main")',
    data: {
        Field1: 'field1',
        Field2: 'field2'
    },
    success: function (html) {
         $(html).appendTo('#additionalPreference');
         console.log(html);
    },
    error: function (xhr, ajaxOptions, thrownError) {
         alert("Error");
    },
    complete: function () {
         console.log("End");
});

确保ajax调用的数据部分中的名称与模型中的名称完全匹配,并且它应显示在已填充的控制器中.

更新:

自写这个答案以来,我学到了更多关于通过ajax将信息发送回控制器的知识.如Rick Dailey评论,您可以通过以下方式将提交给表单的模型发送回控制器:

@Html.Raw(Json.Encode(Model))

我发现了序列化,我们使用:

$('form').serialize() 

将表单上的字段发送回控制器.一种快速,简便的方法,可以将所有信息发回,类似于回发,而无需手动构建模型.