Question

我正在编写一个asp.net MVC应用程序并决定尝试使用Knockout.js来获取动态UI内容。到目前为止，它是一个很好的框架，它帮助了我很多。

但是我遇到了两个问题，我无法解决这个问题并找到有用的信息。我将从代码开始向您展示我的内容，然后我将尝试解释我想要实现的目标。

C＃ViewModel

我的HTML / Razor和淘汰模块

＆＃13;

var Project = function (project) {
	var self = this;
	self.Id = ko.observable(project ? project.Id : 0);
	self.CustumerCompany = ko.observable(project ? project.CustumerCompany : "");
	self.CustomerRepresentative = ko.observable(project ? project.CustomerRepresentative : "");
	self.ProjectTitle = ko.observable(project ? project.ProjectTitle : "");
	self.WWSNumber = ko.observable(project ? project.WWSNumber : "");
	self.AqStatus = ko.observable(project ? project.AqStatus : "");
	self.Completed = ko.observable(project ? project.Completed : "");
	self.StartDate = ko.observable(project ? project.StartDate : "");
	self.EndDate = ko.observable(project ? project.EndDate : "");
	self.ProjectLeader = ko.observable(project ? project.ProjectLeader : "");
	self.Deputy = ko.observable(project ? project.Deputy : "");
	self.SalesConsultant = ko.observable(project ? project.SalesConsultant : "");
	self.Service = ko.observableArray(project ? project.Service : []);
};

var ProjectService = function (projectService) {
	var self = this;
	self.Id = ko.observable(projectService ? projectService.Id : 0);
	self.Number = ko.observable(projectService ? projectService.Number : "");
	self.Name = ko.observable(projectService ? projectService.Name : "");
	self.Positions = ko.observableArray(projectService ? projectService.Positions : []);
};

var ServicePosition = function (servicePosition) {
	var self = this;
	self.Id = ko.observable(servicePosition ? servicePosition.Id : 0);
	self.Number = ko.observable(servicePosition ? servicePosition.Number : "");
	self.Name = ko.observable(servicePosition ? servicePosition.Name : "");
	self.PerformanceGroup = ko.observable(servicePosition ? servicePosition.PerformanceGroup : "");
	self.PerformanceGroupPrice = ko.observable(servicePosition ? servicePosition.PerformanceGroupPrice : "");
	self.Remarks = ko.observable(servicePosition ? servicePosition.Remarks : "");
};

var ProjectCollection = function () {
	var self = this;

	self.project = ko.observable(new Project());
	self.projectServices = ko.observableArray([new ServicePosition()]);
	self.servicePositions = ko.observableArray([new ServicePosition()]);

	self.addService = function () {
		self.projectServices.push(new ProjectService());
		console.log(self.projectServices);
	};
	self.removeService = function (projectService) {
		self.projectServices.remove(projectService);
	};



	self.saveProject = function () {
		self.project().Service = self.projectServices;
		console.log(self.projectServices);
		console.log(self.project());

		var token = $('[name=__RequestVerificationToken]').val();

		$.ajax({
			type: "POST",
			url: "/LeistungManager/CreateProject",
			data: { __RequestVerificationToken: token, model: ko.toJS(self.project()) },
			dataType: "json",
			cache: false,
			async: true,
			success: function (response) {

			},
			complete: function (response) {
				console.log(response);
			}
		});
	};

};
ko.applyBindings(new ProjectCollection());

＆＃13;

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

＆＃13;

我的结果类似于

问题Nr 1

当我输入所有信息并添加少量项目服务项目时，我的控制器会收到模型，但服务的属性是空的，我无法弄清楚原因？我做错了什么？

问题Nr 2

在“项目服务”面板（参见设计屏幕截图）旁边，我将构建另一个几乎相同的面板，但在该窗口中，相同的“添加到列表”功能应取决于我在“项目服务面板”中选择的项目。例如：

如果我在右侧的“项目服务”面板中选择了第一项，则应显示带有“添加”按钮的面板，这样我就可以将项目放到另一个列表中。在我将信息放到一个项目后，我可以选择另一个并放在那里，面板应根据项目服务选择进行更新。我无法在任何地方找到示例，文章或教程如何实现这种结果。任何形式的帮助都会有所帮助！

Answer 1

经过一段时间阅读文档后，我设法解决了我的问题。所以这里工作JS代码HTML与我的问题相同：

＆＃13;

Boolean(String)

＆＃13;

神奇的是创建 selectedServiceData 可观察变量，并在点击按钮时将其传递给 selectPosition 功能。之后，我可以使用选定的Item数组和数据。

如果有人需要更详细的解释或帮助代码 - 请告诉我。

Answer 2

致你的：

问题1 您可以在ajax请求中添加contentType: 'application/json;'，以便控制器了解如何解析您的请求。

问题2 以您的代码为例，请参阅此fiddle。您可以查看此documentation，以便了解使用不同绑定上下文的位置。

使用Knockout.js发布集合

2 个答案: