Piszę aplikację asp.net MVC i postanawiam wypróbować Knockout.js dla dynamicznego interfejsu użytkownika. To świetne ramy, które pomogły mi tak bardzo.Wysyłanie kolekcji z Knockout.js
Ale stanąłem w obliczu 2 problemów, których nie mogę rozwiązać i znaleźć żadnych przydatnych informacji na ten temat. Zacznę od kodu, aby pokazać, co mam, a następnie spróbuję wyjaśnić, co chcę osiągnąć.
C# ViewModel
Moje HTML/Ra Zor i nokaut Moduł
var Project = function (project) {
\t var self = this;
\t self.Id = ko.observable(project ? project.Id : 0);
\t self.CustumerCompany = ko.observable(project ? project.CustumerCompany : "");
\t self.CustomerRepresentative = ko.observable(project ? project.CustomerRepresentative : "");
\t self.ProjectTitle = ko.observable(project ? project.ProjectTitle : "");
\t self.WWSNumber = ko.observable(project ? project.WWSNumber : "");
\t self.AqStatus = ko.observable(project ? project.AqStatus : "");
\t self.Completed = ko.observable(project ? project.Completed : "");
\t self.StartDate = ko.observable(project ? project.StartDate : "");
\t self.EndDate = ko.observable(project ? project.EndDate : "");
\t self.ProjectLeader = ko.observable(project ? project.ProjectLeader : "");
\t self.Deputy = ko.observable(project ? project.Deputy : "");
\t self.SalesConsultant = ko.observable(project ? project.SalesConsultant : "");
\t self.Service = ko.observableArray(project ? project.Service : []);
};
var ProjectService = function (projectService) {
\t var self = this;
\t self.Id = ko.observable(projectService ? projectService.Id : 0);
\t self.Number = ko.observable(projectService ? projectService.Number : "");
\t self.Name = ko.observable(projectService ? projectService.Name : "");
\t self.Positions = ko.observableArray(projectService ? projectService.Positions : []);
};
var ServicePosition = function (servicePosition) {
\t var self = this;
\t self.Id = ko.observable(servicePosition ? servicePosition.Id : 0);
\t self.Number = ko.observable(servicePosition ? servicePosition.Number : "");
\t self.Name = ko.observable(servicePosition ? servicePosition.Name : "");
\t self.PerformanceGroup = ko.observable(servicePosition ? servicePosition.PerformanceGroup : "");
\t self.PerformanceGroupPrice = ko.observable(servicePosition ? servicePosition.PerformanceGroupPrice : "");
\t self.Remarks = ko.observable(servicePosition ? servicePosition.Remarks : "");
};
var ProjectCollection = function() {
\t var self = this;
\t self.project = ko.observable(new Project());
\t self.projectServices = ko.observableArray([new ServicePosition()]);
\t self.servicePositions = ko.observableArray([new ServicePosition()]);
\t self.addService = function() {
\t \t self.projectServices.push(new ProjectService());
\t \t console.log(self.projectServices);
\t };
\t self.removeService = function (projectService) {
\t \t self.projectServices.remove(projectService);
\t };
\t self.saveProject = function() {
\t \t self.project().Service = self.projectServices;
\t \t console.log(self.projectServices);
\t \t console.log(self.project());
\t \t var token = $('[name=__RequestVerificationToken]').val();
\t \t $.ajax({
\t \t \t type: "POST",
\t \t \t url: "/LeistungManager/CreateProject",
\t \t \t data: { __RequestVerificationToken: token, model: ko.toJS(self.project()) },
\t \t \t dataType: "json",
\t \t \t cache: false,
\t \t \t async: true,
\t \t \t success: function (response) {
\t \t \t },
\t \t \t complete: function (response) {
\t \t \t \t console.log(response);
\t \t \t }
\t \t });
\t };
};
ko.applyBindings(new ProjectCollection());<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class="row">
<div class="col-md-6">
<div class="widget">
<div class="widget-heading">
<h3 class="widget-title">Project Services</h3>
<div>
<form class="form-inline">
<p>
<div class="form-group">
<label>WWS-Number</label>
<input class="form-control" placeholder="Number" data-bind="value: $root.Number" />
<label>WWS-Number</label>
<input class="form-control" placeholder="Name" data-bind="value: $root.Name" />
<button class="btn btn-primary" data-bind="click: addService">Add</button>
</div>
</p>
</form>
</div>
</div>
<div class="widget-body">
<table data-bind="visible: projectServices().length > 0 " class="table">
<thead>
<tr>
<th>
Number
</th>
<th>
Service Name
</th>
<th>
</th>
</tr>
</thead>
<tbody data-bind="foreach: projectServices">
<tr>
<td data-bind="text: $parent.Number"></td>
<td data-bind="text: $parent.Name"></td>
<td>
<button class="btn btn-success">Edit</button>
<button class="btn btn-danger" data-bind="click: $root.removeService">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>Moja Wynik wygląda
Problem nr 1
W. Czy wprowadzam wszystkie informacje i dodam kilka elementów usług projektowych do kontrolera odbierającego, ale właściwości usługi są puste i nie mogę się domyślić, dlaczego? Co robię źle?
Problem Nr 2
Następny do projektu panel serwisowy (zobaczyć projekt ekranu) zbuduję inny niemal tego samego panelu, ale w tym oknie samo Dodaj do listy funkcjonalności powinny zależeć na którą pozycję wybieram w panelu usług projektu. Na przykład:
Po wybraniu pierwszego elementu w panelu Usługi projektu po prawej stronie powinien pojawić się panel z przyciskiem DODAJ, aby umieścić przedmiot na innej liście. Po umieszczeniu informacji w jednym elemencie mogę wybrać inny i umieścić go, a panel powinien zaktualizować w oparciu o wybór Usługi projektu. Nie mogę znaleźć nigdzie przykładu, artykułu lub samouczka, jak osiągnąć ten rodzaj wyniku. Wszelka pomoc z pomocą!
Sterownik musi wiedzieć, jak przeanalizować żądanie. możesz użyć 'contentType: 'application/json;' 'w twojej opcji ajax. – janmvtrinidad
To zna i bez tego –
Naprawdę trzeba ustawić contentType: "application/json" i stringify swoje dane, więc 'dane: JSON.stringify ({__RequestVerificationToken: token, model: ko.toJS (self.project()) }) zobacz http://stackoverflow.com/questions/14591437/deserialising-json-into-nested-view-model-in-controller. 'dataType' jest ** only ** istotne, gdy otrzymujesz dane z serwera. Podczas wysyłania danych należy ustawić "contentType" – nemesv