Hi mahesh213,
In the $scope.Add you need to uncomment
$scope.OrderName = "";
Else you need to insert the Order name each time you click on add button.
Then in $scope.Save you need to change
detail.OrderName = $scope.OrderName;
with
details.OrderName = $scope.OrderName;
Because you are assigning OrderName to details Array not to detail object. By the way the details object is declared inside the for loop and you are trying to assign property before declaring the object.
Then based on the value passed to the Controller save the record to Database accordingly.
Check this example. Now please take its reference and correct your code.
Model
public class Orders
{
public string OrderName { get; set; }
public List<DetailsModel> details { get; set; }
}
public class DetailsModel
{
public string ItemName { get; set; }
public List<Taxes> Taxes { get; set; }
}
public class Taxes
{
public int TaxId { get; set; }
public string TaxValue { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: Home
private TestEntities db = new TestEntities();
// GET: DynamicaalyAddRemove
public ActionResult Index()
{
return View();
}
public JsonResult getAll1()
{
List<AutoPopList> Emp = db.AutoPopLists.ToList();
return Json(Emp, JsonRequestBehavior.AllowGet);
}
[HttpPost]
public JsonResult SaveOrder(Orders orders)
{
string result = "Error! Order Is Not Complete!";
Order order = new Order();
order.OrderName = orders.OrderName;
// Add OrderName to Order Table.
db.Orders.Add(order);
db.SaveChanges();
// Return OrderId of inserted Item.
int orderId = order.OrderId;
foreach (DetailsModel detail in orders.details)
{
Item item = new Item();
item.Name = detail.ItemName;
item.OrderId = orderId;
// Add ItemName with OrderId to Item Table.
db.Items.Add(item);
db.SaveChanges();
result = "Success! Order Is Complete!";
}
return Json(result, JsonRequestBehavior.AllowGet);
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<link type="text/css" 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="//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, $http, $window, RegistrationService) {
//Loads all Employee records when page loads
loadEmployees();
function loadEmployees() {
var EmployeeRecords = RegistrationService.gettaxes();
EmployeeRecords.then(function (d) {
//success
$scope.taxes = d.data;
});
}
$scope.Customers = [];
$scope.subitems1 = [];
$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.Name = $scope.Name;
customer.taxes = $scope.newtaxes;
$scope.Customers.push(customer);
//Clear the TextBoxes.
//$scope.OrderName = "";
$scope.Name = "";
$scope.newtaxes = [];
};
$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;
var details = new Array();
for (var i = 0; i < $scope.Customers.length; i++) {
var detail = {};
detail.ItemName = $scope.Customers[i].Name;
var taxes = new Array();
for (var j = 0; j < $scope.Customers[i].taxes.length; j++) {
var tax = {};
tax.TaxId = $scope.Customers[i].taxes[j].id;
tax.TaxValue = $scope.Customers[i].taxes[j].value;
taxes.push(tax);
}
detail.Taxes = taxes;
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
this.gettaxes = function () {
return $http.get("/Home/getAll1");
};
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<table class="active">
<tr>
<td>
<input type="text" id="orderName" class="form-control" name="name" ng-model="OrderName"
required autofocus />
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0">
<tr>
<th>
Name
</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.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" style="overflow: scroll; max-height: 85%; margin-top: 50px;
margin-bottom: 50px;">
<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>
<span ng-show="editOrder != true">{{o.checkbox}}</span>
<input ng-show="editOrder" type="checkbox" name="vehicle1" ng-model="o.checkbox">
</td>
<td>
<span ng-show="editOrder != true">{{o.value}}</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>
<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="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>
</body>
</html>
Screenshot
The Form
Value in the Array
Database After Insert
