Generate table automatically with c# and mvc

Question

how to do the following (I don’t have code yet). On the page, I have a table with a Row and 5 Columns and at the end of Table a button (+) and at the bottom of the table a save button. The question is when I click the button (+), I should create another table in the same way and also with the save button and this time, under the button (+) a button(-). How do I do that? If the question has become broad, I can break it, but it’s just an idea on how to do it, so I didn’t find it broad. This will be done in using MVC, Bootstrap and Angularjs(This one I’m not sure because it’s the client who decides this).

Answer 1

To do this with Angularjs you can control events by being guided by the data of your model. Example:

var app = angular.module("dmExample", []);

app.controller('dmExampleCtrl', function($scope) {

  $scope.tables = [
    [
      {id: 1, dado1: "Dados 1", dado2: "Dados 1", dado3: "Dados 1", dado4: "Dados 1"},
      {id: 2, dado1: "Dados 2", dado2: "Dados 2", dado3: "Dados 2", dado4: "Dados 2"},
      {id: 3, dado1: "Dados 3", dado2: "Dados 3", dado3: "Dados 3", dado4: "Dados 3"},
      {id: 4, dado1: "Dados 4", dado2: "Dados 4", dado3: "Dados 4", dado4: "Dados 4"},
      {id: 5, dado1: "Dados 5", dado2: "Dados 5", dado3: "Dados 5", dado4: "Dados 5"}
    ]
  ];
  
  $scope.addTable = function() {
    $scope.tables.push(angular.copy($scope.tables[$scope.tables.length - 1]));
  }
  
  $scope.removeTable = function(id) {
    $scope.tables.splice(id, 1);
  }

});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="dmExample" ng-controller="dmExampleCtrl">

<div ng-repeat="table in tables" class="table table-stripped">
<table>
  <thead>
    <tr>
      <th>ID</th>
      <td>Título 1</td>
      <td>Título 2</td>
      <td>Título 3</td>
      <td>Título 4</td>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in table">
      <th>{{ row.id }}</th>
      <td>{{ row.dado1 }}</td>
      <td>{{ row.dado2 }}</td>
      <td>{{ row.dado3 }}</td>
      <td>{{ row.dado4 }}</td>
    </tr>
  </tbody>
</table>
<button class="btn btn-danger" ng-click="removeTable($index)" ng-show="tables.length > 1">Remover Tabela</button>
</div>

<button class="btn btn-primary" ng-click="addTable()">Nova Tabela</button>

</div>