AngularJS Service not calling controller to get updated data after CRUD operation

Question

I am beginner in AngularJS and trying to create a master data entry screen, where upper portion containing form fields & lower portion containing table(GridView) to display all master entries. Grid showing all the data when i initially run the application. If i add/Edit any new/old records, the updated data not reflected in the gridview. (i.e) If i add any new entry, it is saving into the DB through service, but not reflecting in the GridView. Even if i navigate through menu also not displaying the updated data in the grid. But if i press Ctrl + F5, it is showing updated data in the Grid. Alsp If i close the browser & re run the application then the updated records displaying in the Gridview. Below is my code. Please help.. Thank you.!

Index.cshtml

<div class="row">
    <div class="col-md-12">
        <h3 class="page-header">
            Component Master
        </h3>
        <div class="col-md-12">
            <div class="alert alert-dismissible alert-danger" ng-show="ComponentForm.$invalid && submitted">
                <button type="button" class="close" aria-hidden="true" data-dismiss="alert">
                    &times;</button>
                <p ng-show="ComponentForm.ComponentName.$error.required && (ComponentForm.ComponentName.$dirty || submitted)">
                    - Component Name is required.</p>
                <p ng-show="ComponentForm.ComponentName.$error.minlength && (ComponentForm.ComponentName.$dirty || submitted)">
                    - Component Name should be minimum 5 char long.</p>
                <p ng-show="ComponentForm.Language.$error.required && (ComponentForm.Language.$dirty || submitted)">
                    - Language Selection is required.</p>
            </div>
        </div>
        <div class="col-md-12">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        Panel success</h3>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <!-- FORM : YOU CAN DISABLE, HTML5 VALIDATION BY USING "novalidate" ATTRIBUTE-->
                            <form name="ComponentForm" class="form-inline" novalidate>
                            <!-- COMPONENT NAME -->
                            <div class="form-group" ng-class="{ 'has-error' : ComponentForm.ComponentName.$invalid && (ComponentForm.ComponentName.$dirty || submitted) }"
                                style="margin: 10px;">
                                <label style="margin-right: 10px;">
                                    Component Name</label>
                                <input type="text" name="ComponentName" ng-model="ComponentModel.ComponentName" class="form-control"
                                    placeholder="Component Name..." ng-minlength="5" ng-required="true" />
                                <input type="hidden" data-ng-model="ComponentModel.ComponentID" />
                                <input type="hidden" data-ng-model="ComponentModel.IsActive" />
                                <input type="hidden" data-ng-model="UserID" />
                            </div>
                            <!-- LANGUAGE -->
                            <div class="form-group" style="margin: 10px;" ng-class="{ 'has-error' : ComponentForm.Language.$invalid && (ComponentForm.Language.$dirty || submitted) }">
                                <label style="margin-right: 10px;">
                                    Language</label>
                                <select name="Language" data-ng-model="ComponentModel.Language" class="form-control"
                                    ng-required="true">
                                    <option value="" title="Select">Select</option>
                                    <option value="English" title="English">English</option>
                                    <option value="Spanish" title="Spanish">Spanish</option>
                                </select>
                            </div>
                            <!-- ng-disabled FOR ENABLING AND DISABLING SUBMIT BUTTON -->
                            <!-- SAVE BUTTON -->
                            @*<button type="submit" class="btn btn-info" ng-disabled="ComponentForm.$invalid" value="Add">Add</button>*@
                            <button type="submit" class="btn btn-primary" ng-click="SaveComponent(ComponentModel);"
                                ng-value="Add">
                                Add
                            </button>
                            <button type="submit" class="btn btn-warning" ng-click="ClearComponent();" value="Clear">
                                Clear
                            </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <table class="table table-striped table-bordered table-hover">
                <thead>
                    <tr class="success">
                        <th class="text-center">
                            ComponentID
                        </th>
                        <th class="text-center">
                            Component Name
                        </th>
                        <th class="text-center">
                            Language
                        </th>
                        <th class="text-center">
                            IsActive
                        </th>
                        <th class="text-center">
                            Last Modified By
                        </th>
                        <th class="text-center">
                            Last Modified Date
                        </th>
                        <th class="text-center">
                            Action
                        </th>
                    </tr>
                    <tr style="height: 250px; border: 2px solid #ecf0f1;" data-ng-show="ShowEmptyRow">
                        <th colspan="7" class="text-center" style="vertical-align: middle;">
                            <label class="control-label">
                                No Records Found.</label>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-ng-repeat="Component in ComponentMaster" data-ng-show="!ShowEmptyRow" ng-class="{'danger':!Component.IsActive}">
                        <td style="vertical-align: middle; text-align: center;">
                            {{ Component.ComponentID}}
                        </td>
                        <td style="vertical-align: middle;">
                            {{ Component.ComponentName}}
                        </td>
                        <td style="vertical-align: middle;">
                            {{ Component.Language}}
                        </td>
                        <td style="vertical-align: middle; text-align: center;">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" disabled="disabled" ng-checked="Component.IsActive" /></label>
                            </div>
                        </td>
                        <td style="vertical-align: middle;">
                            {{ Component.ModifiedBy}}
                        </td>
                        <td style="vertical-align: middle; text-align: center;">
                            {{ Component.ModifiedDate}}
                        </td>
                        <th style="vertical-align: middle; text-align: center;">
                            <span class="btn btn-info btn-sm" ng-show="Component.IsActive" ng-click="EditComponent(Component.ComponentID);">
                                Edit</span> <span class="btn btn-danger btn-sm" ng-show="Component.IsActive" ng-click="ActivateDeActivateComponent(Component.ComponentID,false,ComponentModel.ModifiedBy);">
                                    Delete</span> <span class="btn btn-info btn-sm" ng-show="!Component.IsActive" ng-click="ActivateDeActivateComponent(Component.ComponentID,true,ComponentModel.ModifiedBy);">
                                        Activate</span>
                        </th>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Angular Script:

 var AngularApp = angular.module("AngularApp", ['ngRoute']);

