使用 ajax 返回结果更新 ViewModel答案

【问题标题】：Update ViewModel with ajax return result使用 ajax 返回结果更新 ViewModel
【发布时间】：2015-08-24 00:26:46
【问题描述】：

我有以下型号

public class PersonViewModel {
    public Guid Id { get; set; }
    public string Firstname{ get; set; }
    public string Lastname { get; set; }
}

我的视图看起来像这样

@model Web.UI.PersonViewModel
<form class="form-horizontal" id="fuelux-wizard" method="post">
    @Html.Bootstrap().TextBoxFor(p => p.Firstname).Placeholder("First name")
    @Html.Bootstrap().TextBoxFor(p => p.Lastname).Placeholder("Last name")
    @Html.Bootstrap().Button().Class("btn btn-next").Text(Model.Id == Guid.Empty ? "Lets Start" : "Continue").HtmlAttributes(new { onclick = "CreatePerson();" }).AppendIcon("fa fa-arrow-right")

</form>

这是点击按钮时调用的js函数

function CreateProposal() {

    // DO Ajax call to create the person
    $.ajax({ url: "CreatePerson", type: "POST", data: $('form').serialize() })
      .done(function () {

          $('.wizard').wizard('next');
      })
      .fail(function () {
          alert("Unable to save.");
          $("#personModal").modal("hide");
      });
}

在我的控制器中，我也有一个 CreatePerson 方法

[HttpPost]
public JsonResult CreatePerson(PersonViewModel personViewModel )
{            
    if(personViewModel .Id == Guid.Empty)
        personViewModel .Id = Guid.NewGuid();
     return Json(personViewModel );
}

如何更新视图的 ViewModel？这个想法是创建一个人，这将为模型分配一个新的 Guid。当分配了 Guid 时，按钮中的文本会有所不同。

有没有办法用返回的 ajax 结果更新视图模型？

有人能指出我正确的方向吗？

【问题讨论】：

似乎不需要返回整个对象（您已经在视图中拥有Firstname 和Lastname。只需返回Guid - return Json(personViewModel.Id); 然后更新@ 中的DOM 987654328@回调。但不确定要更新什么？
viewmodel.Id 需要更新，以便 UI 有 ID 记录，以便将来对 person 进行操作
或者最好有一个隐藏字段来保存 ID 值？然后用js更新DOM和按钮文字？
您需要为Id 属性添加一个隐藏输入，然后您可以使用.done(function (data) { $('#Id').val(data); ...} 我假设您还将按钮文本更改为“继续”？
是的。看起来那将是我最好的选择。感谢您帮我解决这个问题。

标签： c# ajax asp.net-mvc asp.net-mvc-4 razor

【解决方案1】：

听起来你需要这样的东西：

<form class="form-horizontal" id="fuelux-wizard" method="post">
    @Html.HiddenFor(m => m.Id)
    @Html.Bootstrap().TextBoxFor(p => p.Firstname).Placeholder("First name")
    @Html.Bootstrap().TextBoxFor(p => p.Lastname).Placeholder("Last name")
    @Html.Bootstrap().Button().Class("btn btn-next").Text(Model.Id == Guid.Empty ? "Lets Start" : "Continue").HtmlAttributes(new { onclick = "CreatePerson();" }).AppendIcon("fa fa-arrow-right")

</form>

.done(function (data) {
    $('#Id').val(data.Id);
    $('.wizard').wizard('next');
})

您需要在 DOM 中设置 Id。将 DOM 视为存储来自服务器的数据的数据存储库。

【讨论】：