locked
How to redirect from one page to another page in Angulrajs? RRS feed

  • Question

  • User221424154 posted

    Any one know how to  redirect from one page to another page based on value which come from database using Angular js  and WEB API.

    Friday, July 6, 2018 1:48 PM

Answers

  • User-1171043462 posted

    Taking reference from my article: Call (Consume) Web API using AngularJS, AJAX and JSON in ASP.Net MVC

    You can easily do it in the Success method of Angular AJAX function

    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <style type="text/css">
            body {
                font-family: Arial;
                font-size: 10pt;
            }
    
            table {
                border: 1px solid #ccc;
                border-collapse: collapse;
            }
    
            table th {
                background-color: #F7F7F7;
                color: #333;
                font-weight: bold;
            }
    
            table th, table td {
                padding: 5px;
                border: 1px solid #ccc;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
        <script type="text/javascript">
            var app = angular.module('MyApp', [])
            app.controller('MyController', function ($scope, $http, $window) {
                $scope.IsVisible = false;
                $scope.Search = function () {
                    var customer = '{Name: "' + $scope.Prefix + '" }';
                    var post = $http({
                        method: "POST",
                        url: "/api/AjaxAPI/AjaxMethod",
                        dataType: 'json',
                        data: customer,
                        headers: { "Content-Type": "application/json" }
                    });
    
                    post.success(function (data, status) {
                        window.location = "/Home/Details?CustomerId=" + data[0].CustomerID;
                        $scope.Customers = data;
                        $scope.IsVisible = true;
                    });
    
                    post.error(function (data, status) {
                        $window.alert(data.Message);
                    });
                }
            });
        </script>
        <div ng-app="MyApp" ng-controller="MyController">
            Name:
            <input type="text" ng-model="Prefix" />
            <input type="button" value="Submit" ng-click="Search()" />
            <hr />
            <table cellpadding="0" cellspacing="0" ng-show="IsVisible">
                <tr>
                    <th>Customer Id</th>
                    <th>Name</th>
                    <th>Country</th>
                </tr>
                <tbody ng-repeat="m in Customers">
                    <tr>
                        <td>{{m.CustomerID}}</td>
                        <td>{{m.ContactName}}</td>
                        <td>{{m.Country}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
    </html>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, July 6, 2018 2:13 PM

All replies

  • User632428103 posted

    Hello manishamani,

    you need to use

    var data = callYourWebAPI
    if (TEST YOUR VALUE HERE)
    { window.location.href = 'your page'; }

    Friday, July 6, 2018 2:06 PM
  • User-1171043462 posted

    Taking reference from my article: Call (Consume) Web API using AngularJS, AJAX and JSON in ASP.Net MVC

    You can easily do it in the Success method of Angular AJAX function

    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <style type="text/css">
            body {
                font-family: Arial;
                font-size: 10pt;
            }
    
            table {
                border: 1px solid #ccc;
                border-collapse: collapse;
            }
    
            table th {
                background-color: #F7F7F7;
                color: #333;
                font-weight: bold;
            }
    
            table th, table td {
                padding: 5px;
                border: 1px solid #ccc;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
        <script type="text/javascript">
            var app = angular.module('MyApp', [])
            app.controller('MyController', function ($scope, $http, $window) {
                $scope.IsVisible = false;
                $scope.Search = function () {
                    var customer = '{Name: "' + $scope.Prefix + '" }';
                    var post = $http({
                        method: "POST",
                        url: "/api/AjaxAPI/AjaxMethod",
                        dataType: 'json',
                        data: customer,
                        headers: { "Content-Type": "application/json" }
                    });
    
                    post.success(function (data, status) {
                        window.location = "/Home/Details?CustomerId=" + data[0].CustomerID;
                        $scope.Customers = data;
                        $scope.IsVisible = true;
                    });
    
                    post.error(function (data, status) {
                        $window.alert(data.Message);
                    });
                }
            });
        </script>
        <div ng-app="MyApp" ng-controller="MyController">
            Name:
            <input type="text" ng-model="Prefix" />
            <input type="button" value="Submit" ng-click="Search()" />
            <hr />
            <table cellpadding="0" cellspacing="0" ng-show="IsVisible">
                <tr>
                    <th>Customer Id</th>
                    <th>Name</th>
                    <th>Country</th>
                </tr>
                <tbody ng-repeat="m in Customers">
                    <tr>
                        <td>{{m.CustomerID}}</td>
                        <td>{{m.ContactName}}</td>
                        <td>{{m.Country}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
    </html>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, July 6, 2018 2:13 PM
  • User-1780421697 posted
    https://stackoverflow.com/questions/27941876/how-to-redirect-to-another-page-using-angularjs

    Sunday, July 8, 2018 2:53 PM