Geek Answers Handbook

ASP.NET MVC with a nested view model and knockout

It is impossible to understand how to implement a knockout for the following ASP.NET MVC 4 submission model:

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

In the view, I accept the model as follows:

 @model MyProfile @using (Html.BeginForm("Index", "Profile", FormMethod.Post, new { id = "profileEditorForm" })) { @Html.ValidationSummary(false) <fieldset> <legend>User 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> }

The EditorTemplate for List1 will look like this:

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

Edit

VM1 through VM10 are the same except for the verification logic, so I have to make them different classes (unfortunately, since these are TONS repetitions in models and in representations).

The client side is what I ask: I need to switch from ASP MVC models containing nested lists and present them on the client with a knockout (I found that it is best suited for dynamic lists). This is something similar to gmail contacts - you have a home / work / mobile / fax phone, so one list is a shortcut for the phone (which phone), and it should be presented as combobox, the other is dynamic lists of phones that may increase as the user clicks.

End editing

  • I donโ€™t understand how to create a knockout of viewModel from this nested model, it is obvious that Name should be part of this, but the rest are lists, and they also contain lists.

  • How to match it?

  • how to handle it (one is on the drop-down list, which will be a shortcut to another list, which is variable length - the only reason for using knockout here)

  • after filling, how to put it all together and send it back to the controller?

  • how to write this editor model when the label is a drop-down list (or combobox) of labels for the name (example: [label] home / work [name] email, [label] mobile / home / car [name] phone)

If it was a simple class with an IList inside - it's like here . The problem is that there are lists inside the lists, knockout requires that everything is observed, not sure how to express this nesting model in a java script.

Please, help. Thanks in advance!

+6
source share
2 answers

I had to rephrase the question to highlight the question that I had, instead of asking a general question, as here.

Thank you so much for the effort to answer, unfortunately, I find that if you do not formulate your questions correctly, you will receive accordingly general (non-specific) answers. So this is my bad.

Due to the large number of people interested in the question I asked (in the first 3 hours there were 5 changes), this is where I asked the same question with stress on specific questions that I had, and got the right answer and got my knockout for knockout again.

ASP.NET with knockout variable length list with combobox - how to link?

Hope this helps someone as it helped me and thanks again!

0
source

I would not use mapping. I would just declare the ViewModel client side as follows:

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

Then, when sending, I will try to send from jquery instead of doing an http message:

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

More articles:


All Articles