如何使用AJAX呈现部分表单元素

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

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

我想dynamic地添加部分到窗体。 鉴于我的部分观点的性质，我也必须把模型一起传递。 在这方面，我失败了。

我包含页面上的标记：

 <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调用你必须build立模型：

 $.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() 

将表格中的字段发送回控制器。 一种快速，简单的方法，可以将所有信息发回给回发站，而无需手动构build模型。

Answer 2

您需要为您在ajax请求中调用的控制器添加模型的属性。 在这种情况下，您的AddPreference控制器有一个FormViewModeltypes的参数。 我假设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请求的视图的更多信息，我可以进一步协助。