How to reload MVC view using AngularJS?

Question

I have ASP.NET application. The code looks as following:

View (List.html):

<table class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>Events</th>
            <th>Date</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="t in ticketGroups">
            <td>{{t.Artist}}</td>
            <td>{{t.ActionDate}}</td>
            <td>{{t.Price}}</td>
            <td><input type="number" ng-model="t.NewPrice" /></td>
        </tr>
    </tbody>
</table>
<section>
    <a class="btn btn-success" ng-click="save()">Ok</a>
</section>

AngularJS:

'use strict';

//Routing
var ChangePriceApp = angular.module('ChangePriceApp', ['ngRoute', 'ConcertServices'])
    .config(['$routeProvider', function ($routeProvider) {
        $routeProvider
            .when('/list', { templateUrl: 'partials/ChangePrice/List.html', controller: "ListController" })
            .otherwise({ redirectTo: '/list' });
    }]);

ChangePriceApp.controller("ListController", ["$scope", "ChangePrice", function ($scope, ChangePrice) {

    ChangePrice.get().success(function (ticketGroups) {
        $scope.ticketGroups = ticketGroups;
    });

    $scope.save = function () {
        ChangePrice.save($scope.ticketGroups).success(function () {
            ChangePrice.get().success(function (ticketGroups) {
                $scope.ticketGroups = ticketGroups;
            });
            toastr.success("saved");
        });
    }
}]);

Initially, the view displays data correctly. I change data and click "Ok" to save it. The issue is after I clicked "Ok", all data disappeared. I want to reload the view with updated data.

UPDATE:

The MVC methods:

public class PriceController : ConcertApiController
{
    private readonly ITicketModelService _service;

    public PriceController(ITicketModelService service)
    {
        _service = service;
    }

    [HttpGet]
    public IEnumerable<RevaluationTicketGroup> GetRevaluationList()
    {
        return _service.GetRevaluationList(CurrentUser);
    }

    [HttpPost]
    public void PostRevaluationList(IEnumerable<RevaluationTicketGroup> tickets)
    {
        _service.PostRevaluationList(CurrentUser, tickets);
    }
}

The AngularJS service:

.factory('ChangePrice', function ($http, ErrorUI) {
    return {
        get: function () {
            return $http.get('/RestApi/api/Price/').error(ErrorUI.showApiError);
        },
        save: function (ticketGroups) {
            return $http.post('/RestApi/api/Price/', ticketGroups).error(ErrorUI.showApiError);
        }
    }
})

What do ChangePrice.get() and ChangePrice.save() return? — Matt Herbstritt
– Matt Herbstritt, Commented Jul 29, 2015 at 10:15
ChangePrice.get() returns the list and populate the table, and ChangePrice.save() saves the changes. The methods behind worked out correctly, but the view wasn't refreshed. — tesicg
– tesicg, Commented Jul 29, 2015 at 10:19
But they return $http promises right? Could we see those methods please? Might not be important but won't hurt — Matt Herbstritt
– Matt Herbstritt, Commented Jul 29, 2015 at 10:28

Matt Herbstritt · Accepted Answer · 2015-07-29 12:35:51Z

1

Not sure exactly what the problem is but I re-factored your promise chain in a DEMO to something like below and it seemed to update correctly. Try this;

factory

get: function(){
  return $http
    .get('/RestApi/api/Price/')
    .then(function(response){
      return response.data;
    })
    .catch(ErrorUI.showApiError);
},

save: function (ticketGroups) {
    return $http
        .post('/RestApi/api/Price/', ticketGroups)
        .catch(ErrorUI.showApiError);
}

controller

 ChangePrice
      .get()
      .then(function (ticketGroups) {
          $scope.ticketGroups = ticketGroups;
      });

 $scope.save = function () {

    ChangePrice
      .save($scope.ticketGroups)
      .then(function(){
          toastr.success("saved");
          return ChangePrice.get()
      })
      .then(function(ticketGroups){
          $scope.ticketGroups = ticketGroups;
      });

 }

edited Jul 29, 2015 at 12:35

answered Jul 29, 2015 at 10:39

Matt Herbstritt

4,8825 gold badges29 silver badges33 bronze badges

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

4 Comments

tesicg Over a year ago

I can't even get the initial data now.

Matt Herbstritt Over a year ago

In the ChangePrice.get().then() callback what do you get when you console.log(response). Could you make a plunker demo with some dummy data, it would be much easier to see what's what.

tesicg Over a year ago

Something's wrong with the syntax that you used. I'd like to stay with "success" style instead of "get".

Matt Herbstritt Over a year ago

Try removing the error() method chained to your $http.post() call that's inside your save() method. I don't think it's returning the promise so that might be causing the issue. Apart from that I'm not sure how to help without seeing what your seeing in a demo.

Collectives™ on Stack Overflow

How to reload MVC view using AngularJS?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related