使用 knockout.js 临时将文本框数据添加到网格答案

【问题标题】：Add text boxes data to grid temporarily using knockout.js使用 knockout.js 临时将文本框数据添加到网格
【发布时间】：2019-02-28 18:01:37
【问题描述】：

HTML代码

<label class="control-label">Contact Person</label>
<input class="form-control" type="text" placeholder="Enter Contact name" data-bind="value: ContactPerson" data-validate='{"required":"true"}'><br />

<label class="control-label">ContactNo</label>
<input class="form-control" type="tel" data-bind="value: ContactNo" placeholder="ContactNo" data-validate='{"required":"true"}'><br />

<label class="control-label">E-Mail</label>
<input class="form-control" type="email" data-bind="value: Email" placeholder="Email" data-validate='{"required":"true","email":"true"}'><br />

<table class="table table-hover table-bordered" id="listTable">
     <thead>
          <tr>
               <th>ContactPerson</th>
               <th>ContactNo</th>
               <th>Email</th>
               <th></th>
          </tr>
     </thead>
     <tbody data-bind="template:{name: 'Process-list', 
                                foreach: rootViewModel.BodyContent.ProcessList }">
     </tbody>
</table>

当我点击添加按钮时，三个文本框中的数据应该绑定到网格，当我单击网格中行的删除按钮时，它应该会消失，因为我需要视图模型。

谢谢

【问题讨论】：

你已经有一些视图模型代码了吗？您也可以将其添加到问题中，如果我们对其进行修改，可能会让您更容易理解，而不是我们为您提供从头开始编写的视图模型。

标签： asp.net-mvc knockout.js

【解决方案1】：

这是满足要求的快速查看模型。我选择 ContactNo 作为主键，因为它们应该是唯一的。如果需要，您可以使用 id。在调用 add 方法之前运行验证也是一个好主意。

var viewModel = function(){
  var self = this;
  self.ContactPerson = ko.observable();
  self.ContactNo = ko.observable();
  self.Email = ko.observable();
  self.ProcessList = ko.observableArray();
  self.add = function(){
    self.ProcessList.push({
      ContactPerson: self.ContactPerson(),
      ContactNo: self.ContactNo(),
      Email: self.Email(),
    });
    self.ContactPerson('');
    self.ContactNo('');
    self.Email('');
  };
  self.delete = function(data, event){
    self.ProcessList.remove(function(listObject){
      return listObject.ContactNo === data.ContactNo;
    });
  };
};

ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<label class="control-label">Contact Person</label>
<input class="form-control" type="text" placeholder="Enter Contact name" data-bind="value: ContactPerson" data-validate='{"required":"true"}'><br />

<label class="control-label">ContactNo</label>
<input class="form-control" type="tel" data-bind="value: ContactNo" placeholder="ContactNo" data-validate='{"required":"true"}'><br />

<label class="control-label">E-Mail</label>
<input class="form-control" type="email" data-bind="value: Email" placeholder="Email" data-validate='{"required":"true","email":"true"}'><br />


<button data-bind="click: add">Add Data</button>
<table class="table table-hover table-bordered" id="listTable">
     <thead>
          <tr>
               <th>ContactPerson</th>
               <th>ContactNo</th>
               <th>Email</th>
               <th></th>
          </tr>
     </thead>
     <tbody data-bind="template:{name: 'Process-list', 
                                foreach: ProcessList }">
          </tbody>
     </tbody>
</table>

<script type="text/html" id="Process-list">
  <tr>  
    <td data-bind="text: ContactPerson"></td>
    <td data-bind="text: ContactNo"></td>
    <td data-bind="text: Email"></td>
    <td><button data-bind="click: $root.delete">Delete</button></td>
  </tr>
</script>

【讨论】：