ASP.NET MVC mit verschachteltem View-Modell und Knockout

Question

können nicht mein Gehirn um bekommen, wie Knockout zu implementieren für das folgende ASP.NET MVC 4 verschachteltes View-Modell:

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

Nach Ansicht Ich akzeptiere Modell wie dies:

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

Die EditorTemplate für List1 aussehen würde dies mit mehreren Fragen in:

@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> 

bearbeiten

VM1 durch VM10 sind die gleichen mit Ausnahme der Validierungslogik, also muss ich sie verschiedene Klassen machen (leider, da es TONNEN Wiederholung in Modellen und in den Ansichten).

Seite Kunde - das ist, was ich frage nach: ich von ASP MVC-Modellen übergeben muß verschachtelte Listen enthalten, und haben sie auf dem Client mit Knockout vorgestellt (ich fand es am besten im Zusammenhang dynamische Listen zu tun). Es ist etwas ähnlich wie Google Mail-Kontakte - Sie haben zu Hause/Arbeit/Handy/Fax-Telefon - so eine Liste ist Label für das Telefon (welches Telefon ist es) und sollte als Combobox präsentiert werden, ist eine andere dynamische Listen von Telefonen, die können Erhöhen Sie die Anzahl der Klicks pro Nutzer.

Ende bearbeitet

1. Ich verstehe nicht, wie ein Knockout Ansichtsmodell von diesem verschachtelten Modell erstellen, natürlich sollten Namen einen Teil davon sein, aber der Rest sind Listen und sie enthalten auch Listen.

2. Wie man es abbildet?

3. wie man damit umgeht (man geht in Dropdown-Liste, die die Bezeichnung der anderen Liste sein wird, die in der Länge variabel ist - der einzige Grund, Knockout hier zu verwenden).?

4. einmal ausgefüllt, wie alles zusammen zu setzen und zurück zu Controller Aktion?

5. Wie schreibe ich das Editor-Modell, wenn Label Dropdown-Liste (oder Combobox) von Labels für den Namen ist (Beispiel ist: [Label] Home/Arbeit [Name] E-Mail, [Label] Mobile/Home/Auto [Name] Telefon)

Wenn es war einfach Klasse mit IList innen - wie seine here. Problem ist, dass es Listen innerhalb von Listen gibt, Knockout verlangt, dass alles beobachtbar ist, nicht sicher, wie man dieses Verschachtelungsmodell in Java-Script ausdrückt.

Bitte helfen. Danke im Voraus!

Answer 1

hatte die Frage umformulieren um das Problem, das ich hatte, herauszufiltern, anstatt allgemeine Fragen wie hier zu stellen. Sie erhalten jeweils gemeinsame (nicht spezifisch) Antworten

Großer Dank für die Bemühungen zu beantworten, leider finde ich, dass, wenn Sie Ihre Fragen nicht richtig formulieren. So ist es mein schlechtes.

Aufgrund der großen Anzahl von Menschen, die an der Frage interessiert waren (es gab 5 upvotes in den ersten 3 Stunden), hier ist, wo ich die gleiche Frage mit Betonung auf spezifische Probleme hatte ich und bekam die richtige Antwort und bekam meine Knockout, um wieder KO zu machen.

ASP.NET with Knockout variable length list with combobox - how to bind?

hoffe, das hilft jemand, wie es mir & Dank wieder geholfen!

Answer 2

Ich würde keine Zuordnung verwenden.Ich würde erklären, nur die Ansichtsmodell Client-Seite wie folgt aus:

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

Dann auf übermittle ich versuchen würde, von Jquery zu unterbreiten, anstatt eine http Post zu tun directily:

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