如何執行動態添加，刪除和在knockoutjs

Question

在MVC嵌套的ViewModels保存，可以有以下視圖模型：

public class MyCVViewModel 
{ 
    [Required] 
    [StringLength(100, ErrorMessage = "Resume Title cannot exceed 100 characters.")] 
    [Display(Name = "Resume Title")] 
    public string ResumeTitle { get; set; } 
    [Required] 
    [StringLength(1000, ErrorMessage = "Personal Statment cannot exceed 1000 characters.")] 
    [Display(Name = "Personal Statement")] 
    public string Statement { get; set; } 

    public List<MyCompanyViewModel> Companies { get; set; } 
} 

public class MyCompanyViewModel 
{ 
    [Required] 
    [StringLength(100, ErrorMessage = "Company Name cannot exceed 100 characters.")] 
    [Display(Name = "Company Name")] 
    public string CompanyName { get; set; } 
    [Required] 
    [StringLength(100, ErrorMessage = "Job Title cannot exceed 100 characters.")] 
    [Display(Name = "Job Title")] 
    public string JobTitle { get; set; } 
    [Required] 
    [DataType(DataType.Date)] 
    [Display(Name = "Start Date")] 
    public DateTime JobStartDate { get; set; } 
    [Required] 
    [DataType(DataType.Date)] 
    [Display(Name = "End Date")] 
    public DateTime JobEndDate { get; set; } 
    [Required] 
    [StringLength(1000, ErrorMessage = "Job Description cannot exceed 1000 characters.")] 
    [Display(Name = "Job Description")] 
    public string JobDescription { get; set; } 
} 

MyCVViewModel有MyCompanyViewModels的名單，這是非常簡單的。

我開始學習knockoutjs並試圖複製knockoutjs在同一個視圖模型。

這裏是我試過到目前爲止：

//company viewmodel 
function Company(data) { 
    this.name = ko.observable(data.name); 
    //other stuff 
} 

//cv view model 
function CVViewModel() { 
    var self = this; 

    self.title = ko.oberservable(); 
    self.statement = ko.oberservalbe(); 
    //list of company view model 
    self.companies = ko.observableArray(); 

    //add company 
    self.addCompany = function() { 
     self.companies.push({ 
      name: "" 
     }); 
    }; 

    //remove company 
    self.removeCompany = function (company) { 
     self.companies.remove(company); 
    }; 

    //populate with json 
    $.getJSON("/Class/FillCompany", function (allData) { 
     var mappedTasks = $.map(allData, function (item) { return new Company(item) }); 
     self.companies(mappedTasks); 
    }); 
}; 

// Activate knockout binding 
ko.applyBindings(new CVViewModel()); 

添加和刪除工作得很好，但我不知道如何挽救整個CV視圖模型並將其張貼在asp.net的MVC控制器。

大多數教程貼在網上的孩子視圖模型（在公司我的情況列表），並將其發佈到服務器，但不是父視圖模型（在我的情況cvviewmdoel）。

所以在我看來，我只能在公司發佈到服務器：

@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 
    <textarea name="companies" data-bind="value: ko.toJSON(companies)"></textarea> 
    <button type="submit">Save</button> 
} 

，並在我的控制器我希望公司的名單：

[HttpPost] 
[ValidateAntiForgeryToken] 
public ActionResult Index([FromJson] IEnumerable<Company> companies) 
{ 
    //save to database etc.. 
} 

如何張貼整個父視圖模型，以便我的控制器看起來更像：

[HttpPost] 
[ValidateAntiForgeryToken] 
public ActionResult Index(MyCVViewModel cv) 
{ 
    //save to database etc.. 
} 

其中MyCVViewModel包含已經有公司名單。

Answer 1

有了可以使這項工作在客戶端上一個小節目。

所有你可能需要，除非你需要用的東西不能用ko.mapping

​​

還增加了你一個新的公司當用戶處理的每個公司給自己節省一些時間的第一將要保持它的可觀察到的這樣使用方法：

self.companies.push(new Company(name)); 

您可以將整個模型頭部和兒童作爲一個JSON對象，以匹配您的服務器端對象。

所以更改您的視圖模型如下：

function viewModel() 
{ 
    var self = this; 

    self.title = ko.oberservable(); 
    self.statement = ko.oberservalbe(); 
    //list of company view model 
    self.companies = ko.observableArray(); 

    //add company 
    self.addCompany = function() { 
     self.companies.push(new Company(name)); 
    }; 

    //remove company 
    self.removeCompany = function (company) { 
     self.companies.remove(company); 
    }; 

    //populate with json 
    $.getJSON("/Class/FillCompany", function (allData) { 
     ko.mapping.fromJS(allData, {} self.companies) 
    }); 

    //save 
    saveModel = function(){ 
     var data = ko.mapping.toJS(self); 
     $ajax({ 
     url: 'Class/SaveCompany', 
     type: 'POST', 
     contentType: 'application/json', 
     dataType: 'json', 
     data: data, 
     success: function (data, textStatus, jqXhr) { 
      //do success stuff here. 
     } 

    } 

然後在你的提交，綁定點擊事件向視圖模型保存事件，它會發送一個父模型與所有的孩子作爲一個單一的表格帖子。

希望這會有所幫助。