在Bootstrap弹出窗口中显示嵌套的子表记录按钮单击

Question

如果我们单击子立场，可以在弹出窗口上输入值之后打开一个弹出窗口，我们可以

在单击父行中单击添加函数后关闭该窗口。值可以

在表格格式中显示在该顺序值

中的上述行i需要在弹出窗口上显示订单值。

以下代码在AngularJs中，这正是我想要的，但是当我提交数据时，有人可以将所有数据传递给ASP.NET Core Controller时，可以将相同的结果转换为无角。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
  var app = angular.module('MyApp', [])
  app.controller('MyController', function($scope, $window) {
    $scope.Customers = [{
      Name: "John Hammond",
      Country: "United States",
      Orders: [{
          OrderId: 10248,
          Freight: 32.38,
          ShipCountry: 'France'
        },
        {
          OrderId: 10249,
          Freight: 12.43,
          ShipCountry: 'Japan'
        },
        {
          OrderId: 10250,
          Freight: 66.35,
          ShipCountry: 'Russia'
        }
      ]
    }];

    $scope.Orders = [];
    $scope.Add = function() {
      var customer = {};
      customer.Name = $scope.Name;
      customer.Country = $scope.Country;
      customer.Orders = $scope.Orders;
      $scope.Customers.push(customer);
      $scope.Orders = [];
      $scope.Name = "";
      $scope.Country = "";
    };
    $scope.add2 = function() {

      var items = {};
      items.OrderId = $scope.OrderId;
      items.Freight = $scope.Freight;
      items.ShipCountry = $scope.ShipCountry;
      $scope.Orders.push(items);
      $scope.OrderId = "";
      $scope.Freight = "";
      $scope.ShipCountry = "";
    }
    $scope.Remove = function(index) {
      var name = $scope.Customers[index].Name;
      if ($window.confirm("Do you want to delete: " + name)) {
        $scope.Customers.splice(index, 1);
      }
    }
    $scope.remove1 = function(index) {
      var name = $scope.Orders[index].OrderId;
      if ($window.confirm("Do you want to delete: " + name)) {
        $scope.Orders.splice(index, 1);
      }
    }
  });
</script>
<div ng-app="MyApp" ng-controller="MyController">
  <table cellpadding="0" cellspacing="0">
    <tr>
      <th>
        Name
      </th>
      <th>
        Country
      </th>
      <th>
        Orders
      </th>
      <th>
        &nbsp;
      </th>
    </tr>
    <tbody ng-repeat="m in Customers">
      <tr>
        <td>
          <input type="text" value="{{m.Name}}" />
        </td>
        <td>
          <input type="text" value="{{m.Country}}" />
        </td>
        <td value="{{m.subitems}}">
          <button type="button" class="btn btn-primary" ng-init="clicked=false" ng-click="clicked=!clicked">
                        View Orders</button>
          <div class="modal fade in" aria-hidden="false" style="display: block;" ng-show="clicked">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" ng-click="clicked=false">
                                        ×</button>
                  <h4 class="modal-title">
                    Order Details</h4>
                </div>
                <div class="modal-body">
                  <table class="table table-condensed">
                    <thead>
                      <tr style="padding-left: 10px; padding-right: 10px;" class="active">
                        <th class="thick-line" style="padding-left: 10px; padding-right: 20px; padding-top: 6px;
                                                    padding-bottom: 6px;">
                          OrderId
                        </th>
                        <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                          Freight
                        </th>
                        <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                          ShipCountry
                        </th>
                        <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                        </th>
                      </tr>
                    </thead>
                    <tbody ng-repeat="o in m.Orders">
                      <tr>
                        <td>
                          {{o.OrderId}}
                        </td>
                        <td>
                          {{o.Freight}}
                        </td>
                        <td>
                          {{o.ShipCountry}}
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-primary" ng-click="clicked=false">
                                        Ok</button>
                </div>
              </div>
            </div>
          </div>
        </td>
        <td>
          <input type="button" ng-click="Remove($index)" value="Remove" class="btn btn-danger" />
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>
          <input type="text" ng-model="Name" />
        </td>
        <td>
          <input type="text" ng-model="Country" />
        </td>
        <td>
          <button type="button" class="btn btn-primary" ng-model="subitems" data-toggle="modal" data-target="#popup">
                        Add Orders</button>
        </td>
        <td>
          <input type="button" ng-click="Add()" class="btn btn-primary" value="Add" />
        </td>
      </tr>
    </tfoot>
  </table>
  <div class="modal fade" id="popup" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">
                        ×</button>
          <h4 class="modal-title">
            Modal Header</h4>
        </div>
        <div class="modal-body">
          <div class="s2vk-container">
            <div class="row">
              <div class="col-md-8">
                <div class="panel panel-default">
                  <table class="table table-condensed">
                    <thead>
                      <tr style="padding-left: 10px; padding-right: 10px;" class="active">
                        <th class="thick-line" style="padding-left: 10px; padding-right: 20px; padding-top: 6px;
                                                    padding-bottom: 6px;">
                          OrderId
                        </th>
                        <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                          Freight
                        </th>
                        <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                          ShipCountry
                        </th>
                        <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr style="padding-left: 20px; padding-right: 20px;" ng-model="myData2" ng-repeat="subitem in Orders">
                        <td>
                          {{subitem.OrderId}}
                        </td>
                        <td>
                          {{subitem.Freight}}
                        </td>
                        <td>
                          {{subitem.ShipCountry}}
                        </td>
                        <td>
                          <button type="button" class="btn btn-sm btn-danger" ng-click="remove1($index)" readonly="readonly">
                                                        Delete</button>
                        </td>
                      </tr>
                    </tbody>
                    <tfoot>
                      <tr style="padding-left: 20px; padding-right: 20px;">
                        <td>
                          <input type="text" class="input-sm form-control" ng-model="OrderId" />
                        </td>
                        <td>
                          <input type="text" class="input-sm form-control" ng-model="Freight" />
                        </td>
                        <td>
                          <input type="text" class="input-sm form-control" ng-model="ShipCountry" />
                        </td>
                        <td>
                          <button type="button" class="btn btn-primary" ng-click="add2()">
                                                        Add</button>
                        </td>
                      </tr>
                    </tfoot>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
                        Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

