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());

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