With my ASP.NET MVC, modal popup, DataTable and SSMS Server application, I have a problem when updating the dataTable. Am using global variable in my MVC application. <div class="container"> <!-- Trigger the modal with a button -->
<!-- Modal --> <div class="modal fade" id="ProductStockModal" role="dialog"> <div class="modal-dialog">
<!-- Modal content--> <div class="modal-content"> <div class="modal-header pt-1 pb-1"> <h4 class="modal-title">Product StockIn</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <p> <input type="date" class="form-control" ng-model="ProductStock.StockInDate" placeholder="Select Date" required> </p>
<p> <select class="form-control" ng-model="ProductStock.ProductId">
<option ng-repeat="item in ProductList" value="{{item.ProductId}}">{{item.ProductName}}</option> </select> </p>
<p> <select class="form-control" ng-model="ProductStock.BatchId">
<option ng-repeat="item in BatchList" value="{{item.BatchId}}">{{item.BatchName}}</option> </select> </p> <p> <input type="number" class="form-control" ng-model="ProductStock.Quantity" placeholder="Enter Quantity" required> </p> <p> <input type="number" class="form-control" ng-model="ProductStock.PurchasePrice" placeholder="Enter Purchase Price" required> </p> <p> <input type="number" class="form-control" ng-model="ProductStock.SalesPrice" placeholder="Enter Sales Price" required> </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<a ng-click="SaveProductStock()" class="btn btn-primary btn"> Save </a> </div> </div>
</div> </div>
<!-- DataTales Example --> <div class="card shadow mb-4">
<div class="card-body"> <div class="table-responsive"> <p> <button type="button" class="btn btn-info btn-lg float-right" data-toggle="modal" data-target="#ProductStockModal"><i class="fa fa-plus"></i>StockIn</button></p> <br/> <br/> <table class="table table-bordered table-striped table-hover dataTable1" id="summary-dataTable" width="100%" cellspacing="0"> <thead class="table-dark"> <tr> <th>StockIn Date</th> <th>Prodcut Name</th> <th>Batch Number</th> <th>Quantity </th> <th>Purchase Price</th> <th>Sales Price</th> <th> Edit </th> </tr> </thead>
<tbody> </tbody> <tfoot> </tfoot> </table> </div> </div> </div> </div> (function () { app.controller('ProductStock', ['$scope', '$http', '$compile', function ($scope, $http, $compile) {
$('#summary-dataTable').DataTable({ "footerCallback": function (row, data, start, end, display) { console.log(data); var totalAmount = 0; for (var i = 0; i < data.lenght; i++) { totalAmount += parseFloat(data[i][4]); } //console.log(totalAmount); },
"processing": false, "serverSide": false, "paging": true, "destroy": true, pageLength: 25, createdRow: function (row, data, dataIndex) { $compile(angular.element(row).contents())($scope); },
ProductStockList: '<"buttons"B>Bfrtip', //"dom": "Bfrtip", "columns": [ { "data": "StockInDate" }, { "data": "ProductName" }, { "data": "BatchName" }, { "data": "Quantity" }, { "data": "PurchasePrice" }, { "data": "SalesPrice" }, { "data": null, "width": "50px", "render": function (data, type, full, meta) { return "<a class='fa fa-edit' ng-click=getProductStock('" + full["ProductQtyId"] + "','" + full["BatchName"] + "');>Edit</a>"; } }, ], "ajax": { "url": "/Home/GetAllProductStocks", "type": "GET", "dataSrc": "[]", }, });
// declaring a global scope variable $scope.ProductStock = new Object(); var init = function () { GetProducts(); GetBatchs(); GetAllProductStock(); }; // end of init init(); //init is called
// Global scope variable for productStock function GetProducts() { $http.get('/Home/GetAllProduct') .then(function (response) { var data = response.data; $scope.ProductList = data; }); }
function GetBatchs() { $http.get('/Home/GetAllBatch') .then(function (response) { var data = response.data; $scope.BatchList = data; }); } $scope.getProductStock = function ($ProductQtyId, BatchName) { return $.ajax({ contentType: 'application/json; charset=ut-8', dataType: 'json', type: 'GET', url: "/Home/UpdateProductStock" + "?ProductQtyId=" + $ProductQtyId + "&BatchName=" + BatchName, //data: data, success: function (result) { console.log(result); debugger; $scope.ProductStock = result;
$scope.$apply();
$("#ProductStockModal").modal('show');
}, error: function () { alert("Error!") }
});
} HOME CONTROLLER public ActionResult UpdateProductStock(int? ProductQtyId, string BatchName) { ASPNETMASTERPOSTEntities db = new ASPNETMASTERPOSTEntities(); var dataList = db.tblProductStocks.Include("tblProduct").Include("tblBatch").ToList(); var modifiedData = dataList.Where(a => a.ProductQtyId == ProductQtyId).Select(x => new //var modifiedData = dataList.Select(x => new { ProductQtyId = x.ProductQtyId, ProductId = x.ProductId, StockInDate = x.StockInDate, ProductName = x.tblProduct.ProductName, Quantity = x.Quantity, BatchId = x.BatchId, BatchName = x.tblBatch.BatchName, PurchasePrice = x.PurchasePrice, SalesPrice = x.SalesPrice }).FirstOrDefault(); return Json(modifiedData, JsonRequestBehavior.AllowGet); }