我如何渲染使用AJAX的部分表单元素 [英] How do I render a partial form element using AJAX

问题描述

我有一个组装大表单的部分的形式。例如：

I have a form that assembles sections of a larger form. For example:

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

我要动态地添加章节的形式。鉴于我的部分景色的性质，我必须通过模型一起为好。在这，我惨遭失败。

I would like to dynamically add sections to the form. Given the nature of my partial views, I must pass the model along as well. In that, I am failing miserably.

我的包含页面上的标记：

The markup on my containing page:

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

我的控制器动作：

My controller action:

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

该模型是永远有效。我如何通过模型形成包含页到控制器的动作？这似乎是一些简单的事情（这certianly将是Web窗体），但我一直在哽咽在这3小时。

The model is never valid. How do I pass the model form the containing page to the controller action? This would seem to be something simple to do (it certianly would be in Web Forms) but I have been choking on this for 3 hours.

推荐答案

有关AJAX调用你必须构建模型：

For an ajax call you have to build the model:

$.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调用匹配的数据部分的名称完全相同模型中的名字，它应该在你的控制器填充显示出来。

Make sure that the names in the data section of the ajax call match exactly the names in your model and it should show up in your controller populated.

的更新：的

由于写这个答案，我有了更多的了解通过AJAX给控制器发回信息。正如评论里克戴利可以通过发送提交表单回控制器的型号：

Since writing this answer I have learned more about sending information back to the controller via ajax. As commented by Rick Dailey you can send the model submitted to the form back to the controller via:

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

我已经发现了序列化和我们使用：

I have found out about serialize and we use:

$('form').serialize() 

要在表格上发送的字段回控制器。一个快速，简单的方法来发送回类似职位的所有信息回，而不必手动建立模型。

To send the fields on the form back to the controller. A quick, easy way to send all information back similar to a post back without having to manually build the model.

这篇关于我如何渲染使用AJAX的部分表单元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！