我尝试使用jQuery实现相同的功能。 HTML包含HTML和模态的标记。操作是在JavaScript中进行的。

不是最好的代码，但应该给出一个想法。

当用户单击提交时，您可以将CART或cart.customers发送到ASP.NET控制器。

class Customer {
  constructor(name, country, orders) {
    this.Name = name;
    this.Country = country;
    this.Orders = orders;
  }

  addOrder(id, frieght, shiptCountry) {
    var order = {};
    order.OrderId = id;
    order.Freight = frieght;
    order.ShipCountry = shiptCountry;

    this.Orders.push(order);
  }

  removeOrder(index) {
    var name = this.Orders[index].OrderId;
    if (confirm("Do you want to delete: " + name)) {
      this.Orders.splice(index, 1);
    }
  }
}

var c = new Customer('John Hammond', 'United States', [{
    OrderId: 10248,
    Freight: 32.38,
    ShipCountry: 'France'
  },
  {
    OrderId: 10249,
    Freight: 12.43,
    ShipCountry: 'Japan'
  },
  {
    OrderId: 10250,
    Freight: 66.43,
    ShipCountry: 'Russia'
  }
]);

var cart = {
  customers: new Array(c),
  add: function(name, country, orders) {
    var customer = new Customer(name, country, orders);
    this.customers.push(customer);
  },
  remove: function(index) {
    var name = this.customers[index].Name;
    if (confirm("Do you want to delete: " + name)) {
      this.customers.splice(index, 1);
    }
  }
};

function updateContent() {
  $('#tableBody').html('');

  cart.customers.forEach(function(element, index) {


    $('#tableBody').append('<tr></tr>');
    $('#tableBody tr:last').append('<td><input type="text" value="' + element.Name + '" /></td>');
    $('#tableBody tr:last').append('<td><input type="text" value="' + element.Country + '" /></td>');
    $('#tableBody tr:last').append('<td><button type="button" class="btn btn-primary" data-index="' + index + '" data-toggle="modal" data-target="#popup">View Orders</button></td>');
    $('#tableBody tr:last').append('<input type="button" data-index="' + index + '" value="Remove" class="btn btn-danger btnRemoveCust" />');
  });

  $('.btnRemoveCust').click(function() {
    var index = $(this).data('index');
    cart.remove(index);
    updateContent();
  });

};

updateContent();
var currentOrders = [];

