创建具有属性列表的对象并将其传递给控制器

Question

也许我的问题有一个简单的解决方案，但我似乎根本找不到它。我已经阅读了很多关于 Knockout 的教程，所以我了解了基础知识，但我问了这个问题，因为我的实体结构比一个有名字和朋友列表的人要复杂一些，这些人可能在也可能不在 Twitter （Channel9 上的视频：Helping you build dynamic JavaScript UIs with MVVM and ASP.NET）。这是我的情况：

我有一个具有以下基本结构的类 PersonnelClass：

[Serializable]
//The interface is for the implementation of 'Name' and 'Description'
public class PersonnelClass : IPersonnelClassOrPerson 
{
    public PersonnelClass() : this(Guid.NewGuid(), "", "") { }

    public PersonnelClass(Guid id, String name, String description = null)
    {
        if (id == Guid.Empty) { throw new ArgumentNullException("id"); }
        Id = id;
        Name = name;
        Description = description;
        Properties = new PropertyCollection();
    }

    public Guid Id { get; private set; }
    public String Name { get; set; }
    public String Description { get; set; }
    public PropertyCollection Properties { get; private set; }
}

PropertyCollection 类和相关的 AbstractProperty 类如下所示：

[Serializable]
public class PropertyCollection: List<AbstractProperty> { }

[Serializable]
public abstract class AbstractProperty: IEntity, IProperty
{
    public AbstractProperty(String name, String description = null) : this(Guid.NewGuid(), name, description) { }

    public AbstractProperty(Guid id, String name, String description = null)
    {
        if (id == Guid.Empty) { throw new ArgumentNullException("id"); }
        if (String.IsNullOrEmpty(name)) { throw new ArgumentNullException("name"); }
        Id = id;
        Name = name;
        Description = description;
    }

    public Guid Id { get; private set; }
    public String Name { get; private set; }
    public String Description { get; private set; }
}

在我的控制器中，我创建了一个具有以下结构的 PersonnelClassViewModel 实例：

public class PersonnelClassViewModel
{
    public PersonnelClass PersonnelClass { get; set; }
    public List<AbstractProperty> Properties { get; set; }
}

我用一个新的 PersonnelClass 和两个测试属性填充这个视图模型，以便像这样传递给我的视图：

var properties = new List<AbstractProperty>
{
    new TextProperty("prop1", "descr1"),
    new TextProperty("prop2", "descr2")
    //TextProperty is derived from AbstractProperty
};
var vm = new PersonnelClassViewModel { Properties = properties };
return View(vm);

我想要的一切都在我的视图中。从视图中，我想创建一个具有一组选定属性的新 PersonnelClass。我有名称和描述字段并添加属性我有一个列表框，其中包含已经存在的属性（出于演示目的，它们现在来自控制器）。通过一些 Knockout JavaScript 代码，我可以从该列表中选择项目并使用所选属性填充 HTML select-control () 以添加到 PersonnelClass。这一切都很好，直到我想建立一个对象传回控制器并创建 PersonnelClass。

我的问题是：需要什么 Knockout JS 代码来构建这个对象并通过提交表单将它传递给控制器​​，在我的控制器中我应该如何接收这个对象，意思是：什么类型对象应该是 (PersonnelClass, PersonnelClassViewModel, ...) 吗？

如果需要更多信息/代码，请询问。提前致谢！

回答“B Z”后更新：

我遵循了更多关于此的 Steven Sanderson 的教程，以确保我理解这一点，尤其是您在答案中提供的那个。现在我的视图中有以下代码：

var initialData = @Html.Raw(new JavaScriptSerializer().Serialize(Model));

var viewModel = {
    personnelClassViewModel : ko.mapping.fromJS(initialData),
    properties : personnelClassViewModel.Properties,
    selectedProperties : ko.observableArray([]),
    addedProperties : ko.observableArray([])
};

ko.applyBindings(viewModel);

变量“initialData”包含我期望它具有的值，但随后出现以下错误：

Microsoft JScript 运行时错误：“personnelClassViewModel”未定义

我已经不知道了。谁能帮我解决这个问题？

Answer 1

Steven Sanderson 有一个如何使用可变长度列表和 knockoutjs 的示例

http://blog.stevensanderson.com/2010/07/12/editing-a-variable-length-list-knockout-style/

话虽如此，我认为您的问题不在于淘汰赛方面，而在于如何在服务器端正确地对数据进行数据绑定。在上面的链接中，Steven 使用 FromJson 属性来建模绑定，您可能会发现这很有用...

HTH