C# 如何使用knockoutjs中的嵌套viewmodels执行动态添加、删除和保存

在MVC中，可以使用以下视图模型：

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

添加和删除工作正常，但我不确定如何保存整个cv viewmodel并将其发布到asp.net mvc中的控制器

大多数在线教程都会发布子viewmodel（在我的案例公司列表中）并将其发布到服务器，但不会发布父viewmodel（在我的案例cvviewmdoel中）

因此，在我看来，我只能将公司发布到服务器：

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

---

其中MyCVViewModel已经包含公司列表。

在客户端上进行一些编程，您就可以实现这一点

首先，您可能想为自己节省一些时间，除非您需要与每家公司联系，而这些公司无法通过使用ko.mapping与订阅者联系

ko.mapping.fromJS(allData, {} self.companies)

此外，在添加新公司时，您希望保持其可观察性，因此请使用：

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.
        }

   }

然后在提交时，将click事件绑定到view model save事件，它将以单个表单post的形式发送一个包含所有子项的父模型

---

希望这有帮助。

只需使用ko.toJSON发布主视图模型。如果你在服务器端有相似的名称，它会神奇地映射到你的服务器端对象。只需像这样发布

ko.toJSON（self）

如果你的模型两端都相同，它应该可以工作，谢谢你，既然发布了这个问题，我已经解决了，您是否需要ko.mapping js文件来使用ko.mapping.Yes您将需要包括ko.mapping。使ajax请求的往返更易于管理。

ko.mapping.fromJS(allData, {} self.companies)

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

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.
        }

   }