$('#btnAdd').click(function() {
  var name = $('#txtName').val();
  var country = $('#txtCountry').val();

  cart.add(name, country, currentOrders);
  $('#txtName').val('');
  $('#txtCountry').val('');
  currentOrders = [];

  updateContent();
});



$('#popup').on('show.bs.modal', function(event) {
  var source = $(event.relatedTarget);
  var index = source.data('index');
  var orders = [];
  if (index === -1) {
    //Customer is not yet created. Use currentOrder
    current = true;
    orders = currentOrders;
    $(this).find('tfoot').show();
  } else {
    current = false;
    orders = cart.customers[index].Orders;
    $(this).find('tfoot').hide();
  }

  updatePopUp($(this), orders, current);
});

function updatePopUp(modal, orders) {
  modal.find('tbody').html('');
  if (orders) {
    orders.forEach(function(element, index) {

      modal.find('tbody').append('<tr style="padding-left: 20px; padding-right: 20px;" ></tr>');
      modal.find('tbody tr:last').append('<td><input type="text" class="input-sm form-control" readonly value="' + element.OrderId + '" /></td>');
      modal.find('tbody tr:last').append('<td><input type="text" class="input-sm form-control" readonly value="' + element.Freight + '" /></td>');
      modal.find('tbody tr:last').append('<td><input type="text" class="input-sm form-control" readonly value="' + element.ShipCountry + '" /></td>');
      if (current) {
        modal.find('tbody tr:last').append('<td><input type="button" data-index="' + index + '" value="Remove" class="btn btn-danger btnRemoveOrder" /></td>');
      }

    });

    $('.btnRemoveOrder').click(function() {
      var index = $(this).data('index');
      currentOrders.splice(index, 1);
      updatePopUp($('#popup'), currentOrders, false);
    })
  }
}

$('#btnAddOrder').click(function() {

  var order = {
    OrderId: $('#txtId').val(),
    Freight: $('#txtFreight').val(),
    ShipCountry: $('#txtShipCountry').val()
  }

  currentOrders.push(order);
  $('#txtId').val('');
  $('#txtFreight').val('');
  $('#txtShipCountry').val('');

  updatePopUp($('#popup'), currentOrders, false);

});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div id='myApp'>
  <table cellpadding="0" cellspacing="0">
    <tr>
      <th>
        Name
      </th>
      <th>
        Country
      </th>
      <th>
        Orders
      </th>
      <th>
         
      </th>
    </tr>
    <tbody id='tableBody'></tbody>
    <tfoot>
      <tr>
        <td>
          <input type="text" id='txtName' />
        </td>
        <td>
          <input type="text" id='txtCountry' />
        </td>
        <td>
          <button type="button" class="btn btn-primary" data-toggle="modal" data-index="-1" data-target="#popup">
            Add Orders</button>
        </td>
        <td>
          <input type="button" id="btnAdd" class="btn btn-primary" value="Add" />
        </td>
      </tr>
    </tfoot>
  </table>

  <div class="modal fade" id="popup" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">
            ×</button>
          <h4 class="modal-title">
            Modal Header</h4>
        </div>
        <div class="modal-body">
          <div class="s2vk-container">
            <div class="row">
              <div class="col-md-8">
                <div class="panel panel-default">
                  <table class="table table-condensed">
                    <thead>
                      <tr style="padding-left: 10px; padding-right: 10px;" class="active">
                        <th class="thick-line" style="padding-left: 10px; padding-right: 20px; padding-top: 6px;
                                                    padding-bottom: 6px;">
                          OrderId
                        </th>
                        <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                          Freight
                        </th>
                        <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                          ShipCountry
                        </th>
                        <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                        </th>
                      </tr>
                    </thead>
                    <tbody id='#modalBody'>

                    </tbody>
                    <tfoot>
                      <tr style="padding-left: 20px; padding-right: 20px;">
                        <td>
                          <input type="text" id='txtId' class="input-sm form-control" ng-model="OrderId" />
                        </td>
                        <td>
                          <input type="text" id='txtFreight' class="input-sm form-control" ng-model="Freight" />
                        </td>
                        <td>
                          <input type="text" id='txtShipCountry' class="input-sm form-control" ng-model="ShipCountry" />
                        </td>
                        <td>
                          <button type="button" id='btnAddOrder' class="btn btn-primary">
                            Add</button>
                        </td>
                      </tr>
                    </tfoot>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
            Close</button>
        </div>
      </div>
    </div>
  </div>

</div>