2

我有一个表格，它组装了一个较大表格的部分。例如：

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 个小时。

4

2 回答 2

7

对于 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()

将表单上的字段发送回控制器。一种快速、简单的方式来发回所有信息，类似于回发，而无需手动构建模型。

于 2013-10-28T19:59:15.677 回答
0

您需要为您在 ajax 请求中调用的控制器添加模型的属性。在这种情况下，您的AddPreference控制器有一个类型为 的参数FormViewModel。我假设 的信息 FormViewModel存储在页面上。您需要data为 ajax 请求传递属性中的那些。

如果您发布您的FormViewModel属性，我可以提供更多帮助。基本上，您需要以下内容：

$('#addPreference').click(function () {

    $.ajax({
        type: "POST",
        url: '@Html("AddPreference", "Main")',
        data: {id: "123asd", Prop1: myProp1},
        success: function (html) {
            $(html).appendTo('#additionalPreference');
            console.log(html);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert("Error");
        },
        complete: function () {
            console.log("End");
        }
    });

发布有关您的模型的更多信息以及您提出 ajax 请求的视图，我可以提供进一步的帮助。

于 2013-10-28T20:06:28.623 回答