Question

我遇到的问题是

说我有一个视图模型

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标准操作链接），这是否可行？

Answer 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.");
    });
});

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

1 个答案: