ASP.NET MVC với mô hình điểm lồng nhau và Knockout

Question

Không thể có được bộ não của tôi xung quanh như thế nào để thực hiện loại trực tiếp sau ASP.NET MVC 4 lồng nhau xem mô hình:

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

Trong giao diện I accept mô hình như này:

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

Các EditorTemplate cho List1 sẽ trông như thế này với nhiều câu hỏi trong:

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

Sửa

VM1 qua VM10 đều giống nhau ngoại trừ logic xác nhận, vì vậy tôi phải làm cho họ các lớp học khác nhau (không may, vì nó TẤN của sự lặp lại trong các mô hình, và trong quan điểm).

Phía khách hàng - đây là những gì tôi hỏi về: Tôi cần phải chuyển từ mô hình ASP MVC chứa danh sách lồng nhau và để chúng được trình bày trên máy khách với loại bỏ (tôi thấy nó làm tốt nhất liên quan đến danh sách động). Tương tự như địa chỉ liên hệ gmail - bạn có điện thoại nhà/công việc/điện thoại di động/fax - vì vậy một danh sách là nhãn cho điện thoại (điện thoại nào) và nên được trình bày dưới dạng combobox, một danh sách khác là danh sách động của điện thoại có thể tăng theo số lần nhấp của người dùng.

End chỉnh sửa

1. Tôi không hiểu làm thế nào để tạo ra một ViewModel loại trực tiếp từ mô hình lồng nhau này, rõ ràng Tên nên là một phần của nó, nhưng phần còn lại là danh sách và họ cũng chứa danh sách.

2. Cách ánh xạ?

3. cách xử lý (một danh sách thả xuống sẽ là nhãn của danh sách khác có độ dài thay đổi - lý do duy nhất để sử dụng loại trực tiếp ở đây).?

4. sau khi điền, cách đặt tất cả lại với nhau và gửi lại cho hoạt động của bộ điều khiển?

5. cách viết mô hình trình chỉnh sửa khi nhãn là danh sách thả xuống (hoặc combobox) của nhãn cho tên (ví dụ: email [label] home/work [name], [label] mobile/home/car [name] điện thoại)

Nếu đó là lớp đơn giản với IList bên trong - giống như here. Vấn đề là có danh sách bên trong các danh sách, Knockout yêu cầu mọi thứ đều có thể quan sát được, không chắc chắn làm thế nào để thể hiện trong kịch bản lệnh java mô hình lồng ghép này.

Vui lòng trợ giúp. Cảm ơn trước!

Answer 1

Đã phải rephrase câu hỏi để giải quyết vấn đề tôi gặp phải, thay vì đặt câu hỏi chung như ở đây.

Cảm ơn rất nhiều vì những nỗ lực để trả lời, rất tiếc tôi thấy rằng nếu bạn không xây dựng câu hỏi đúng cách, bạn sẽ nhận được phản hồi chung (không cụ thể). Vì vậy, nó xấu của tôi.

Vì số lượng lớn những người quan tâm đến câu hỏi tôi đặt ra (có 5 lần bỏ phiếu trong 3 giờ đầu tiên), đây là nơi tôi hỏi cùng một câu hỏi với những vấn đề cụ thể mà tôi có và nhận được câu trả lời đúng loại trực tiếp để loại trực tiếp.

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

Hope this helps ai đó vì nó giúp tôi & nhờ một lần nữa!

Answer 2

Tôi sẽ không sử dụng ánh xạ.Tôi sẽ chỉ cần khai báo ViewModel client-side như thế này:

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

Sau đó, trên trình tôi sẽ cố gắng để trình từ jquery thay vì làm một bài http 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); 
    } 
});