更新視圖模型與阿賈克斯返回結果

我有以下型號更新視圖模型與阿賈克斯返回結果

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>

這裏是按鈕被點擊

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

時被調用的js函數

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

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

如何更新視圖的ViewModel？這個想法是創建一個人，這將爲模型分配一個新的Guid。當沒有指定Guid時，按鈕中的文本會有所不同。

有沒有一種方法可以用返回的ajax結果更新viewmodel？

有人能指引我進入正確的方向嗎？

來源

2015-08-24 Shane Van Wyk

似乎沒有必要返回整個對象（在視圖中已經有'Firstname'和'Lastname'了，只需返回Guid - 'return Json（personViewModel.Id）;'然後更新DOM 'done（）'callback。但不知道你想更新什麼？ –

viewmodel.Id需要更新，所以用戶界面有一個ID的記錄，以便將來對人進行操作 –

還是有更好的隱藏字段它包含ID值？然後使用js來更新DOM和按鈕文本？ –

聽起來像是你需要的是這樣的：

<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。可以將DOM看作是存儲服務器數據的數據存儲庫。

來源

2015-08-24 02:04:11 beautifulcoder

更新視圖模型與阿賈克斯返回結果

回答

相關問題