Add text boxes data to grid temporarily using knockout.js - asp.net-mvc

Question

Html code
<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>
when I click on add button the data in the three text box should bind to grid ,
and when i click on delete button of row in grid it should disappear for this i need viewmodel.
Thanks

Answer 1

Here's a quick view model that does the requirements. I selected ContactNo as the primary key since they're supposed to be unique. You can use ids if needed instead. It would also be a good idea to run your validations before add method is called.
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>