Emmmanuel FIADUFE

Emmmanuel FIADUFE

  • 2k
  • 201
  • 4.5k

My Modal Popup doesn't call the data from the database

Dec 6 2022 8:55 PM

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">&times;</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);
        }