Asp.Net MVC Ajax 视图模型未更新答案

【问题标题】：Asp.Net MVC Ajax view model not updatedAsp.Net MVC Ajax 视图模型未更新
【发布时间】：2016-02-17 01:02:56
【问题描述】：

我遇到了一个问题

假设我有一个视图模型

public class PersonVM 
{
    public int? Id { get; set; }            

    public string Firstname { get; set; }
}

现在我有一个视图，它有一个输入框，只捕获Firstname。

@model PersonVM

<form id="frmCreatePerson">
    @Html.Bootstrap().TextBoxFor(p => p.Firstname).Placeholder("Firstname")

    @Html.Bootstrap().Button().Id("btnSubmit").Text("Create").AppendIcon("fa fa-arrow-right")
</form>

@{
if(Model.Id != null) 
{
    Html.Partial("_Results", Model)
}
}

我有一个对控制器的 Ajax 调用，只为视图模型生成一个新的Id。

然后我希望显示更新的视图模型。

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

    var data = $("#frmCreatePerson").serialize();

    $.ajax({
        url: '@Url.Action("CreatePerson", "Person")',
        type: "POST",
        data: data
    })
      .done(function (data) {


      })
      .fail(function () {
          alert("Unable to create.");
      });
});

控制器

[HttpPost]
public ActionResult CreatePerson(PersonVM model)
{
    model.id = 1;

    return PartialView("_Results", model);
}

_Results 部分视图只包含

@model PersonVM

@Html.DisplayForModel(Model);

由于某种原因，视图模型没有更新，模型仍然是空的。如何向控制器提交 Ajax 调用并将更新的视图模型返回给控制器以显示回来？

如果不重新加载页面（A.K.A 标准操作链接），这是否可能？

【问题讨论】：

标签： javascript ajax asp.net-mvc razor

【解决方案1】：

您需要基本上使用返回到您的 DOM 的响应（部分视图的渲染标记）。所以首先在你的页面中创建一个容器 div。

<div id="items"></div>

并在您的 ajax 方法的 done 事件中，将响应附加到此 div。

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

    var data = $("#frmCreatePerson").serialize();

    $.ajax({
        url: '@Url.Action("CreatePerson", "Person")',
        type: "POST",
        data: data
    })
    .done(function (data) {

         $("#items").append(data); // append the response to DOM

    })
    .fail(function () {
          alert("Unable to create.");
    });
});

【讨论】：

为这件事干杯