Generate table automatically with c # and mvc

Question

Generate table automatically with c # and mvc

Navigation

#1 by (1 votes)

0

how to do the following (I do not have code yet). On the page, I have a table with a Row and 5 Columns and at the end of the table a button (+) and under the table a save button. The question is when I click the (+) button, 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 is wide, I can break it, but it's just an idea how to do it, so I do not find it ample. This will be done using MVC, Bootstrap and AngularJS (This is not sure as it is the client who decides this).

html angularjs c# twitter-bootstrap asp.net-mvc

asked by anonymous 06.04.2018 / 14:51

1 answer

Execute js Service Worker function even with the browser closed or minimized List ftp folder with php

score 1 · Accepted Answer

To do this with angularJS you can control events by steering through your model data. 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><divng-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>