AngularApp.controller("ConfigurationController", ['$scope', 'ConfigurationService', function ($scope, ConfigurationService) {
    $scope.ComponentMaster = [];
    GetComponentMasterDetails();

    /*-------------  Save Component       ---------------- */
    // When i click Save btn - executing this function. control comes here...
    $scope.SaveComponent = function (ComponentModel) {
        $scope.submitted = true;
        if ($scope.ComponentForm.$valid) {

            ComponentModel.ModifiedBy = $scope.UserID;
            // control comes here... & Calling method "SaveComponentMaster" inside ConfigurationService & returned execution message
            var Msg = ConfigurationService.SaveComponentMaster(ComponentModel);
            Msg.then(function (response) {
                if (response.data != "") {
                    alert(response.data);
                }
                else {
                    // After Saved into DB showing below alert message.
                    alert("Data Saved Successfully.");      
                    // Calling below method to get the updated records from DB            
                    GetComponentMasterDetails();
                }
            }, function (error) {
                alert(error.data);
            });
        }
        else {
            alert("Please correct errors!");
        }
    }
    /**----------------------------------------------------- */
    // Below method is calling...
    function GetComponentMasterDetails() {
        // Call moves to ConfigurationService Service method...
        var ComponentMaster = ConfigurationService.GetComponentMasterDetails();
        ComponentMaster.then(function (response) {
            if (response.data != "") {
                // This service call returning the old data only.
                // Updated/Added entry details not reflecting in the returned object. 
                // This is the reason why it is showing old records only in the Grid.
                $scope.ShowEmptyRow = false;
                $scope.ComponentMaster.length = 0;
                angular.extend($scope.ComponentMaster, response.data);
            }
            else {
                $scope.ShowEmptyRow = true;
                $scope.ComponentMaster.length = 0;
            }
        }, function (error) {
            alert(error.data);
        });
    }

} ]);

AngularApp.service("ConfigurationService", function ($http) {

// Call comes here...
this.GetComponentMasterDetails = function () {
    // Call comes here... But this $http.get - not calling MVC controller Action method. 
    // I kept my breakpoint in MVC controller method, but not executed the method. 
    // So this Service just returning old records. This is the reason the View showing old records. 
    // If i press Ctrl + F5, it is calling MVC controller message & showing the updated records.
    return $http.get('/Configuration/GetComponentMasterDetails');
};

// Control comes here... Then calling MVC controller Action method.. Saving data into DB & returned execution message.
this.SaveComponentMaster = function (ComponentModel) {
    var response = $http({
        method: 'POST',
        url: '/Configuration/SaveComponentMaster/',
        data: { ComponentModel: ComponentModel }
    });
    return response;
};
});

