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

Asp.Net MVC Ajax view model not updated

本文关键字：模型 更新 视图 Ajax Net MVC Asp      更新时间：2023-09-26

我有一个问题正在做我的头

假设我有一个视图模型

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 调用，并将更新的视图模型返回到控制器以显示回来？

这甚至可以在没有页面重新加载（又名标准操作链接）的情况下

进行吗？

基本上需要对 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.");
    });
});
相关文章：