if we click subitems it can open one pop up window after entering values on pop up window we can close that window
after clicking of add function in the parent row the values can go to the above row in that
Order values are displayed in table format
I need to display order values on the pop-up window.
The below code is in AngularJs and this is exactly what I want but can someone convert the same result without angular when I submit data it will pass all data to the 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>
</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" ng-init="clicked=false" ng-click="clicked=!clicked">
View Orders</button>
<div aria-hidden="false" style="display: block;" ng-show="clicked">
<div >
<div >
<div >
<button type="button" ng-click="clicked=false">
×</button>
<h4 >
Order Details</h4>
</div>
<div >
<table >
<thead>
<tr style="padding-left: 10px; padding-right: 10px;" >
<th style="padding-left: 10px; padding-right: 20px; padding-top: 6px;
padding-bottom: 6px;">
OrderId
</th>
<th style="padding-left: 10px; padding-right: 10px;" >
Freight
</th>
<th style="padding-left: 10px; padding-right: 10px;" >
ShipCountry
</th>
<th style="padding-left: 10px; padding-right: 10px;" >
</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 >
<button type="button" ng-click="clicked=false">
Ok</button>
</div>
</div>
</div>
</div>
</td>
<td>
<input type="button" ng-click="Remove($index)" value="Remove" />
</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" ng-model="subitems" data-toggle="modal" data-target="#popup">
Add Orders</button>
</td>
<td>
<input type="button" ng-click="Add()" value="Add" />
</td>
</tr>
</tfoot>
</table>
<div id="popup" role="dialog">
<div >
<div >
<div >
<button type="button" data-dismiss="modal">
×</button>
<h4 >
Modal Header</h4>
</div>
<div >
<div >
<div >
<div >
<div >
<table >
<thead>
<tr style="padding-left: 10px; padding-right: 10px;" >
<th style="padding-left: 10px; padding-right: 20px; padding-top: 6px;
padding-bottom: 6px;">
OrderId
</th>
<th style="padding-left: 10px; padding-right: 10px;" >
Freight
</th>
<th style="padding-left: 10px; padding-right: 10px;" >
ShipCountry
</th>
<th style="padding-left: 10px; padding-right: 10px;" >
</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" ng-click="remove1($index)" readonly="readonly">
Delete</button>
</td>
</tr>
</tbody>
<tfoot>
<tr style="padding-left: 20px; padding-right: 20px;">
<td>
<input type="text" ng-model="OrderId" />
</td>
<td>
<input type="text" ng-model="Freight" />
</td>
<td>
<input type="text" ng-model="ShipCountry" />
</td>
<td>
<button type="button" ng-click="add2()">
Add</button>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
<div >
<button type="button" data-dismiss="modal">
Close</button>
</div>
</div>
</div>
</div>
</div>CodePudding user response：
I've tried to implement the same using jQuery. The html contains the markup of the html as well as the modal. The manipulations are being done in JavaScript.
Not the best code but it should give an idea.
When the user clicks on submit you can send either cart or cart.customers to the asp.net controller.
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" 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" />');
});
$('.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" readonly value="' element.OrderId '" /></td>');
modal.find('tbody tr:last').append('<td><input type="text" readonly value="' element.Freight '" /></td>');
modal.find('tbody tr:last').append('<td><input type="text" readonly value="' element.ShipCountry '" /></td>');
if (current) {
modal.find('tbody tr:last').append('<td><input type="button" data-index="' index '" value="Remove" /></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" data-toggle="modal" data-index="-1" data-target="#popup">
Add Orders</button>
</td>
<td>
<input type="button" id="btnAdd" value="Add" />
</td>
</tr>
</tfoot>
</table>
<div id="popup" role="dialog">
<div >
<div >
<div >
<button type="button" data-dismiss="modal">
×</button>
<h4 >
Modal Header</h4>
</div>
<div >
<div >
<div >
<div >
<div >
<table >
<thead>
<tr style="padding-left: 10px; padding-right: 10px;" >
<th style="padding-left: 10px; padding-right: 20px; padding-top: 6px;
padding-bottom: 6px;">
OrderId
</th>
<th style="padding-left: 10px; padding-right: 10px;" >
Freight
</th>
<th style="padding-left: 10px; padding-right: 10px;" >
ShipCountry
</th>
<th style="padding-left: 10px; padding-right: 10px;" >
</th>
</tr>
</thead>
<tbody id='#modalBody'>
</tbody>
<tfoot>
<tr style="padding-left: 20px; padding-right: 20px;">
<td>
<input type="text" id='txtId' ng-model="OrderId" />
</td>
<td>
<input type="text" id='txtFreight' ng-model="Freight" />
</td>
<td>
<input type="text" id='txtShipCountry' ng-model="ShipCountry" />
</td>
<td>
<button type="button" id='btnAddOrder' >
Add</button>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
<div >
<button type="button" data-dismiss="modal">
Close</button>
</div>
</div>
</div>
</div>
</div>