MVC Controller

 [NoCache]
 [HttpGet]
    public ActionResult GetComponentMasterDetails()
    {
        RNDDBContext dbContext = new RNDDBContext();
        var result = dbContext.ExecuteStoreQuery<ComponentModel>("exec PROC_GET_COMPONENT_MASTER_DETAILS").ToList();
        return Json(result, JsonRequestBehavior.AllowGet);
    }

 [NoCache]
 [HttpPost]
    public JsonResult SaveComponentMaster(ComponentModel ComponentModel)
    {
        RNDDBContext dbContext = new RNDDBContext();
        var result = dbContext.ExecuteStoreQuery<string>("exec PROC_SAVE_COMPONENT_MASTER @ComponentID,@ComponentName,@Language,@IsActive,@ModifiedBy",
                                                           new SqlParameter("ComponentID", ComponentModel.ComponentID),
                                                            new SqlParameter("ComponentName", ComponentModel.ComponentName),
                                                            new SqlParameter("Language", ComponentModel.Language),
                                                            new SqlParameter("IsActive", ComponentModel.IsActive),
                                                            new SqlParameter("ModifiedBy", ComponentModel.ModifiedBy)
                                                        ).FirstOrDefault();
        return Json(result, JsonRequestBehavior.AllowGet);
    }

 public class NoCache : ActionFilterAttribute
{
    public override void OnResultExecuting(ResultExecutingContext filterContext)
    {
        filterContext.HttpContext.Response.Cache.SetExpires(DateTime.UtcNow.AddDays(-1));
        filterContext.HttpContext.Response.Cache.SetValidUntilExpires(false);
        filterContext.HttpContext.Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches);
        filterContext.HttpContext.Response.Cache.SetCacheability(HttpCacheability.NoCache);
        filterContext.HttpContext.Response.Cache.SetNoStore();
        base.OnResultExecuting(filterContext);
        }
  }

Community · Accepted Answer · 2017-05-23 11:59:00Z

1

Initialize your $scope.ComponentMaster on the top of controller

AngularApp.controller("ConfigurationController", ['$scope', 'ConfigurationService', function ($scope, ConfigurationService) {

        $scope.ComponentMaster = [];

        GetComponentMasterDetails();

and just empty that, then repopulate once you call GetComponentMasterDetails()

function GetComponentMasterDetails() {
    var ComponentMaster = ConfigurationService.GetComponentMasterDetails();
    ComponentMaster.then(function (response) {
        if (response.data != "") {
            $scope.ShowEmptyRow = false;
            // Empty the ComponentMaster array
            $scope.ComponentMaster.length = 0;
            // Add the retrieved data
            angular.extend($scope.ComponentMaster, response.data)
        }
        else {
            $scope.ShowEmptyRow = true;
            // Empty the ComponentMaster array
            $scope.ComponentMaster.length = 0;
        }
    }, function (error) {
        alert(error.data);
    });
}

This issue is similar to this

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered Jul 28, 2016 at 13:27

doge1ord

3111 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

watraplion Over a year ago

thanks for your response..! I have updated the code as you suggested. But still the problem is not resolved. The issue is not with the $scope.ComponentMaster records, service itself not returning the updated records. I have updated my code block above.

doge1ord Over a year ago

Maybe the results from /Configuration/GetComponentMasterDetails are being cached on your browser. Try adding another parameter in your GET request, and see if the results would change

watraplion Over a year ago

thanks doge.. It is correct, Prob with the MVC controller caching. By default MVC controller caching output data, thats y it was returning the same data. Now i applied [NoCache] attribute as given in the following link stackoverflow.com/questions/12776466/…, it is working fine now.

watraplion Over a year ago

thank you for reading my full text, analysed & answer my questions :)

Collectives™ on Stack Overflow

AngularJS Service not calling controller to get updated data after CRUD operation

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related