6
저는 asp.net MVC 애플리케이션을 작성 중이며 동적 UI 항목에 Knockout.js를 사용하기로 결정했습니다. 지금까지 많은 도움이 된 훌륭한 프레임 워크입니다.Knockout.js로 게시하기
하지만 나는 해결할 수없는 두 가지 문제에 직면하여 유용한 정보를 찾았습니다. 내가 가지고있는 것을 보여주기 위해 코드로 시작한 다음, 내가 성취하고자하는 것을 설명하려고 노력할 것입니다.
C#의 ViewModel
내 HTML/라 Zor의 녹아웃 모듈
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>내 결과를 보인다
문제점 수 (Nr) (1)
W 등 암탉 나는 모든 정보를 입력하고 몇 가지 프로젝트 서비스 항목을 추가하면 내 컨트롤러 모델을 수신하지만 서비스의 속성은 비어 있으며 이유를 파악할 수 없습니까? 내가 뭘 잘못하고있어?
문제 수 (Nr) 2
다음 서비스 패널 (디자인의 스크린 샷 참조) 나는 다른 거의 같은 패널을 구축 할 것입니다하지만 윈도우에서 동일 의존해야 기능을 목록에 추가로 Project 프로젝트 서비스 패널에서 항목을 선택합니다. 예 :
오른쪽에있는 프로젝트 서비스 패널의 첫 번째 항목을 선택하면 ADD 버튼이 패널에 표시되어 항목을 다른 목록에 추가 할 수 있습니다. 한 항목에 정보를 입력하면 다른 항목을 선택하고 거기에 배치 할 수 있으며 프로젝트 서비스 선택에 따라 패널을 업데이트해야합니다. 나는 이런 종류의 결과를 어떻게 달성 할 수 있는지 예제, 기사 또는 튜토리얼을 찾을 수 없다. 도움이되는 모든 종류의 도움! 당신을 위해
컨트롤러가 요청을 구문 분석하는 방법을 알아야합니다. 당신은 당신의 ajax 옵션에서'contentType : 'application/json;'을 사용할 수있다. – janmvtrinidad
이것도 알고 있습니다. –
contentType : 'application/json'을 설정하고 데이터를 문자열 화해야합니다. 'data : JSON.stringify ({__RequestVerificationToken : token, model : ko.toJS (self.project())} })'http://stackoverflow.com/questions/14591437/deserialising-json-into-nested-view-model-in-controller를 참조하십시오. 'dataType'은 서버로부터 데이터를받을 때 ** 관련 **입니다. 데이터를 보낼 때'contentType'을 설정해야합니다 – nemesv