Hi mahesh213,
Check this example. Now please take its reference and correct your code.
Create a Model class OrderDetails with the properties to hold the records of Order,Item,Subitem2 and Subitem4.
Model
public class OrderDetails
{
public Order Orders { get; set; }
public List<Item> Items { get; set; }
public List<subitem2> Subitem2 { get; set; }
public List<subitem4> Subitem4 { get; set; }
}
Then in edit click call the controller which will fetch the records from database based on the OrderId.
Then in controller fetch the records from database and pass the Model class as JSON Result to the view and assign to scope variable to display the record.
Controller
public class HomeController : Controller
{
// GET: /Home/
MasterEntities db = new MasterEntities();
public ActionResult Index()
{
return View();
}
public JsonResult getAll()
{
var employeeList = (from TP in db.Orders
select new
{
OderId = TP.OrderId,
OrderName = TP.OrderName,
}).ToList();
var JsonResult = Json(employeeList, JsonRequestBehavior.AllowGet);
//JsonResult.MaxJsonLength = int.MaxValue;
return JsonResult;
}
public JsonResult getAll1()
{
List<AutoPopList> Emp = db.AutoPopLists.ToList();
return Json(Emp, JsonRequestBehavior.AllowGet);
}
[HttpPost]
public JsonResult Edit(int? orderID)
{
Order order = new Order();
var orders = (from o in db.Orders
where o.OrderId == orderID
select new
{
OrderId = o.OrderId,
OrderName = o.OrderName
}).FirstOrDefault();
order = new Order { OrderId = orders.OrderId, OrderName = orders.OrderName };
List<Item> listItem = new List<Item>();
var items = (from i in db.Items
where i.OrderId == orderID
select new
{
Id = i.Id,
Name = i.Name
}).ToList();
foreach (var item in items)
{
listItem.Add(new Item { Id = item.Id, Name = item.Name });
}
List<subitem2> listSubitem2 = new List<subitem2>();
foreach (var item in items)
{
var subitems = (from i in db.subitem2
where i.RAI_Id == item.Id
select new
{
aid = i.aid,
text = i.text,
RAI_Id = i.RAI_Id
}).ToList();
foreach (var subitem in subitems)
{
listSubitem2.Add(new subitem2 { aid = subitem.aid, text = subitem.text, RAI_Id = subitem.RAI_Id });
}
}
List<subitem4> listSubitem4 = new List<subitem4>();
foreach (var item in items)
{
var subitems = (from i in db.subitem4
where i.RAI_Id == item.Id
select new
{
aid = i.aid,
text = i.text,
RAI_Id = i.RAI_Id
}).ToList();
foreach (var subitem in subitems)
{
listSubitem4.Add(new subitem4 { aid = subitem.aid, text = subitem.text, RAI_Id = subitem.RAI_Id });
}
}
OrderDetails details = new OrderDetails();
details.Orders = order;
details.Items = listItem;
details.Subitem2 = listSubitem2;
details.Subitem4 = listSubitem4;
return Json(details, JsonRequestBehavior.AllowGet);
}
[HttpPost]
public ActionResult SaveOrder(Order orders)
{
string result = "Error! Order Is Not Complete!";
return Json(result, JsonRequestBehavior.AllowGet);
}
}
View
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<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="../../dirPagination.js" type="text/javascript"></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) {
$scope.invoice = true;
var id = $scope.employees[index].OderId;
$.post("/Home/Edit/", { orderID: id }, function (r) {
$scope.OrderName = r.Orders.OrderName;
$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) {
item2.push(r.Subitem2[j]);
}
}
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.Name = r.Items[i].Name;
customer.subitems = item2;
customer.subitemsTax = item4;
customer.taxes = $scope.taxes;
$scope.Customers.push(customer);
}
});
}
$scope.ShowHide = function () {
//If DIV is visible it will be hidden and vice versa.
$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...");
});
}
//To Get All Records
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();
//Add the new item to the Array.
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);
//Clear the TextBoxes.
$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) {
//Find the record using Index from Array.
var name = $scope.Customers[index].Name;
if ($window.confirm("Do you want to delete: " + name)) {
//Remove the item from Array using Index.
$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 () {
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.RAI_Id = $scope.Customers[i].taxes[j].id;
tax.text = $scope.Customers[i].taxes[j].value;
taxes.push(tax);
}
for (var k = 0; k < $scope.Customers[i].subitems.length; k++) {
var sub = {};
//tax.RAI_Id = $scope.Customers[i].taxes[j].id;
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: "/Home/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) {
//get All taxes
//get All Employee
this.getEmployees = function () {
return $http.get("/Home/getAll");
};
this.gettaxes = function () {
return $http.get("/Home/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>
</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.subitemsTax">
<tr>
<td>
{{o.aid}}
</td>
<td>
<span ng-show="editOrder != true">{{o.text}}</span>
<input ng-show="editOrder" type="text" ng-model="o.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(o)">
<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 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>
Screenshot
