I'm trying to create an application which posts some information to the database. I would like to reload the page after post request. I have used various techniques but I'm not getting it. Data is successfully posted but page not reloaded. Can you please help me on this?
Thanks in advance.
var app = angular.module("mybookstore", ['angularUtils.directives.dirPagination','ngRoute']);
app.controller("bookcontroller", function ($scope, $http, $location,$route) {
$scope.message = "Mybookstore";
$http.get('https://localhost:44397/api/BookStore/getBookInformation')
.then(function(response) {
$scope.getbooks = response.data;
});
//var vm = this;
$scope.ReloadData = function () {
$http.get('https://localhost:44397/api/BookStore/getBookInformation')
.then(function (response) {
$scope.getbooks = response.data;
});
}
$scope.enableAdd = function () {
$scope.Addemployee = true;
};
$scope.Addbooks = function () {
var Book = {};
Book.BookID = $scope.BookID;
Book.Book_Name = $scope.Book_Name;
Book.Book_Author = $scope.Book_Author;
Book.ISBN = $scope.ISBN;
$http({
url: "https://localhost:44397/api/BookStore/AddBook",
dataType: 'json',
method: 'POST',
data: Book,
headers: {
"Content-Type": "application/json"
}
}).success(function (response) {
$scope.msg = "Book has been successfully added";
//$location.path('/Mybookstore');
$window.location.href = '/bookstore_1';
$route.reload();
$scope.getbooks = response.data;
});
$scope.ReloadData();
};
// $scope.Addemployee = false;
});
<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/dirPagination.js"></script>
<script src="~/Scripts/Bookinformation.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<div ng-app="mybookstore" ng-controller="bookcontroller" style="font-family:Cambria">
{{message}}
@{
ViewBag.Title = "Mybookstore";
}
<h2 style="text-align:center">Mybookstore</h2>
<table class="table-responsive" width="100%" border="1" style="text-align: center">
<tr>
<td>Book ID</td>
<td>Book Name</td>
<td>Author</td>
<td>ISBN</td>
</tr>
<tbody ng-repeat="m in getbooks">
<tr>
<td>
{{m.BookID}}
@*<span ng-hide="Addemployee">{{m.BookID}}</span>
<input type="text" ng-model="m.BookID" ng-show="Addemployee" />*@
</td>
<td>
{{m.Book_Name}}
@*<span ng-hide="Addemployee">{{m.Book_Name}}</span>
<input type="text" ng-model="m.Book_Name" ng-show="Addemployee" />*@
</td>
<td>
{{m.Book_Author}}
@*<span ng-hide="Addemployee">{{m.Book_Author}}</span>
<input type="text" ng-model="m.Book_Author" ng-show="Addemployee" />*@
</td>
<td>
{{m.ISBN}}
@*<span ng-hide="Addemployee">{{m.ISBN}}</span>
<input type="text" ng-model="m.ISBN" ng-show="Addemployee" />*@
</td>
</tr>
</tbody>
<tfoot ng-init="Addemployee = false" ng-show="Addemployee">
<tr>
<td><input type="text" ng-model="BookID" /></td>
<td><input type="text" ng-model="Book_Name" /></td>
<td><input type="text" ng-model="Book_Author" /></td>
<td><input type="text" ng-model="ISBN" /></td>
<td><input type="button" ng-click="Addbooks()" value="Add" /></td>
</tr>
</tfoot>
</table>
<a><input type="button" ng-model="addemployee" value="Add Books to list" ng-click="enableAdd()" /></a>
<table class="table-responsive" width="100%" border="1" style="text-align: center">
<tr>
<td>{{getbook.BookID}}</td>
<td>{{getbook.Book_Name}}</td>
<td>{{getbook.Book_Author}}</td>
<td>{{getbook.ISBN}}</td>
</tr>
</table>
<a><input type="button" value="reload page" ng-click="ReloadData()" /></a>
</div>