Hi,
I have 4 tables
Orders table
OrderId OrderName
1 mahesh
2 rahul
Items table
Id Name OrderId
1 aaa 1
2 bbb 1
3 ccc 2
subitem2 table
aid RAI_Id text
1 1 dhdhhd
2 1 34444
3 2 fjfjjf
subitem4 table
aid RAI_Id text
1 1 dhhdhd
2 1 3hdhdh
3 2 ddduu
I have one grid view In grid view I have buttons add,delete and edit
Right now i want to delete the relevant records based upon(OrderId) after clciking of remove button
i am new to these type of forms that
Please kindly help me
@{
Layout = null;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Index</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="~/scripts/dirpagination.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', ['angularUtils.directives.dirPagination'])
app.controller('MyController', function ($scope, $http, $window, RegistrationService) {
loadEmployees();
$scope.edit = function (index) {
debugger;
$scope.invoice = true;
var id = $scope.employees[index].OderId;
$.post("/dynamicaalyAddRemove/Edit/", { orderID: id }, function (r) {
$scope.OrderName = r.Orders.OrderName;
$scope.OrderDate = r.Orders.OrderDate;
$scope.Description = r.Orders.Description;
$scope.Customers = [];
for (var i = 0; i < r.Items.length; i++) {
var customer = {};
var itemId = r.Items[i].Id;
var item2 = [];
for (var j = 0; j < r.Subitem2.length; j++) {
if (r.Subitem2[j].RAI_Id == itemId) {
var tax = {};
tax.id = r.Subitem2[j].aid;
tax.value = r.Subitem2[j].text;
item2.push(tax);
}
}
var item4 = [];
for (var j = 0; j < r.Subitem4.length; j++) {
if (r.Subitem4[j].RAI_Id == itemId) {
item4.push(r.Subitem4[j]);
}
}
customer.OrderName = r.Items[i].Name;
customer.OrderDate = r.Items[i].Name;
customer.Description = r.Items[i].Name;
customer.Name = r.Items[i].Name;
customer.subitems = item4;
customer.taxes = item2;
$scope.Customers.push(customer);
}
});
}
$scope.ShowHide = function () {
$scope.invoice = $scope.invoice ? false : true;
}
function loadEmployees() {
var EmployeeRecords = RegistrationService.gettaxes();
EmployeeRecords.then(function (d) {
$scope.taxes = d.data;
}, function () {
alert("Error occured while fetching employee list...");
});
}
GetAllEmployees();
function GetAllEmployees() {
var getData = RegistrationService.getEmployees();
getData.then(function (emp) {
$scope.employees = emp.data;
}, function (emp) {
alert("Records gathering failed!");
});
}
$scope.Customers = [];
$scope.taxes = [];
$scope.newtaxes = [];
$scope.change = function (i) {
if ($(this)[0].checkbox) {
$scope.newtaxes.push($scope.taxes[i]);
}
else {
$scope.newtaxes.pop($scope.taxes[i]);
}
};
$scope.Add = function () {
loadEmployees();
var customer = {};
customer.OrderName = $scope.OrderName;
customer.OrderDate = $scope.OrderDate;
customer.Description = $scope.Description;
customer.subitems = $scope.subitems;
customer.Name = $scope.Name;
customer.Country = $scope.Country;
customer.taxes = $scope.newtaxes;
$scope.Customers.push(customer);
$scope.Name = "";
$scope.Country = "";
$scope.subitems = [];
$scope.newtaxes = [];
};
$scope.subitems = [];
$scope.add2 = function () {
alert("hello");
var items = {};
items.Id = $scope.subitems.length + 1;
items.text = $scope.text;
$scope.subitems.push(items);
$scope.Id = "";
$scope.text = "";
}
$scope.remove1 = function (index) {
var name = $scope.subitems[index].text;
if ($window.confirm("Do you want to delete: " + name)) {
$scope.subitems.splice(index, 1);
}
}
$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);
}
}
$scope.EditCustomer = function (data) {
$scope.editing = true;
$scope.selected = angular.copy(data);
};
$scope.SaveCustomer = function (id) {
$scope.editing = false;
$scope.Value[id] = angular.copy($scope.selected);
};
$scope.Save = function () {
debugger
var orders = {};
orders.OrderName = $scope.OrderName;
orders.OrderDate = $scope.OrderDate;
orders.Description = $scope.Description;
var details = new Array();
for (var i = 0; i < $scope.Customers.length; i++) {
var detail = {};
detail.Name = $scope.Customers[i].Name;
var taxes = new Array();
var subitems = new Array();
for (var j = 0; j < $scope.Customers[i].taxes.length; j++) {
var tax = {};
tax.text = $scope.Customers[i].taxes[j].value;
taxes.push(tax);
}
for (var k = 0; k < $scope.Customers[i].subitems.length; k++) {
var sub = {};
sub.text = $scope.Customers[i].subitems[k].text;
subitems.push(sub);
}
detail.subitem2 = taxes;
detail.subitem4 = subitems;
details.push(detail);
}
orders.details = details;
$http({
method: "Post",
url: "/dynamicaalyAddRemove/SaveOrder",
dataType: 'json',
headers: { "Content-Type": "application/json" },
data: '{orders: ' + JSON.stringify(orders) + '}'
}).success(function (data) {
alert(data);
$scope.Customers = [];
}).error(function (err) {
$scope.Message = err.Message;
})
loadEmployees();
};
});
app.service("RegistrationService", function ($http) {
this.getEmployees = function () {
return $http.get("/dynamicaalyAddRemove/getAll");
};
this.gettaxes = function () {
return $http.get("/dynamicaalyAddRemove/getAll1");
};
});
</script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<div ng-show="invoice">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<table class="table table-condensed">
<tr class="active">
<td>
Order Name
</td>
<td>
<input type="text" id="orderName" class="form-control" name="name" ng-model="OrderName"
ng-class="submitted?'ng-dirty':''" required autofocus />
<span class="error col-md-offset-2" ng-show="(f1.name.$dirty || submitted) && f1.name.$error.required">
Order Name required!
</span>
</td>
<td>Order Date</td>
<td>
<input type="text" class="form-control"
name="date"
uib-datepicker-popup="{{format}}"
ng-model="OrderDate"
is-open="popup1.opened"
ng-click="open()"
popup-placement="bottom-right" ng-class="submitted?'ng-dirty':''" required autofocus />
<span class="error col-md-offset-2" ng-show="(f1.date.$dirty || submitted) && f1.date.$error.required">Order Date required!</span>
</td>
</tr>
<tr class="active">
<td>Description</td>
<td colspan="2">
<textarea id="description" class="form-control" ng-model="Description"></textarea>
</td>
</tr>
</table>
</div>
</div>
</div>
<table cellpadding="0" cellspacing="0">
<tr>
<th>
Name
</th>
<th>
Country
</th>
<th>
Subitems
</th>
<th>
taxes
</th>
<th>
</th>
</tr>
<tbody ng-repeat="m in Customers">
<tr>
<td>
{{m.Name}}
</td>
<td>
{{m.Country}}
</td>
<td value="{{m.subitems}}">
<button type="button" class="btn btn-primary btn-sm" ng-init="clicked1=false" ng-click="clicked1=!clicked">
View Orders
</button>
<div class="modal fade in" aria-hidden="false" style="display: block;" ng-show="clicked1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="clicked1=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">
</th>
</tr>
</thead>
<tbody ng-repeat="o in m.subitems">
<tr>
<td>
{{o.aid}}
</td>
<td>
{{o.text}}
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click="clicked1=false">
Ok
</button>
</div>
</div>
</div>
</div>
</td>
<td value="{{m.subitems1}}">
<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;">
id
</th>
<th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
Value
</th>
@*<th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
Action
</th>*@
</tr>
</thead>
<tbody ng-repeat="o in m.taxes">
<tr>
<td>
{{o.id}}
</td>
<td>{{o.value}}</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" />
</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">
Click
</button>
</td>
<td>
<button type="button" ng-model="subitems1" data-toggle="modal" data-target="#popup1">
Click
</button>
</td>
<td>
<input type="button" ng-click="Add()" 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: 20px; padding-right: 20px;" class="active">
<th class="thick-line" style="padding-left: 20px; padding-right: 20px; padding-top: 6px;
padding-bottom: 6px;">
SNo
</th>
<th style="padding-left: 20px; padding-right: 20px;" class="thick-line">
Text
</th>
<th style="padding-left: 20px; padding-right: 20px;" class="thick-line">
</th>
</tr>
</thead>
<tbody>
<tr style="padding-left: 20px; padding-right: 20px;" ng-model="myData2" ng-repeat="subitem in subitems">
<td>
{{subitem.Id}}
</td>
<td>
{{subitem.text}}
</td>
<td>
<button type="button" class="btn btn-sm btn-danger" ng-click="remove1($index)" readonly>
Delete
</button>
</td>
</tr>
</tbody>
<tfoot>
<tr style="padding-left: 20px; padding-right: 20px;">
<td ng-model="Id">
{{$index+1}}
</td>
<td>
<input type="text" class="input-sm form-control" ng-model="text" />
</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 class="modal fade" id="popup1" 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;">
Id
</th>
<th class="thick-line" style="padding-left: 10px; padding-right: 20px; padding-top: 6px;
padding-bottom: 6px;">
Checkbox
</th>
<th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
Value
</th>
<th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
Action
</th>
</tr>
</thead>
<tbody>
<tr style="padding-left: 20px; padding-right: 20px;" ng-model="myData3" ng-repeat="subitem in taxes">
<td>
{{subitem.id}}
</td>
<td>
<input type="checkbox" name="vehicle1" ng-model="checkbox" ng-click="change($index)" />
</td>
<td>
<span ng-show="editOrder != true">{{subitem.value}}</span>
<input ng-show="editOrder" type="text" ng-model="subitem.value" class="form-control" />
</td>
<td>
<button class="btn btn-primary" type="button" ng-show="editOrder != true && editingOrder != true"
id="Button1" ng-click="editOrder = true; EditOrder(subitem)">
<i class="fa fa-fw fa-pencil"></i>
</button>
<button class="btn btn-primary" type="button" ng-show="editOrder" id="Button2" ng-click="editOrder = false; SaveOrder($index)">
<i class="fa fa-save"></i>
</button>
</td>
</tr>
</tbody>
</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 style="padding: 10px 0;">
<input id="submit" type="button" value="Save" name="add" ng-click="Save()" class="btn btn-success" />
</div>
</div>
<button class="btn btn-success btn-sm " ng-click="ShowHide();" style="margin-left: 15px;">
Add Order
</button>
<div class="table-responsive " style="overflow-x: auto;">
<table id="dvData" class="table table-bordered table-hover table-striped" width="50%">
<tr class="success">
<th style="cursor: pointer;" ng-click="sort('OrderName')">
<b>Order Name</b> <span class="glyphicon sort-icon" ng-show="sortKey=='OrderName'"
ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
</span>
</th>
<th>
Actions
</th>
</tr>
<tr dir-paginate="employee in employees|orderBy:sortKey:reverse|filter:search|itemsPerPage:10"
ng-model="search">
<td>
{{employee.OrderName}}
</td>
<td>
<button type="button" class="btn btn-danger btn-sm" ng-click="remove($index)" readonly>
Remove
</button>
<button class="btn btn-info btn-sm" ng-click="edit($index)">
Edit
</button>
</td>
</tr>
<b style="color: #5bc0de; margin-left: 20px;">Total Records </b>:
<b>
{{employees.length}}
</b>
</table>
<dir-pagination-controls max-size="10" direction-links="true" boundary-links="true">
</dir-pagination-controls>
</div>
</div>
</body>
</html>
