asp.net-mvc - 带有嵌套 View 模型和 Knockout 的 ASP.NET MVC

Question

不知道如何为以下 ASP.NET MVC 4 实现 knockout 嵌套 View 模型:

public class MyProfile
{
  public string Name { get; set; }

  public IList<VM1>   List1    { get; set; }
  public IList<VM2>   List2    { get; set; }
  ....
  public IList<VM10>  List10    { get; set; }
}
// example of VM view model
public class VM1
{
   IList<Label> Labels { get; set; }
   IList<Contact1> Contact1 { get; set; }
}

在 View 中，我接受这样的模型:

@model MyProfile

@using (Html.BeginForm("Index", "Profile", FormMethod.Post, new { id = "profileEditorForm" }))
{

  @Html.ValidationSummary(false)
    <fieldset>
  <legend>User's data</legend>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" class="required" data-bind="value: Name"/>
    </fieldset>

 @Html.EditorFor(m => @Model.List1, "List1") @* Editpr model for List1*@
 @Html.EditorFor(m => @Model.List2, "List2")
 .....
 @Html.EditorFor(m => @Model.List10, "List10")

 <p>
   <input type="submit" value="Save" data-bind="enable: (List1().length > 0) && (List2().length > 0) && ...(List10().length > 0)" />
<a href="/">Cancel</a>
 </p>
}

List1 的编辑器模板看起来像这样，有多个问题:

@model IList<FiveW.ViewModels.List1>

<fieldset>

  <table>
    <tbody data-bind="foreach: Contact1">
      <tr>
        <td>
          <label>Email:</label></td>
        <td>
          @* How do you put combobox here with labels here?
          How do you tie selected label to selected property on your Contact1 object *@
          @*<select data-bind="options: Labels, optionsText: 'LabelName', value: selectedLabel, optionsCaption: 'Choose...'"></select></td>
        <td>
          <input type="text" data-bind="value: Name, uniqueName: true" class="required" /></td>
        <td>
          <a href="#" data-bind="click: function() { viewModel.removeContact1(this); }">Delete</a></td>
      </tr>
    </tbody>
  </table>


  <button data-bind="click: addContact1">Add Contact1</button>

</fieldset>

编辑

VM1 到 VM10 除了验证逻辑是相同的，所以我必须让它们不同的类(不幸的是，因为它在模型和 View 中重复了很多次)。

客户端 - 这就是我要问的:
我需要从包含嵌套列表的 ASP MVC 模型传递，并将它们以 knockout 的形式呈现在客户端上(我发现它最适合动态列表)。
它类似于 gmail 联系人 - 您有家庭/工作/移动电话/传真电话 - 所以一个列表是电话的标签(它是什么电话)并且应该显示为组合框，另一个是可以增加的动态电话列表根据用户点击。

结束编辑

我不明白如何从这个嵌套模型创建一个 knockout viewModel，显然 Name 应该是它的一部分，但其余的是列表，它们也包含列表。

如何映射？

如何处理它(一个进入下拉列表，它将成为另一个列表的标签，它的长度是可变的 - 在这里使用 knockout 的唯一原因)。？

一旦填写完毕，如何将它们放在一起并返回 Controller Action ？

当标签是名称标签的下拉列表(或组合框)时，如何编写该编辑器模型(例如:[label]home/work [name]email, [label]mobile/home/car [name]phone)

如果它是简单的类 IList里面 - 就像 here .问题是list里面有list，Knockout要求一切都是observable的，不知道怎么用java script表达这个嵌套模型。

请帮忙。提前致谢!

Answer 1

我不会使用映射。我会像这样声明 ViewModel 客户端:

//I'm asuming the properties for Label and Contact, this is just for example purposes
function LabelViewModel(){
    var self = this;
    self.LabelName = ko.observable();
}
function Contact(){
    var self = this;
    self.Name = ko.observable();
    self.LastName = ko.observable();
}

//This is the definition for the List. I believe it shouldn't matter that the class names are different as long as the structure is the same
function ListViewModel(){
    var self = this;
    self.Labels = ko.observableArray();
    self.Contacts = ko.observableArray();
}

function MainViewModel(){
    var self = this;
    self.Name = ko.observable();
    self.List1 = ko.observableArray();
    //....
    self.List10 = ko.observableArray();
}


$(document).ready(function(){
    var viewModel = new MainViewModel(@Html.Raw(JsonConvert.SerializeObject(Model)));
    ko.applyBindings(viewModel);
});

然后，在提交时，我会尝试从 jquery 提交，而不是直接进行 http 发布:

var viewModelJs = ko.toJS(ko.utils.unwrapObservable(viewModel));
var parameters = JSON.stringify({vm: viewModelJs});

$.ajax('http://yourControllerUrlHere', {
    data: parameters,
    type: "POST",
    contentType: "application/json",
    dataType: "json",
    success: function (result) {
        console.log('Submitted ok');
    },
    error: function (error) {
        console.log(error);
    }
});