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);
}